[html/css] Display, Position

<div> - block

<span> - inline

 

[ display : ? ]

 

inline

- 안에 있는 값의 크기에 맞춰진다.

- 배경색과 크기를 주어도 안에 내용이 없으면 표시가 안 됨

- 아무리 속성 값으로 크기를 주어도 무시 당함

 

inline-block

- 안에 있는 값과 상관 없이 우리가 준 값에 크기가 맞춰진다.

- 대신 한 줄에 여러 상자가 진열 될 수 있음

 

block

- 한 줄에 하나씩만 들어가는 상자이다.

 

 

---

[ Position : ? ]

 

static ( 기본값 )

- html에 정의된 순서대로 자연스럽게 브라우저에 띄워주는 역할을 함 

 

relative 

- 원래 있어야 하는 자리에서 지정한 값 만큼 움직여줘야한다.

 

absolute

- 아이템을 담고 있는 박스를 기준으로 움직인다.

ex) 아이템을 싸고 있는 박스가 컨테이너 라면 컨테이너를 기준으로 움직임

 

fixed

- window 안에서 움직임

- 그 자리에 계속 붙어 있음

 

sticky

- 원래 있어야 하는 자리에 있으면서 크롤링이 되어도 원래 그 자리에 붙어 있음