display는 HTML 요소들을 어떻게 보여줄지를 결정하는 속성으로, 실제로 정말 많이, 그리고 유용하게 사용하는 속성이며 웹을 개발하기 위해 꼭 알고 있어야 하는 속성 중 하나라고 생각합니다.
display 속성에는 none, block, inline, inline-block 그리고 grid, flex 등의 다양한 값들이 있습니다.
먼저, 화면에 보이는 코드를 통해 block, inline, inline-block, none 의 값을 갖는 div들의 배치를 살펴보겠습니다.
class 이름이 속성값-setting 으로 되어있는 모든 요소들은 오른쪽 코드처럼 CSS 상에서, width 와 height 의 값을 각각 300px, 200px 으로 설정해주겠습니다.
다음과 같은 코드를 실행하면 화면에는 요소들이 다음과 같이 나타납니다.
block
먼저 display block 값을 갖는 요소를 보면, 기본적으로 가로의 길이가 100% 로 설정이 되며, 한 줄의 하나의 div만 배치되는 것을 확인 할 수 있습니다.
block-setting 이라고 적힌 div를 보면, 우리가 설정 했던 길이와 높이의 값이 적용이 되어 표시 되는 것을 알 수 있습니다.
inline
inline 값이 적용된 박스들도 확인을 해보겠습니다.
그림에서 볼 수 있듯이, inline 값은 기본적으로 한 줄에 여러개의 div가 배치되고, 길이와 높이의 값을 설정해놓더라도 inline div 안의 내용에 따라 길이와 높이가 결정되는 것을 볼 수 있습니다.
inline-block
inline-block 은 말 그대로, inline 특징과 block 특징 모두가 적용된 값으로, 기본적으로 한 줄에 여러개의 div가 배치되며, div 안의 내용에 따라 길이와 높이가 결정되지만, inline-block setting 에서 처럼 길이와 높이를 설정하면, 설정한 값으로 크기가 적용이 되는 것을 확인할 수 있습니다.
none
다음으로는 none 에 대해 알아보겠습니다.
코드에는 none 이라는 div 가 있지만, 그림에서는 확인이 되지 않습니다.
display 속성값을 none 으로 주게 되면, 이렇게 그 요소가 존재하지 않았던 것처럼 사라지게 됩니다.
