[CSS 레이아웃] display 프로퍼티: inline, block, inline-block

웹 페이지의 모든 요소는 사각형 박스 모양을 같습니다. display 프로퍼티를 이용하면 이 박스가 어떻게 보이게 만들지 정할 수 있습니다.

가장 대표적인 세 가지 값과 해당 속성이 적용된 요소의 특징에 대해서 알아보겠습니다.

selector {
  display: inline;
  display: block;
  display: inlin-block;
}

inline element (인라인 요소)

인라인 요소는 컨텐츠의 영역만큼 공간을 차지합니다. <a>, <span>, <img>와 같은 태그들이 해당합니다.

- 컨텐츠의 영역만큼 공간을 차지합니다.

- 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치합니다.

- 상하 padding과 margin을 줄 수 없습니다. 단, 좌우 padding과 margin은 설정할 수 있습니다.

See the Pen display: inline by hogni-seoul (@hogni-seoul) on CodePen.

블록 요소는 가로폭 전체를 차지합니다. <div>, <h1>, ..., <h6>, <p>, <ol>, <ul>, <li>와 같은 태그들이 해당합니다.

- 가로폭 전체를 차지합니다. (width: 100%)

- 항상 새 줄에서 시작합니다.

- 상하좌우 padding과 margin을 줄 수 있습니다.

- width, height 프로퍼티 값을 설정할 수 있습니다.

See the Pen display: block by hogni-seoul (@hogni-seoul) on CodePen.

인라인 블록 요소는 width와 height 값을 설정할 수 있다는 점을 빼면 인라인 요소와 동일합니다.

- 컨텐츠의 영역만큼 공간은 차지합니다.

- 좌우로 다른 인라인, 인라인 블록 요소를 위치시킬 수 있습니다.

- 상하좌우에 padding과 margin을 줄 수 있습니다.

- width, height 프로퍼티 값을 설정할 수 있습니다.