[CSS] CSS Display

HTML 구조에 존재하는 내용물들에는 각각 표현되는 고유의 영역이 있습니다.

예를 들어 h2 태그를 생성하게 되었으면 특정한 처리를 하지 않는 이상 기본적으로 h2 태그 만의 display(표현) 영역이 존재하는 것입니다.

CSS에는 이러한 display 영역을 다른 내용들이 침범하지 않도록 막거나 같이 공유하거나 하는 설정을 해줄 수 있습니다. 

여러 설정들이 있지만 대표적인 세 가지 설정들에 대해서 알아보겠습니다.

 

 

display: inline;

<h2>Harry</h2>
<h2>Potter</h2>

h2{
   display: inline;
}

 

display: inline 은 같은 라인에 내용이 같이 보여질 수 있도록 하는 CSS 설정입니다.

각각 h2 태그가 원래는 따로 개행되어 나뉘어 보이지만 inline 설정값을 통해 같은 라인에 내용이 보여지게 됩니다.

display는 기본적으로 보여지는 내용이 있는 투명한 블록영역을 말합니다.

inline 설정은 한 블록영역에 다른 내용들도 같이 올라와서 보여지게끔 합니다.

대신에 이 display의 너비와 높이를 수동으로 조절할 수 없습니다. 

넣어진 내용들의 길이에 따라 자동으로 너비와 높이가 결정됩니다.

 

inline

 

 

 

display: block;

<h2>Harry</h2>
<h2>Potter</h2>

h2{
   display: block;
}

display:block 은 특정 display 블록 영역을 막아버려 inline 처럼 다른 내용들이 같은 라인에 보여지지 않게끔 막는 설정입니다.

inline 과는 다르게 display 영역의 너비와 높이를 수동으로 조절할 수 있습니다.

 

block

 

 

display: inline-block;

<h2>Harry</h2>
<h2>Potter</h2>

h2{
   display: inline-block;
}

display: inline-block 은 inline과 block을 합친 설정입니다.

inline의 다른 내용이 같은 라인에 올라와 같은 display 영역을 공유하게 되는 특성과 block의 display 영역을 막아버려 지정하지 않은 다른 내용들이 영역을 공유하지 못하도록 막는 특성을 가지고 있습니다.

또한, block의 특성인 너비와 높이도 조절할 수 있습니다.

 

inline-block