개발자 도담씨

간단한 페이지 틀 하나 만드는데도 초보인 나에게는 시간이 엄청 걸리는지라 오랜만에 이렇게 글을 쓰게 된다. 😥이전글 - [Web Programming] - CSS 속성 정리편 + 추가 기타 속성과 키워드이전글에서 포스팅했던 CSS 속성 외에도 웹 페이지를 만들다 보면 새로운 친구들을 만나게 되어 응용하면서 정리했었다.로그인 & 회원가입 페이지에 이어서 게시글이 나타나는 '메인 페이지'를 만들면서 새로 만난 속성들을 정리하는 시간을 가져보고자 한다 ! 우선 이번 메인페이지에서는 CSS와 조금 더 동적인 부분을 구현해보고자 JQuery를 사용해봤다.그리고 요즘 반응형 웹이라는걸 많이 사용해서 ( 내 블로그 또한 그렇고 ! ) 깊게 공부한건 아니지만 구글을 통해 흉내만 내봤다...👶좌측 초록색 부분은 내가 만..

1편 - [Web Programming] - JAVA Script 1편 + 자바스크립트 기본2편 - [Web Programming] - Java Script 2편 + 자바스크립트 문서 객체 모델 2편에서 만났던 문서 객체의 조작법에 대해 한번 알아보자 :)우리는 문서 객체를 선택해서 글자, 스타일, 속성 등을 조작할 수 있다. 아래는 글자 조작 속성명이다.설명 그대로 test 의 글자를 document.body.textContent로 변경한다면일반 글자 형식이므로 실행 결과 " test "가 그대로 뜰 것이다.만약 innerHTML을 사용했다면 태그가 인식되고 문자열 test만 뜬다. 이어서 스타일 조작이다.var header = document.getElementById('header');header...

1편 - [Web Programming] - JAVA Script 1편 + 자바스크립트 기본 HTML태그를 자바스크립트에서 이용할 수 있게 객체로 만든 것을 문서 객체라고 부른다.따라서 자바스크립트에서 문서 객체를 사용하면 HTML 태그를 생성, 제거하거나 조작할 수 있다.또한 마우스를 클릭하거나 키보드를 누르는 등의 이벤트에 반응할 수 있다. 웹 브라우저에 HTML 파일을 끌어다 놓으면 웹 브라우저는 HTML파일을 분석하고 화면에 표시한다.이때 웹 브라우저가 HTML 파일을 분석하고 표시하는 방식을 문서 객체 모델 ( DOM document Object Model )이라 한다.문서 객체 모델의 관련 용어로 태그, 문서 객체, 노드라는 친구들이 등장한다. 태그는 , 등의 친구들이다. 계속해서 만나온 아이..

참고 사이트 : https://www.w3schools.com/js/default.asp 자바스크립트란 HTML과 웹의 프로그래밍 언어다.따로 컴파일이 필요없으며, 인터프리터 언어이다.웹 페이지에서 움직이는 무언가가 있다면 이 자바스크립트라는 친구를 사용한 것이다. 자바를 공부했다면 JS에서 키워드로 불려지는 친구들은 어렵지 않을 것이다.단 처음 자바스크립트를 접한다면 break, else, case등 키워드(예약어)가 어렵게 느껴질 수도 있을 것같다. 자바와 자바스크립트는 다른 것이라 하지만 책을 읽어보니 거의 비슷하다.개인적으로는 자바를 공부했기 때문에 반복문, 조건문등 언어와 비슷한 친구들은 넘어가도록 하겠다. 자바스크립트는 하나 이상의 표현식이 모여진 문장으로 나타낸다.그리고 여기에서는 사실 문장..

1편 - [Web Programming] - CSS 속성 1편 ( 단위 + 박스 속성 )2편 - [Web Programming] - CSS 속성 2편 ( display + 배경 속성 )3편 - [Web Programming] - CSS속성 3편 ( 글자 + 위치 속성 )4편 - [Web Programming] - CSS 속성 4편 마지막 ( float + 그림자 + 그레이디언트 속성 ) 지난 4편에 걸처 CSS 속성을 포스팅 해봤다.크게 어렵지는 않지만 내용이 많아 길게 느껴졌던 것 같다.이어서 CSS 응용과 레이아웃 편을 적을려 했지만 그전에 먼저 로그인 화면과 회원가입 화면을 만든 것이 있어서 이를 예제로 복습겸 다른 추가사항들이 있어 공부해본 것들을 포스팅 해보겠다. : )우선 만들어본 화면이다. ..

1편 - [Web Programming] - CSS 속성 1편 ( 단위 + 박스 속성 ) 2편 - [Web Programming] - CSS 속성 2편 ( display + 배경 속성 )3편 - [Web Programming] - CSS 속성 3편 ( 글자 + 위치 속성 ) 이번 마지막 CSS 속성 편에서는 float, 그림자, 그레이디언트 속성에 관해 알아보겠다. 🤗 첫번째 float 속성은 웹 페이지를 만들 때 가장 많이 사용하는 속성이라고 한다.아래의 표에 나타난 키워드 외에도 다양한 키워드가 있지만 주로 아래의 두가지를 사용한다. float 속성을 사용하지 않은 예제는 다음과 같다. 여기서 img { float: left } 의 속성을 주게 되면 아래와 같이 바뀌는 모습을 볼 수 있다.키워드 ri..

1편 - [Web Programming] - CSS 속성 1편 ( 단위 + 박스 속성 )2편 - [Web Programming] - CSS 속성 2편 ( display + 배경 속성 ) 3편에서는 글자 속성과 위치 속성을 다뤄보겠다. 😊HTML 역사를 살펴보면 대학에서 원격으로 논문을 제출 하는 용도로 만들어졌다.따라서 글자와 관련된 속성이 굉장히 많다. font-size 는 말그대로 1편에서 다룬 크기 단위를 사용해서 지정해 주면 된다. font-family 는 글꼴을 지정해 준다. 여기서는 조심해야할 부분이 바로 사용자 컴퓨터에 설치된 글꼴을 입력 할 수 있다는 것이다.웹 페이지를 만들 때 내 컴퓨터에는 설치된 글꼴일 수 있지만 사용자의 컴퓨터에 없을 수 있다.이러한 경우를 고려해 font-famil..

1편 - [Web Programming] - CSS 속성 1편 ( 단위 + 박스 속성 ) 1편에 이어 알아볼 내용은 display속성과 배경 속성이다. 2편의 첫번째로 display속성을 살펴보겠다 😚HTML이 나오면서 display속성에 입력할 수 있는 다양한 키워드가 등장했지만모든 display속성을 제대로 지원하는 웹 브라우저는 아직 없다고 한다. display속성을 알아보기에 앞서 이전에 등장했던 친구 중 공간 분할 태그 를 기억하고 있으면 좋겠다.div는 블록 형식, span태그는 인라인 형식으로 알고 있을 것이다.우리는 display속성을 이용해 div와 span같이 인라인, 블록, 인라인-블록 형식을 설정할 수 있다. 예) display: 키워드 명; 여기서 인라인-블록 형식 의 차이가 무엇..

스타일 속성을 적용 하기에 앞어서 먼저 스타일 값으로 입력할 수 있는 CSS의 단위부터 알아 보려고 한다.스타일 값으로 입력할 수 있는 단위에는 키워드, 크기, 색상, URL 등이 있다.이 친구들을 차례대로 살펴 보겠다 😳 첫번째로 키워드 단위는 W3C에서 미리 정의한 단어로, 키워드를 스타일 값으로 입력하면키워드에 해당하는 스타일이 자동으로 적용이 된다. 자동 완성 기능을 통해 서비스 해주고 있다. 두번째, 크기 단위이다. 표 외에도 cm, mm, inch 단위 등이 있지만 주로 아래와 같은 단위를 사용한다.( 개인적으로는 픽셀과 백분율 단위를 많이 사용하는 것 같다 ! )배수단위는 유용하나 많은 사람들이 사용하지 못하는 단위라고 한다.어렵게 생각할 것 없이 배수를 나타내는 것이다. 1배 = 1em =..

CSS ( Cascating Style Sheets )의 약자로HTML 을 꾸밀때 사용하는 스타일 시트 언어다. 위와 같은 코드를 CSS 블록이라고 한다. 이번 챕터에서는 CSS 선택자에 대해 나오는데 이 선택자는 스타일 시트 뿐만 아니라 자바스크립트에서도 사용된다. 선택자 종류선택자 형태 사용 예 전체 선택자 * * 태그 선택자 태그 h1 아이디 선택자 #아이디 #header 클래스 선택자 .클래스 .item 속성 선택자 선택자 [ 속성 = 값 ] input [ type = text ] 선택자 [ 속성 ~= 값 ] div [ data - role ~= row ] 선택자 [ 속성 |= 값 ] div [ data - role |= row ] 선택자 [ 속성 ^= 값 ] div [ data - role ^=..