Display 속성이란

CSS에서 Display 속성은 요소가 어떻게 "보여지는지" 에 대해서 부여하는 속성입니다.

display 속성의 값은 다양한 유형이 있으며, 각 값은 요소의 표시 방법을 결정합니다. 가장 일반적으로 사용되는 display 속성 값은 다음과 같습니다.

block

요소를 블록 레벨 박스로 표시합니다. 블록 레벨 요소는 한 줄을 독점하며, width, height, margin, padding 등의 속성을 설정하여 공간을 차지할 수 있습니다. 주로 단락 (p태그)이나 제목 (h1태그, h2태그 등)과 같은 요소에 사용됩니다.

inline

요소를 인라인 박스로 표시합니다. 인라인 요소는 콘텐츠의 흐름에 따라 자동으로 줄바꿈되지 않고, 필요한 만큼만 공간을 차지합니다. width, height, margin-top, margin-bottom 등의 속성을 설정할 수 없으며, horizontal padding과 horizontal margin만 사용할 수 있습니다. 주로 텍스트와 같은 내용을 갖는 요소에 사용됩니다.

inline 엘리먼트를 사용할 때 주의할 점은, width와 height 속성을 지정해도 무시된다는 것입니다. 왜냐하면 해당 태그가 마크업하고 있는 컨텐츠의 크기 만큼만 공간을 차지하도록 되어 있기 때문입니다. 또한, margin과 padding 속성은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않습니다.

inline-block

요소를 인라인 레벨의 박스로 표시하되, 블록 레벨 요소처럼 width, height, margin 등의 속성을 설정할 수 있게 합니다. 인라인 레벨 요소와 마찬가지로 흐름에 따라 줄바꿈되지 않고, 필요한 만큼 공간을 차지합니다. 주로 버튼, 이미지와 같이 텍스트와 함께 공간을 차지해야 하는 요소에 사용됩니다.

즉 인라인 형태와 같게 배치는 되지만, width height, margin 등의 속성을 사용하여 그 크기와 형태를 block 속성과 동일하게 사용할 수 있습니다.

none

요소를 보이지 않게 합니다. 해당 요소와 그 자식 요소들은 화면에 나타나지 않습니다. Display :none 속성은 Dom tree 에서도 제거가 되기 때문에, JS 를 통해서 Dom tree를 제어하는 경우 유용하게 사용할 수 있습니다.

이외에도 flex, grid, table 등 다양한 display 속성 값이 있으며, 다음 속성은 다른 글에서 소개하도록 하겠습니다.