6. Display

display 속성

• HTML 요소마다 기본적으로 갖고 있는 display 속성 값을 어떻게 표시할지를 결정합니다.
• display: block 이면 Block 레벨 영역이며, display: inline 일 경우 Inline 레벨 영역 입니다.
• display 속성은 주로 4가지가 있습니다.

 

 

display 속성 값

 

none

• 요소를 보이지 않게 설정합니다. 영역도 차지하지 않습니다.

 

block

• 기본적으로 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보입니다.
• width, height 속성을 지정 할 수 있습니다.

 

inline

• 컨텐츠만큼 영역을 차지합니다.
• block 과 달리 줄 바꿈이 되지 않고, width와 height를 지정 할 수 없습니다.

 

inline-block

• block과 inline의 중간 형태로 요소는 inline인데 내부는 block처럼 표시합니다.
• inline 처럼 영역을 가로로 배치하지만 width, height 속성을 지정 할 수 있습니다.

 

 

---

실습

<!-- HTML -->
<h3>display none</h3>
<div class="none"></div>
<hr>
<h3>display block</h3>
<span class="block">content</span><span class="block">content</span>
<hr>
<h3>display inline</h3>
<div class="inline">content</div>
<div class="inline">content</div>
<hr>
<h3>display inline-block</h3>
<span class="inline-block">content</span>
<span class="inline-block">content</span>
<span class="inline-block">content</span>

/* CSS */
div, span {
  background-color: gray;
  border: 1px solid black;
  margin: 10px;
  width: 100px;
  height: 100px;
}

div.none {
  display: none;
}

span.block {
  display: block;
}

div.inline {
  display: inline;
}

span.inline-block {
  display: inline-block;
}