4/14(화) HTML, CSS 기초(2)

허경수·2026년 4월 14일

CSS block display html inline block

프론트엔드

목록 보기

2/29

📝 레이아웃의 기초, display: block과 inline-block 완벽 정리

웹 페이지의 레이아웃을 결정하는 가장 핵심적인 속성인 display의 두 가지 성질을 비교 분석합니다.

1. display: block

대부분의 구조 태그가 기본적으로 가지는 속성으로, 화면의 가로 전체를 차지하려는 성질이 있습니다.

너비 (Width): 별도로 지정하지 않으면, 부모 요소의 너비를 가득 채우며 최대한 늘어납니다. ↔️
높이 (Height): 별도로 지정하지 않으면, 내부 콘텐츠의 높이만큼 최소한으로 줄어듭니다. ↕️
흐름: 한 줄을 무!조!건 혼자 점유하며, 다음 요소는 자동으로 다음 줄에 배치됩니다. (세로 정렬 ⬇️)
기본값인 태그: div, section, nav, article, p, h1~h6 등

2. display: inline-block

텍스트처럼 흐르면서도(inline), 크기 설정이 가능한(block) 두 가지 특징을 모두 가진 속성입니다.

너비 (Width): 별도로 지정하지 않으면, 내부 콘텐츠의 너비만큼 최소한으로 줄어듭니다. 🤏
높이 (Height): 별도로 지정하지 않으면, 내부 콘텐츠의 높이만큼 최소한으로 줄어듭니다. 🤏
흐름: 가로 공간이 허용하는 한, 한 줄에 여러 요소가 나란히 배치됩니다. (가로 정렬 ➡️)

3. 📊 요약 및 비교표

특성	block, flex	inline-block, inline, inline-flex
기본 너비	부모 너비의 100% (최대)	콘텐츠의 너비 (최소)
기본 높이	콘텐츠의 높이 (최소)	콘텐츠의 높이 (최소)
배치 방향	세로 방향 (한 줄 점유)	가로 방향 (나란히 배치)
크기 지정	`width`, `height` 가능 ✅	`width`, `height` 가능 ✅
정렬	부모의 text-align에 의해서 정렬	스스로 margin-left, margin-right를 사용해서 정렬

4. 💻 실습 문제

문제1: section(green 색 막대)과 article(blue 색 막대)을 한 줄에 보이게 해주세요.

💡힌트: section과 article 같은 태그들은 기본값이 block이라 세로로 쌓입니다. 이를 가로로 나란히 보이게 하려면 display 속성을 변경해야 합니다.

정답 코드

📝 HTML 구조

<div></div>
<section></section>
<article></article>

🎨 CSS 스타일링

div, section, article {
  height: 100px;
  background-color: red;
}
section {
  background-color: green;
}
article {
  background-color: blue;
}
section, article {
  width: 100px;
  display: inline-block;
}