[CSS] display

display 속성

요소를 화면에 어떻게 드러나게 할지를 결정하는 속성이다. 

 

display 속성

display: none | block | inline | inline-block

 

알고 넘어가자! 

요소 (즉 태그)는 inline 요소와 block 요소로 나뉜다.

inline: 줄 속에 넣는 요소이며, <b>, <span>, <a>등 특정 문자열을 선택할 때 사용하는 태그가 그 예이다.

특징: 줄 바꿈이 되지 않는다.

 

block: 좀 더 넓은 범위를 지정할 때 사용하는 <p> <h1> <div> <ul> <ol> 같은 태그로 block 요소를 사용할 때는 가로 화면 100%를 차지하기 때문에 자동으로 앞뒤 줄 바꿈이 된다.

특징: 줄 바꿈이 있다.

 

 

See the Pen Untitled by heerachoi (@heerachoi) on CodePen.

 

display: none;

화면에서 사라진다.  visibility: hidden 도 화면에서 사라지게 하지만 다른 점은  display: none 은 영역을 차지하지 않는다.

 

예제

아래 코드를 부면  display: none 으로 설정된 1의 경우 보이지도 않고 영역 차지도 하지 않는다.

반면  visibility:hidden 으로 설정된 3의 경우 보이지는 않지만 영역을 차지하고 있다. 

 

See the Pen Untitled by heerachoi (@heerachoi) on CodePen.

 

display: block;

기본적으로 <div>가 갖게 되는 기본값이다. (태그에 따라 기본값이 다를 수 있다.)

가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄 바꿈이 된 것처럼 보인다.

width, height 속성을 지정할 수 있으며, block 요소 뒤에 등장하는 태그가 그 이전 block 요소의 오른쪽에 배치될 수 있어도 항상 다음 줄에 렌더링 된다. 

 

display: inline;

콘텐츠를 딱 감쌀 정도의 크기만 갖는다. block 태그와 다르게 줄 바꿈이 되지 않고 크기를 변화시킬 수 없다.

예제에서 inline_div에 500px을 설정해주었지만 여전히 글의 길이만큼의 넓이만 차지하고 있다.

 

display: inline-block;

inline과 block의 특성을 합쳐놓은 속성이다. 기본적으로는 inline의 속성을 지니고 있지만, 임의로 크기를 바꿔줄 수 있다.

 

 

Reference

https://developer.mozilla.org/en-US/docs/Web/CSS/display