CSS - 01. 기본 "꼭 알아야 하는 display와 position속성"

"원하는 위치에 원하는 사이즈로 배치하기 위해선 CSS의 display와 position을 무조건 알고 있어야한다."

display

• display:inline

  컨텐츠 자체만을 꾸민다. ( 컨텐츠 크기에 맞춰 변경되므로 dispaly가 inline으로 설정된경우, css파일에서 width와 height으로 아무리 크기를 설정해도 이를 무시하고, 컨텐츠 크기 자체가 기준이된다.)

• display: inline-block

  공간이 있다면 한줄에 여러 아이템이 배치된다.
  inline과 달리 컨텐츠가 없어도 설정한 width와 height이 있으면 이를 기준으로 스타일링이 적용된다.

• display:block

  (아이템 옆에 공간이 있더라도) 한줄에 하나씩 배치된다.

position

• position: static

  따로 설정한게 없다면 기본값이 됨

• position: relative

  원래 위치한 자리를 기준으로 포지셔닝된다.

• position: absolute

  담겨있는 Box를 기준으로 표지셔닝된다.

• position: fixed

  담겨있는 Box를 벗어나 페이지를 기준으로 포지셔닝된다.

•   position: sticky

  스크롤링되어도 원래 있는 자리에 그대로 붙어있는다.

  참고
  https://developer.mozilla.org/en-US/docs/Web/CSS/display
  https://developer.mozilla.org/en-US/docs/Web/CSS/position