CSS 레이아웃 - display : inline / block / inline-block

display

display 를 직역하면 표시, 보여줌이다.
CSS에서의 display 속성은 해당 요소를 화면에서 어떻게 나타낼지 정하는 속성이다.

이 글에선 display의 개념 중 가장 기본적인 inline, block, inline-block에 대해서 알아본다.

inline

inline속성을 가지는 요소(element)들은 앞뒤의 요소들과 줄바꿈이 일어나지 않고 연속적으로 배치된다.

inline 속성의 또다른 특징은 해당 컨텐츠의 크기만큼 공간을 차지한다는 것이다. 즉, width와 height 속성이 듣지 않는다. 또한 margin, padding 속성에 위, 아래쪽이 작동하지 않는다.

기본적으로 inline속성을 가지고 있는 요소는 대표적으로 <span> 태그가 있으며 이 외에 <a>, <em> 등의 태그가 있다.

<span>
  안녕
</span>
<span>
  위코드
</span>
<span>
  ㅎㅇ
</span>

span {
  width: 400px;
  height: 400px;
  padding-top: 500px;
  margin-left: 30px;
}

block

기본적으로 block속성을 가지고 있는 요소는 대표적으로 <p>, <h1>, <div> 등의 태그가 있다.

줄바꿈이 일어나지 않는 inline 속성과 달리 block 속성을 가지 요소는 앞뒤 요소사이에서 줄바꿈이 일어난다. 또한 width, height 속성을 통해 크기의 조정이 가능하며 margin, padding 역시 정상적으로 동작한다.

<p>
  안녕
</p>
<div>
  위코드
</div>
<h1>
  ㅎㅇ
</h1>

p {
  width: 300px;
  height: 300px;
}

div {
  padding: 40px;
  border: 1px solid black;
}

inline-block

inline-block속성을 지닌 요소는 inline요소와 같이 줄바꿈이 일어나지 않지만 block요소과 같이 크기를 자유롭게 조절하고 margin, padding값 또한 정상적으로 줄 수 있다.

대표적인 inline-block요소는 <button>, <input>등이 있다.

<span>
  안녕
</span>
<span>
  위코드
</span>
<span>
  ㅎㅇ
</span>

span {
  width: 30px;
  height: 30px;
  padding-top: 30px;
  margin-left: 30px;
}