📚 마음대로 배치되지 않는다고? CSS의 Display 속성으로 해결해보자!
웹 페이지를 디자인하다보면 내 마음대로 되지 않을 때가 참 많다. 그 때마다 내 속을 가장 많이 썩인 것이 바로 Display 속성이다.
CSS에서 display 속성은 웹페이지 상에서 Element들이 어떻게 보여지고 다른 Element와 어떻게 상호 배치되는지를 결정한다.
이번 글을 통해 CSS의 기본 display 속성인 블록(Block), 인라인(Inline), 인라인 블록(Inline-block)의 차이점을 이해하고 적절히 활용하는 방법에 대해 알아보자.
CSS Display 속성
📌 블록 (Block)
블록 요소는 위에서 아래로 차례대로 배치되며, 좌우로 꽉 차는 특성을 가지고 있다. 크기를 지정할 수 있어 매우 유연합니다. 일반적으로 <div>, <p>, <h1>부터 <h6>까지의 제목 태그들이 이에 해당한다.
<div>여기는 블록 요소입니다.</div>
<p>블록 요소는 좌우로 꽉 차는 특징이 있습니다.</p>
📌 인라인 (Inline)
인라인 요소는 글 쓰는 방향(가로 방향)으로 배치되며, 블록과 달리 너비와 높이를 지정할 수 없다. 대표적으로 <a>, <span>, <img>, <br> 태그가 이에 해당한다.
cf> 이미지처럼 외부 데이터를 보여 주는 태그는 인라인이지만 크기를 지정할 수 있는 예외가 있다.
<a href="#">인라인 요소입니다.</a>
<span>인라인 요소는 크기를 지정할 수 없습니다.</span>
📌 인라인 블록 (Inline-block)
인라인 블록은 인라인처럼 글 쓰는 방향으로 배치되지만, 블록처럼 크기를 지정할 수 있다. 이는 요소를 가로로 나란히 배치할 때 유용하게 사용된다.
<span style="display: inline-block; height: 100px;">인라인 블록</span>
<span style="display: inline-block; height: 100px;">요소</span>
📌 블록 vs 인라인 블록 vs 인라인
| 속성 | 블록 | 인라인 블록 | 인라인 |
|---|---|---|---|
| 기본 크기 | 좌우로 꽉 참 | 콘텐트에 딱 맞게 | 콘텐트에 딱 맞게 |
| 배치 | 위에서 아래로 | 글 쓰는 방향 | 글 쓰는 방향 |
| width와 height | 가능 | 가능 | 불가능 |
| margin과 padding | 가능 | 가능 | 가로 방향만 가능 |
📌 float 속성
float 속성은 요소를 페이지 왼쪽이나 오른쪽에 배치하고, 그 주변으로 인라인 요소들을 배치할 수 있게 해준다. 이 속성은 레이아웃의 특정 부분을 강조하거나 삽화처럼 배치할 때 유용하다.
.float-left {
float: left;
}
.float-right {
float: right;
}Outro
이번 글을 통해 블록, 인라인, 인라인 블록의 차이점을 알아보았다. Display 속성에 대한 이해를 바탕으로 웹 페이지를 내가 원하는 의도대로 디자인 해나가보자.
