CSS 레이아웃

CSS 포지셔닝과 주요 속성들

CSS 포지셔닝

- 위치를 잡는 것이라고 볼 수 있음(각 기능들의 배치)

- html마크업으로 작성한 웹 문서를 CSS포지셔닝을 통해서 우리가 현재 보는 웹 사이트로 만들어줌.

 

box - sizing

 

- content박스와 border박스 중 어디를 기준으로 하느냐에 따라 사이즈가 달라진다.

 

<예제>

 

float

 

<예제>

 

<예제>

 

 

<예제>

 

ㅈ같네 다 날라갔네

position 속성

 

 

 

 

 

- static : 문서의 흐름에 맞춰 배치 - 기본값

- relative : 위칫값을 지정 가능한 점을 제외하고는 static과 동일

- absolute : relative값을 사용한 상위 요소를 기준으로 위치 지정해 배치

(상위 요소에 relative가 지정되어 있어야 원하는대로 absolute를 사용해서 배치 가능)

- fixed : 브라우저 창을 기준으로 위치를 지정해 배치(동일 자리에 고정)

 

visibility 속성, z-index 속성

 

 

다단편집

 

 

- 지정한 크기에 따라 단 수 나눠짐(화면 확대, 축소하면 영향 받음)

- 지정한 숫자 만큼의 단으로 나눠짐(화면 확대, 축소 상관없이 지정한 단수)

 

 

표 스타일