[HTML, CSS] display 속성

CSS에서 display 속성은 HTML 요소가 화면에서 어떻게 표시되는지를 정의하는 속성입니다. HTML의 모든 요소는 display 속성에 디폴트값을 가지고 있는데, 다른 값을 가지도록 지정할 수도 있습니다. display 속성에 가장 자주 사용되는 4가지 값 inline, block, inline-block, none을 알아보도록 하겠습니다. 

 

① display: inline;

display 속성이 inline으로 지정된 요소는 줄바꿈 없이 다른 요소들과 같은 줄에 배치됩니다. inline 요소의 크기는 내용의 크기만큼이기 때문에 width와 height과 같은 속성은 반영되지 않습니다. margin과 padding은 좌우로는 반영되지만, 같은 줄에 배치되기 때문에 상하로는 반영되지 않습니다. 

(<span>, <a>, <img> 요소들은 디폴트값이 inline으로 지정된 태그의 대표적인 예시입니다.)

 

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Inline 1

Inline 2

Inline 3

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

display: inline;

 

② display: block;

display 속성이 block으로 지정된 요소는 앞뒤로 줄바꿈이 되어 다른 요소들과는 다른 줄에 배치됩니다. inline 요소와는 달리 block 요소는 margin, padding 뿐만이 아니라 width와 height 속성들도 반영이 됩니다. 

(<div>, <h1>, <p>, <ul>, <ol>, <form> 요소들은 디폴트값이 block으로 지정된 태그의 대표적인 예시입니다.)

 

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Block 1

Block 2

Block 3

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

display: block;

 

③ display: inline-block;

display 속성이 inline-block으로 지정된 요소는 inline 요소처럼 줄바꿈이 되지 않지만, block 요소처럼 크기(width & height)를 지정할 수 있습니다. 외부적으로는 inline 요소이나, 내부적으로는 block 요소인 것입니다. 

웹사이트의 메뉴 바나 네비게이션 바를 만들 때 사용할 수 있습니다. 

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Inline-Block 1

Inline-Block 3

Inline-Block 2

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

display: inline-block;

 

④ HTML 요소 숨기기

앞서 설명드린 3가지 방법은 HTML 요소들이 어떻게 보이는지를 정의하는 방법이라면, 화면에서 보이지 않게 하는 방법도 존재합니다. 계속 사용한 display 속성값을 none으로 지정하거나, 새로운 속성 visibility의 값을 hidden으로 지정하는 것입니다.

두 가지 방법 모두 요소를 숨기게 하지만, 미세한 차이점이 있습니다. display: none;인 경우, 요소가 차지하는 공간 자체가 없어지게 됩니다. 그런대 visibility:none;인 경우, 요소만 보이지 않을 뿐 요소가 차지하는 공간 자체는 남아있게 됩니다.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

display: none;

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

display: none;

 

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

visibility: hidden;

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

visibility: hidden;