CSS 레이아웃 정리 display, position

https://youtu.be/jWh3IbgMUPI

 

 

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

우리가 만든 박스들을 원하는 위치와 사이즈로 배치하는 것이 가장 중요함

배치 할 수 있도록 만드는게 display와 position임

 

. display

div는 대표적인 Block-level,

span은 대표적인 inline-level임 

 

block은 한 줄에 하나씩 들어가는 상자

inline이라는 것은 컨텐츠의 크기만을 기준으로 꾸며주는 것

inline-block은 block같이 상자의 크기로 변환되어서 안의 컨텐츠의 크기와는 상관없이 표시 됌, 한 줄에 여러개 가능

 

 

Block-level은 기본적으로 한 줄에 하나씩 출력

inline-level은 기본적으로 공간이 많으면 여러개 출력 가능함

 

 

. Position

position은 기본 값으로 static(고정)을 가지고있다. static은 HTML에 적힌 순서대로 보여주는 것을 의미함

 

position : relative; 는 원래 자리를 기준으로 움직이다.

 

position : absolute; 는 내 아이템이 담겨있는 내 아이템과 가장 가까이 있는 박스(컨테이너)를 기준으로 움직임

 

position : fixed; 는 상자안에서 벗어나서 웹페이지를 기준으로 움직임

 

position : sticky; 는 원래 있던 자리에 그대로 있음.