display

display

display속성에는 inline, block, inline-block, flex, list-item 등 여러가지들이 있다.

• inline display

  • 다른 요소들과 같은 줄에 머무르려고 하는 성향.
  • 가로길이는 필요한 만큼만 차지하는 성향.
  • 가로세로 길이 개념 없음.
  • 텍스트(글자)처럼 다룰 수 있음.
  • 예시로는 span태그, i태그, b태그, img태그 등이 있음.
  • img태그는 대체요소(replaced element)라고 불리는 가로,세로 길이를 설정할 수 있는 특별한 inline 요소임.

• block display

  • 새로운 줄에 가려고 하는 성향.
  • 가로 길이를 최대한 많이 차지하려는 성향.
  • 가로, 세로 길이 설정가능.
  • 예시로는 div태그, h1태그, p태그 등이 있음.

• inline-block display

  • inline 요소처럼 다른 요소들과 같은 줄에 머무르면서 block 요소처럼 가로, 세로 길이도 설정해주고 싶을 때 사용
  • 텍스트(글자)처럼 다룰 수 있음.
  • display 설정을 직접해야만 사용가능