CSS에서 display 속성은 웹 페이지 레이아웃을 구성하는 데 없어서는 안 될 핵심 속성입니다. 이 속성은 요소가 주변 요소들과 어떤 관계로 배치될지를 결정하며, 어떤 값을 지정하느냐에 따라 화면상의 표현 방식이 크게 달라집니다. display 속성에는 다양한 값이 있지만, 그중에서도 가장 널리 사용되는 값은 inline, block, inline-block입니다. 이번 글에서는 이 세 가지 값의 적용 방법과 각각의 차이점을 자세히 알아보겠습니다.
display 속성 기본 문법
display 속성은 아래와 같은 형식으로 작성합니다.
display: value;
이번 글에서 다룰 세 가지 값을 적용한 문법은 다음과 같습니다.
display: inline;
display: block;
display: inline-block;
inline, block, inline-block의 차이점
inline-block의 동작 방식을 제대로 이해하려면 먼저 인라인 요소와 블록 요소가 각각 어떻게 동작하는지 짚어볼 필요가 있습니다.
1. inline (인라인)
인라인 수준(inline-level) 요소는 줄바꿈 없이 텍스트 흐름 안에서 표시됩니다. 즉, 부모 요소나 바로 앞의 요소와 같은 줄에 나란히 배치되며, 콘텐츠를 표시하는 데 필요한 만큼의 너비만 차지합니다. 따라서 인라인 요소에 임의의 width나 height 속성을 지정해도 해당 속성은 무시됩니다.
기본적으로 인라인으로 표시되는 대표적인 HTML 요소는 다음과 같습니다.
<a>, <abbr>, <b>, <bdo>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <q>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <var> 등
2. block (블록)
블록 수준(block-level) 요소는 항상 새로운 줄에서 시작하며, 별도로 width를 지정하지 않으면 사용 가능한 전체 너비를 차지합니다. 인라인 요소와 달리, 블록 요소에는 width와 height 속성을 자유롭게 지정할 수 있으며 지정한 값이 그대로 적용됩니다.
기본적으로 블록으로 표시되는 대표적인 HTML 요소는 다음과 같습니다.
<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>~<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <p>, <pre>, <section>, <table>, <tfoot>, <ul>, <video> 등
3. inline-block (인라인 블록)
inline-block은 이름 그대로 인라인 요소와 블록 요소의 장점을 모두 갖춘 값입니다. 인라인 요소처럼 줄바꿈 없이 옆으로 나란히 배치되면서도, 블록 요소처럼 width와 height 속성을 자유롭게 설정할 수 있습니다. 여기에 더해 vertical-align 속성으로 세로 정렬까지 조절할 수 있어 활용도가 매우 높습니다.
이러한 특성 덕분에 inline-block은 내비게이션 메뉴, 버튼 목록, 카드형 레이아웃처럼 여러 요소를 가로로 나열하면서 각 요소의 크기를 세밀하게 조정해야 하는 경우에 특히 유용합니다.
마무리
지금까지 CSS display 속성의 세 가지 핵심 값인 inline, block, inline-block의 적용 방법과 각각의 장단점을 살펴보았습니다. 인라인 요소는 크기 지정이 불가능하고, 블록 요소는 항상 줄바꿈된다는 점을 기억하고, 두 방식을 동시에 활용해야 할 때는 inline-block을 선택하면 됩니다. 실제 코드로 세 값을 직접 비교해 가며 연습해 보면 레이아웃 개념이 훨씬 빠르게 익숙해질 것입니다.