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

2057 단어 CSSCSS

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

display

  • display:inline
    컨텐츠 자체만을 꾸민다. ( 컨텐츠 크기에 맞춰 변경되므로 dispaly가 inline으로 설정된경우, css파일에서 width와 height으로 아무리 크기를 설정해도 이를 무시하고, 컨텐츠 크기 자체가 기준이된다.)
  • display: inline-block
    공간이 있다면 한줄에 여러 아이템이 배치된다.
    inline과 달리 컨텐츠가 없어도 설정한 width와 height이 있으면 이를 기준으로 스타일링이 적용된다.
  • display:block
    (아이템 옆에 공간이 있더라도) 한줄에 하나씩 배치된다.

position

좋은 웹페이지 즐겨찾기