[CSS] 레이아웃

웹사이트를 만들 때 가장 중요한 것은?

우리가 잘 정의한 박스를 원하는 위치에 원하는 사이즈로 배치하는 것이 가장 중요함.

 

display, position을 알아야 함.

 

 

block level(ex. div) vs inline level(ex. span)

 

display속성

<value>

inline: 물건

lnline-block:상자인데 한 줄에 여러 개가 진열

block: 상자인데 한 줄에 하나씩

 

position속성

<value>

static: 기본 값. html에 정의된 순서대로 자연스럽게 보여지는 것을 의미함. 보통 body안에 태그들이 작성되기 때문에 화면 좌측 상단부터 채워짐.

relative: left, top등의 값을 지정해주었다면 그 값에 맞게 위치를 변경시킬 수 있음.(나를 기준으로 움직임)

absolute: 자신의 바로 위 부모의 위치를 기준으로 변경이 일어남.(내가 담겨 있는 상자를 기준으로 움직임)

fixed: 상자안에서 벗어나 윈도우 상에서 움직임.

sticky: 스크롤을 내려도 사라지지 않고 원래 있던 그 자리에 그대로 붙어있음.

 

 

css를 쓸 때는 브라우저와 호환이 되는지 확인하면서 써야 한다.

검토할 수 있는 사이트 https://caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc

 

cf) 오래된 브라우저에서 호환이 안 될 경우 PostCSS같은 framework를 쓰게 되면 최신 css로 작성해도 해당 버전을 지원해줌.