[CSS] display 속성 none, inline, block, inline-block 개념과 차이

display 속성

display 속성은 요소를 어떻게 보여줄지를 결정합니다.

none, inline, block, inline-block 총 4가지 속성값이 있습니다.

아래 예시를 통하여 4가지 속성값의 개념과 차이를 알아보겠습니다.

<div class="box1">BOX 1</div>
<div class="box2">BOX 2</div>
<div class="box3">BOX 3</div>

 

none

• 요소를 숨김처리 합니다.
• visibility 속성을 hidden으로 설정한 것과 달리 공간을 차지 않고 숨김처리합니다.

See the Pen css - display : none by saladent (@saladent) on CodePen.

 

inline

• 새 라인에서 시작하지 않고 내용만큼 너비를 차지합니다.
• 너비와 높이를 설정하려고 해도 효과가 없습니다.

See the Pen css - display : inline by saladent (@saladent) on CodePen.

 

block

• 새 라인에서 시작하며 사용 가능한 전체 너비를 차지합니다.
• 상위 요소의 전체 너비를 차지합니다.

See the Pen css - display : block by saladent (@saladent) on CodePen.

 

inline-block

• 새줄에서 시작하지 않고 내용만큼 너비를 차지합니다.
• inline과 달리 높이와 너비 값을 설정할 수 있습니다.

See the Pen css - display : inline-block by saladent (@saladent) on CodePen.