CSS: 레이아웃의 모든것

💡 Display

inline

컨텐츠 자체, 물건 자체만 꾸며주는 것(CSS로 width와 height를 정의 한것을 전부 무시합니다)

inline-block

한줄에 다 여러개 넣는데, 블럭 단위로 상자로 변환되어서 안에 컨텐츠의 사이즈는 상관없이 우리가 지정한 박스의 width와 height에 맞춰서 표기 됩니다.

block

상자긴 상자인데, 한줄에 하나씩 들어가는 상자

💡 Position

모든 position 속성들은 top, left, right, bottom을 통해 위치하게 할 수 있습니다.

static

기본값

relative

원래 있어야할 자리 기준에서 이동

• 요소의 기본값(static)으로 배치되기 때문에 그대로 컨텐츠가 자리를 잡는다.
  그러다 컨텐츠 자체가 기본값일때 기준으로 위치를 변경하고 싶을때 top, left, right, bottom 을 사용하면 쉽게 옮길 수 있다.
• absolute의 시작 위치를 잡아주는 용도(부모 위치 기준)로 쓰이는 경우가 많다.

absolute

담겨 있는 상자를 기준에서 이동

• 부모를 기준으로 상대적으로 위치합니다.
• 부모중에 position으로 위치한 요소가 없다면 body를 기준으로 한다.

fixed

윈도우를 기준에서 이동

sticky

스크롤링을 할때 원래 자리에 고정