반응형
css 사용이 어려워서 네이버 메인화면을 개발자 도구로 살펴보았다.
-부모요소에서 폭을 설정하고
-자식요소에서 폭과 높이, position,float, padding,margin을 설정해서 모양을 잡는다.
-바디부터해서 상위요소부터 하위요소까지 위에서 아래로 차례차례 하나하나 한땀한땀 설정해준다.
-공통된 요소는 class로 빼고
-공통된 코드는 .css파일로 뺀다.
----------
body
ㄴwrap
ㄴheader
ㄴcontainer
ㄴfooter
----------
(가독성을 위해 자식요소의 css는
들여쓰기를 하자.)
body에서
폰트 및 최소 폭 등 공통적인 부분을 설정한다.
position
- static
-relative
-absolute
-fixed
display
-none
-block:크기지정 가능, 영역
-inline :크기지정불가
-inline-block :크기지정이 가능한 inline
float : 부유 속성
-left
-right
-inherit
margin
- (상하좌우)
-(상)(우)(하)(좌)
-(상)(좌우)(하)
-(상하)(좌우)
paddin
반응형