[CSS] Display && Position

Dispaly

display는 크게 block level 과  inline level로 나뉜다. (<div> 와 <span> 으로 예시를 들겠음)

 

block level

• 한줄에 한개씩 나온다
• 컨텐츠의 크기와 상관없이 지정한 값에 맞춰 표현이 된다

inline level

• 한줄에 공간이 많으면여러개가 나온다
• 물건(contents) 자체만을 꾸며주기때문에 width height는 개무시하고 안에 들은 물건의 크기에 맞춰서 설정이된다.
• 안에 내용물(contents)이 있어야 표기된다

display 속성의 변경을 통해 block, inline을 바꿀 수 있다.

 

inline-block Vs inline

내용물이 없으면 inline은 표시되지 않고 inline-block은 내용물이 없어도 표시되는 inline속성의 block이다.

 

---

Position

각 꼭지점을 이용해서 div의 위치를 바뀔 수 있다

 

1. positoin: static;

position 설정을 하지 않았다면 기본값으로 가지고 있는 값
정해진 순서대로 브라우저에 보여진다(inline block 설정대로).

2. position: relative;

원래 있어야 하는 자리에서(static으로 정해진 각자의 속성대로의 모습) 상대적으로 옮겨진다

3. position: absolute;

내 아이템과 가장 가까이 있는 box 안에서 상대적으로 이동한다. relative와의 차이는 명확하다.

4. position: fixed;

상자안에서 완전히 벗어나 윈도우 안에서 움직인다(웹페이지 기준이다)

5. position : sticky;

스크롤링이 되어도 자리가 바뀌지 않는다