display 속성

요소를 block과 inline 요소 중 어느 쪽으로 처리할지와 함께, 레이아웃을 구현할 수 있도록 해주는 중요한 속성 입니다.

display속성은 크게 속성을 부여한 요소 자신에 적용되는것, 자식 요소들에게 적용되는 것 두 가지로 구분할 수 있습니다.
자신에게 적용되는 것은 외부 디스플레이 타입(Outer Display Type),
자식 요소들의 레이아웃에 적용되는 내부 디스플레이 타입(Inner Display Type) 이라고 합니다.
default 값은 요소에 따라 inline 또는 block 입니다.

여러 속성이 있지만 아래 목록의 속성만 알아보도록 하겠습니다.

• 외부 디스플레이 타입

  • inline
  • block
  • inline-block

• 내부 디스플레이 타입

  • flex
  • grid
  • table

---

display: none

요소가 보이지 않게되며, 레이아웃의 자리도 차지하지 않게 됩니다.
사용자에게 보이지 않을 뿐더러 액션도 받을 수 없기 때문에 액션에 따른 이벤트도 발생시키지 않습니다.

visibility:none은 보이지만 않고 자리를 차지합니다.

---

display: inline

요소가 inline요소가 되도록 합니다.
display: inline를 기본값으로 가지는 요소는 <span>, <b>, <i>, <a> 등이 있습니다.

포함한 내용만큼만 가로/세로 크기를 차지합니다.
줄 바꿈이 되지않고 좌에서 우로 수평으로 쌓여갑니다.

width, height 가로/세로 크기 지정이 불가능합니다.
margin, padding 내/외부 여백은 좌우 간격만 반영이 되고 상하 간격은 반영이 되지 않습니다.

---

display: block

요소가 block 요소가 되도록 합니다.
display: block를 기본값으로 가지는 요소는 <div>, <p>, <h1~6> 등이 있습니다.

기본적으로 자신의 위치에서 가질 수 있는 가로영역을 최대한 채우며 포함한 내용만큼만 높이를 자동으로 줄이려 합니다.
항상 줄 바꿈이 되어 수직으로 쌓여갑니다.

width, height 가로/세로 크기 지정이 가능합니다.
margin, padding 내/외부 여백 지정이 가능합니다.

---

display: inline-block

요소에 inline 속성과 block 속성의 특성을 모두 가지고 있습니다.
inline 요소 처럼 줄 바꿈이 이루어지지 않고 수평으로 쌓여가지만 block 요소 처럼 크기 지정과 내/외부 여백 지정이 가능합니다.

---

display: flex

포함하고 있는 자식 요소들를 가로 또는 세로 한 축으로 정렬/배치 하기위해 사용하는 속성으로
레이아웃을 구성하는데 활용도가 높은 속성입니다.

자세한 내용은 별도의 게시물에 작성하겠습니다.
display: flex - 작성중

---

display: grid

포함하고 있는 자식 요소들을 격자형 그리드에 구성할 수 있도록 해주는 속성입니다.

자세한 내용은 별도의 게시물에 작성하겠습니다.
display: grid - 작성중

---

display: table

HTML의 <table> 태그와 유사한 레이아웃을 css로 구현할 수 있게 해주는 속성입니다.

모던 웹에 적합하지 않은 <table>를 대신해 테이블 구조를 구현하는데 사용되며 반응형으로 행과 열 구조를 변경할 수 있습니다.

기본적으로 block 속성을 가지며 자식 요소에 하위 속성인 table-row, table-column, table-cell를 적용해 테이블 구조를 만들 수 있습니다.

---