[CSS] display 속성(none / block / inline / inline-block)

display 속성 종류

1. none

2. block

3. inline

4. inline-block

1. display : none

display 속성을 none으로 설정하면, 태그 자체가 보이지 않게 된다. visibility 속성을 hidden 으로 설정한 것과는 달리, 영역 자체를 차지하지 않는다.

2. block

width는 기본적으로 화면의 100% 전부를 차지하며, width와 height 속성을 지정할 수 있다.

ex) <div>, <p>

3. inline

block 태그와 달리 width는 기본적으로 화면의 100% 전부를 차지하지 않으며, width와 height 속성을 지정할 수 없다.

ex) <span>

4. inline-block

block과 inline의 중간 형태이다. width는 기본적으로 화면의 100% 전부를 차지하지 않지만, width와 height 속성을 지정할 수 있다.

실습

<div class="none">none</div>
<div class="block1">block1</div>
<div class="block2">block2</div>
<span class="inline">inline</span>
<span class="inline-block">inline-block</span>

body {
  background-color: gray;
}
div, span{
  background-color: white;
  margin: 5px;
  padding: 5px;
  font-size: 20px;
}
.none{ display: none }
.block1{ display: block }
.block2{
  display: block;
  width: 300px;
  height: 60px;
}
.inline{
  display: inline;
  width: 200px;
  height: 60px;
}
.inline-block{
  display: inline-block;
  width: 200px;
  height: 60px;
}

실행 결과

- block1 : 별도의 width나 height를 지정하지 않은 block이다. 기본적으로 100%의 width를 갖는다.

- block2 : width와 height를 지정해준 block이다.

- inline : width와 height를 지정해주었지만, inline이기 때문에 속성이 적용되지 않는다.

- inline-block : width는 기본적으로 화면의 100%를 차지하지 않는 inline의 특징을 지녔지만, width와 height 속성을 설정해줄 수 있는 block의 특징을 지녔다.