Post

CSS) Display 속성_ block, inline-block, inline의 차이

Posted Updated
Preview Image
By parksohyunnn 6 min read

CSS Display 속성: block, inline-block, inline의 차이

웹 페이지를 디자인할 때 CSS의 display 속성은 요소의 배치와 레이아웃을 제어하는 데 중요한 역할을 합니다. display 속성은 다양한 값을 가질 수 있지만, 그 중에서도 가장 많이 사용되는 값은 block, inline-block, inline입니다. 이번 블로그 글에서는 이 세 가지 값의 차이와 사용법을 예시와 함께 알아보겠습니다.

display: block

display: block은 요소를 블록 레벨 요소로 설정합니다. 블록 레벨 요소는 다음과 같은 특징을 가집니다:

  • 새 줄에서 시작: 블록 요소는 항상 새 줄에서 시작하며, 이전 요소와 다음 요소 사이에 줄바꿈을 만듭니다.
  • 전체 너비 차지: 기본적으로 블록 요소는 부모 요소의 전체 너비를 차지합니다.
  • 높이와 너비 설정 가능: 블록 요소는 width와 height 속성을 통해 크기를 지정할 수 있습니다. 대표적인 블록 요소로는 <div>, <h1>, <p> 등이 있습니다. 예를 들어:
1
2
3

<div style="display: block; background-color: lightblue;">
  This is a block-level element.
</div>

display: inline

display: inline은 요소를 인라인 레벨 요소로 설정합니다. 인라인 레벨 요소는 다음과 같은 특징을 가집니다:

  • 연속으로 배치: 인라인 요소는 줄 바꿈 없이 연속으로 배치됩니다.
  • 콘텐츠 너비만 차지: 인라인 요소는 콘텐츠의 너비만큼만 차지합니다.
  • 높이와 너비 설정 불가: 인라인 요소는 width와 height 속성을 사용할 수 없습니다. 대표적인 인라인 요소로는 <span>, <a>, <em> 등이 있습니다. 예를 들어:
1
2
3

<span style="display: inline; background-color: lightgreen;">
  This is an inline element.
</span>

display: inline-block

display: inline-block은 블록 레벨 요소와 인라인 레벨 요소의 장점을 결합한 것입니다. 인라인 블록 요소는 다음과 같은 특징을 가집니다:

  • 연속으로 배치: 인라인 블록 요소는 줄 바꿈 없이 다른 요소들과 연속으로 배치됩니다.
  • 크기 설정 가능: 인라인 블록 요소는 width와 height 속성을 사용할 수 있습니다.
  • 블록 요소의 레이아웃 특성: 블록 요소처럼 크기를 지정할 수 있으며, 내부의 인라인 요소처럼 다른 요소와 한 줄에 배치됩니다. 예를 들어:
1
2
3

<div style="display: inline-block; width: 100px; height: 100px; background-color: lightcoral;">
  This is an inline-block element.
</div>

실제 예시로 비교해보기

세 가지 display 속성의 차이를 명확하게 이해하기 위해, 동일한 내용의 요소를 각각 block, inline, inline-block으로 설정한 예시를 살펴보겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display Property Example</title>
    <style>
        .block {
            display: block;
            background-color: lightblue;
            margin-bottom: 10px;
        }
        .inline {
            display: inline;
            background-color: lightgreen;
            margin-right: 10px;
        }
        .inline-block {
            display: inline-block;
            width: 150px;
            height: 50px;
            background-color: lightcoral;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="block">Block Element 1</div>
    <div class="block">Block Element 2</div>
    <span class="inline">Inline Element 1</span>
    <span class="inline">Inline Element 2</span>
    <div class="inline-block">Inline-Block Element 1</div>
    <div class="inline-block">Inline-Block Element 2</div>
</body>
</html>

이 예제를 브라우저에서 보면, block 요소는 각각 새 줄에서 시작하며 전체 너비를 차지하는 반면, inline 요소는 한 줄에 연속으로 배치되어 콘텐츠의 너비만 차지하는 것을 알 수 있습니다. inline-block 요소는 다른 인라인 요소와 한 줄에 배치되지만, 블록 요소처럼 크기를 지정할 수 있습니다.

결론

CSS의 display 속성은 웹 페이지의 레이아웃을 결정하는 데 중요한 역할을 합니다. block, inline, inline-block의 차이를 이해하면 요소들을 보다 효과적으로 배치할 수 있으며, 다양한 레이아웃을 구현하는 데 도움이 됩니다. 이번 글에서 설명한 내용과 예시를 바탕으로, display 속성을 활용하여 더 나은 웹 디자인을 구현해 보세요!

CSS
git github
This post is licensed under CC BY 4.0 by the author.

Trending Tags

git github