[CSS] display: block / inline / inline-block / none

CSS에서 display 속성은 요소를 어떻게 보여줄지 결정합니다. block 요소와 inline 요소의 특징에 따른 영역이 다른데, 이런 요소의 성격을 display를 이용하면 상황에 따라 블록 요소를 인라인 요소로, 인라인 요소를 블록 요소로 변환하여 사용할 수 있습니다. 이 속성 값에는 크게 4가지 값이 있습니다.

 

• block 
• inline
• inline-block
• none

 

display: block; /* 해당 요소를 블록 요소로 지정 */

div, p, h1-6, li, form 태그 등이 해당합니다.

 

대표적인 block 요소인 div가 갖게되는 기본값입니다. 기본적으로 width가 컨테이너의 100%가 되게 합니다. 수평 영역을 모두 채우며 width, height 속성을 지정할 수 있습니다.

 

 

display: inline;  /* 해당 요소를 인라인 요소로 지정 */

span, a, b, i 태그 등이 해당합니다.

 

block의 특징과는 달리 줄바꿈이 자동으로 되지 않고 width, height 값을 지정할 수 없습니다.

 

 

display: inline-block;  /* 해당 요소를 인라인 블록 요소로 지정 */

요소 자체는 inline 요소처럼 동작합니다. 줄바꿈이 자동으로 되지 않습니다.

요소 내부에서는 블록 요소로 동작하는데, 크기나 여백을 block 요소처럼 지정할 수 있게 됩니다.

 

인라인 요소로 지정하면 한 줄로 배치할 수 있지만 넓이와 높이, 마진과 같은 정확한 값이 필요한 경우에는 적용하기 어렵습니다. 이런 경우 인라인 블록 요소로 지정한다면, 해당 요소로 가로로 쉽게 배치할 수 있으며 각 요소에 포함되어 있는 내용은 정확한 수치를 지정할 수 있습니다. 두 가지 특성이 모두 필요할 때 자주 사용합니다.

 

 

display: none;  /* 화면에서 요소와 공간을 모두 표시하지 않음 */

화면에서 사라지게 합니다. 크기도 없습니다.

참고로 visibility: hidden 속성을 이용하여 요소를 숨기게 할 수 있는데, 이와 달리 영역도 차지하지 않습니다. 요소가 차지하던 공간도 함께 사라지게 됩니다.

 

예문을 통해 살펴보겠습니다.

기본적으로 div 태그를 이용하였습니다.

 

HTML, CSS 코드

결과