CSS display - block, inline-block, inline 이해하기

블록 레벨 요소와 인라인 레벨 요소

CSS에서 display 속성은 웹페이지에서 요소들이 어떻게 보여지고 다른 요소와 어떻게 상호 배치되는지를 결정한다. 이를 이해하기 위해서 우선 블록 레벨 요소가 무엇인지, 인라인 레벨 요소가 무엇인지 살펴본다.

 

 

블록 레벨(block-level) 요소

태그를 사용해 요소를 삽입했을 때 혼자서 한줄(width 100%)을 차지하는 요소이다. 해당 요소의 좌, 우측에는 다른 요소가 올 수 없으며 새로운 라인을 추가한다. 너비, 마진, 패딩 등을 이용하여 크기나 위치를 지정하려면 블록 레벨 요소여야 한다.

 

블록 레벨의 대표적인 태그로는 <div>, <p>, <h1~h6>, <ul>, <ol>, <blockquote>, <form>, <hr>, <table>, <fieldset>, <address> 등이 있다.

 

<div> 태그로 만든 박스

 

 

인라인 레벨(inline-level) 요소

블록 레벨 요소와 달리 줄을 차지하지 않으며 화면에 표시되는 콘텐츠만큼만 영역을 차지하고 라인이 새로 잡히지 않아서 나머지 공간에는 다른 요소가 올 수 있다. 즉, 한 줄에 여러 개의 인라인 요소를 표시할 수 있다.

 

하지만 블록 레벨 요소와는 달리 width, height를 명시할 수 없어서 아래 사진을 보면 높이 50px이 적용되지 않아서 배경 높이가 다름을 확인할 수 있다. padding은 left, right로는 공간과 시각적인 부분 모두 차지하지만, top, bottom으로는 시각만 차지하고 공간을 차지하지는 않는다. margin 또한 top, bottom으로는 적용되고 있지 않음을 확인할 수 있다. 이러한 문제는 다음에 나올 inline-block을 통해서 해결이 가능하다.

 

인라인 레벨의 대표적인 태그로는 <img>, <object>, <br>, <sub>, <span>, <input>, <textarea>, <label>, <button> 등이 있다.

 

 

 

inline-block

블록 레벨 요소의 특징과 인라인 레벨 요소의 특징을 합쳤다. 콘텐츠 만큼 영역을 차지하며, 너비, 마진, 패딩등을 적용할 수 있고, 줄바꿈이 일어나지 않는다. 인라인 요소에서 이상하게 적용되었던 패딩과 마진 박스에 display: inline-block 값을 부여해보면 아래와 같은 모양이 나온다.