웹1 2일차

[html, css, js 용도]

html : html은 문서 뼈대를 담당한다 (공간만 제공함)

예 ) 이미지, 글자

 

css : html에서 생성된 공간, 이미지, 글자 등을 꾸며주는 역할을 한다

예 ) 글자 크기, 글자 색상, 박스 크기 등

 

js : 동적인 부분을 담당한다

예 ) 특정 레이아웃을 클릭했을 때 페이지가 넘어감, X버튼을 클릭하면

팝업이 닫힘..

 

[html & 태그]

주석 : 주석안에 있는 코드는 실행되지 않는다. 용도는 여러가지이다

-> 메모(협업), 코드 실행 x, 잠시 감춰놓을 때 사용함 ctrl + /

 

태그 : 브라우저가 html문서를 읽어들일 때 인식할 수 있도록 도와주는 용도정도로

이해하면 좋음 

 

여는 태그 : <div>

닫는 태크 : </div>

엘리먼트 div + tap : <div></div>

insert : 글자가 사라질 때 누르면 글자가 사라지지 않음

 

[html태그와 head, body 태그]

 

1.html은 버전마다 DOCTYPE구조와 다르다.

2.html이 가장 큰 구조이고 그 안에 가장 크게 head와 body로 나뉜다.

3.head는 head문서에 대한 정보를 담고 있다.

4.body는 html 본격적인 구조가 시작되는 곳이다.

5.body크기는 화면크기에 비례한다.

6.코드팬에서는 초보자가 쉽게 접근하고 강의하기 쉽도록 DOCTYPE이 선언된

상태로 숨겨져 있다. 그래서 빈화면에 태그를 작성했을 경우 body태그 안에다가 작성한 것이다.

※div태그(상위엘리먼트- body)는 display라는 속성이 block(=성격)으로 설정 되어있다.
block은 상위엘리먼트 너비를 100% 가져온다는 특징을 가지고 있다.
지금 코드팬은 상위엘리멘트가 body인 상황이고 body는 너비가 화면 크기만하기 때문에
div도 화면크기만큼 나오는 것이다

[css]

컬러 속성값 종류

 

1.컬러이름

예 ) red, blue, green

 

2.rgb

예 ) rgb(red,green,blue);

red= rgb(255,green,blue);

 

3.hax

예 ) #redgreenblue

red= #ff0000

 

4.rgba

예 ) rgba(red, green, blue, 투명도);

red= rgb(255, 0, 0, 0.5);

->투명도는 0~1

0 -> 0%

0.5 -> 50%

1-> 100%

 

<복습 참고하기>