HTML - Box 모델 (블록박스, 인라인박스) 웹디자인 기본 개념

2025. 3. 20. 11:52

웹 페이지를 만들 때, 콘텐츠를 어떻게 배치하고 스타일링할지 결정하는 것은 매우 중요합니다. 이때 인라인 박스와 블록 박스라는 개념을 이해하는 것이 핵심입니다. 이 글에서는 이 두 가지 박스 모델의 차이점을 쉽게 설명하고, 예시 코드를 통해 실제로 어떻게 사용되는지 알아보겠습니다.

블록박스, 인라인박스 기본 개념

블록박스, 인라인박스 기본 개념

1. 블록 박스(Block Box)란?

2. 인라인 박스(Inline Box)란?

3. 블록 박스와 인라인 박스의 차이점

4. 예시 HTML 코드

5. 결론

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

블록 박스(Block Box)란?

블록 박스는 웹 페이지에서 전체 너비를 차지하는 박스입니다. 이 박스는 기본적으로 줄 바꿈이 되며, 다른 요소들과 수직으로 쌓이는 특징이 있습니다. 블록 박스는 <div>, <p>, <h1>~<h6>, <ul>, <li> 등이 대표적입니다.

블록 박스의 특징

줄 바꿈: 블록 박스는 항상 새로운 줄에서 시작합니다.
너비와 높이: 너비(width)와 높이(height)를 지정할 수 있습니다.
패딩, 테두리, 마진: 상하좌우 모든 방향에 패딩, 테두리, 마진을 적용할 수 있습니다.
배경색: 배경색을 지정하면 콘텐츠 영역과 패딩 영역에 적용됩니다.

블록 박스 예시

<div style="width: 300px; padding: 20px; border: 5px solid black; margin: 30px; background-color: lightblue;">
    이 박스는 블록 레벨 박스입니다. 전체 너비를 차지하며, 줄 바꿈이 됩니다.
</div>

인라인 박스(Inline Box)란?

인라인 박스는 콘텐츠 크기만큼만 공간을 차지하는 박스입니다. 줄 바꿈 없이 한 줄 안에 여러 개의 인라인 박스가 들어갈 수 있습니다. 인라인 박스는 <span>, <a>, <em>, <strong> 등이 대표적입니다.

인라인 박스의 특징

줄 바꿈 없음: 인라인 박스는 줄 바꿈 없이 한 줄 안에 배치됩니다.
너비와 높이: 너비와 높이를 지정할 수 없습니다. 콘텐츠 크기에 따라 자동으로 조정됩니다.
패딩과 마진: 좌우 패딩과 마진만 적용됩니다. 상하 패딩과 마진은 적용되지 않습니다.
배경색: 배경색을 지정하면 콘텐츠 영역과 좌우 패딩 영역에 적용됩니다.

인라인 박스 예시

<p>
    이 문장 안에 <span style="padding: 10px; border: 2px solid red; margin: 5px; background-color: lightyellow;">인라인 박스</span>가 있습니다. 줄 바꿈 없이 한 줄 안에 들어갑니다.
</p>

블록 박스와 인라인 박스의 차이점

특징	블록 박스	인라인 박스
줄 바꿈	항생 새로운 줄에서 시작	줄 바꿈 없이 한 줄 안에 배치
너비와 높이	지정 가능	지정 불가능
패딩, 테두리, 마진	상하좌우 모두 적용	좌우만 적용
배경색	콘텐츠와 패딩 영역에 적용	콘텐츠와 좌우 패딩 영역에 적용

예시 HTML 코드

아래는 블록 박스와 인라인 박스를 함께 사용한 예시 코드입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="인라인 박스와 블록 박스의 차이점을 쉽게 이해할 수 있는 예시입니다.">
    <title>인라인 박스 vs 블록 박스</title>
    <style>
        /* 블록 박스 스타일 */
        .block-box {
            width: 300px; /* 박스 너비 */
            padding: 20px; /* 콘텐츠와 테두리 사이의 공간 */
            border: 5px solid black; /* 테두리 */
            margin: 30px; /* 박스 바깥의 공간 */
            background-color: lightblue; /* 배경색 */
        }

        /* 인라인 박스 스타일 */
        .inline-box {
            padding: 10px; /* 좌우 패딩 */
            border: 2px solid red; /* 테두리 */
            margin: 5px; /* 좌우 마진 */
            background-color: lightyellow; /* 배경색 */
        }
    </style>
</head>
<body>
    <h1>인라인 박스와 블록 박스의 차이점</h1>
    
    <!-- 블록 박스 예시 -->
    <div class="block-box">
        이 박스는 블록 레벨 박스입니다. 전체 너비를 차지하며, 줄 바꿈이 됩니다.
    </div>

    <!-- 인라인 박스 예시 -->
    <p>
        이 문장 안에 <span class="inline-box">인라인 박스</span>가 있습니다. 줄 바꿈 없이 한 줄 안에 들어갑니다.
    </p>

    <!-- 추가 설명 -->
    <p>
        블록 박스는 전체 너비를 차지하고, 인라인 박스는 콘텐츠 크기만큼만 차지합니다. 인라인 박스는 줄 바꿈 없이 한 줄 안에 여러 개가 들어갈 수 있습니다.
    </p>
</body>
</html>

결론

인라인 박스와 블록 박스는 웹 디자인의 기본 개념입니다. 블록 박스는 전체 너비를 차지하며 줄 바꿈이 되고, 인라인 박스는 콘텐츠 크기만큼만 공간을 차지하며 줄 바꿈 없이 배치됩니다. 이 두 가지 박스 모델을 잘 이해하면 웹 페이지를 더 효과적으로 디자인할 수 있습니다.

저작자표시 비영리 변경금지

'web 언어 > HTML5 & CSS & Javascript' 카테고리의 다른 글

CSS - 단위 : 길이와 폰트 크기를 이해하자 (in, cm, mm, pt, pc, em, ex, px) (0)	2025.03.20
HTML - display(인라인, 인라인블록, 블록) 개념 이해하기 (0)	2025.03.20
CSS - 스타일이 잘 안 먹힐 때 구체성 때문이다 (0)	2025.03.19
CSS - 속성 선택자(Selector) 7가지 사용방법 (0)	2025.03.19
CSS - 선택자(Selector) 결합하여 사용하는 방법 (0)	2025.03.18

열공의 기록