Post

블락, 인라인블락, 인라인 속성 이해

Posted
Preview Image
By kimyih 5 min read

CSS의 block, inline-block, inline 속성 이해하기

CSS에서 요소를 배치할 때 display 속성을 사용하여 요소가 페이지에 어떻게 나타날지를 결정할 수 있습니다.
block, inline-block, inline은 가장 기본적이고 중요한 display 속성 값입니다.
이번 글에서는 이 세 가지 속성이 어떻게 다르고, 각각의 특성이 무엇인지 자세히 설명하겠습니다.


🖋️ inline 속성

특징

inline 요소는 텍스트 크기 만큼만 공간을 점유하며, 줄바꿈을 하지 않습니다.
즉, 한 줄에 여러 inline 요소가 나란히 배치될 수 있습니다. 대표적인 inline 요소로는 <span>, <a>, <strong> 등이 있습니다.


예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline Example</title>
    <style>
        .inline-example {
            display: inline;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <span class="inline-example">이것은</span>
    <span class="inline-example">인라인</span>
    <span class="inline-example">요소입니다.</span>
</body>
</html>


결과

위 예제에서 각 span 요소는 텍스트 크기 만큼만 공간을 차지하며, 한 줄에 나란히 배치됩니다.
요소 간의 배치는 문장 내의 단어처럼 동작합니다.



🖋️ block 속성

특징

block 요소는 무조건 한 줄을 점유하며, 다음 요소는 자동으로 줄바꿈이 됩니다. block 요소는 기본적으로 너비가 100%로 설정되며, 한 줄 전체를 차지합니다.
대표적인 block 요소로는 <div>, <p>, <h1> 등이 있습니다.


예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Block Example</title>
    <style>
        .block-example {
            display: block;
            background-color: lightcoral;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="block-example">이것은</div>
    <div class="block-example">블록</div>
    <div class="block-example">요소입니다.</div>
</body>
</html>


결과

위 예제에서 각 div 요소는 한 줄 전체를 차지하며, 다음 요소는 자동으로 줄바꿈이 됩니다.
각 요소는 블록 박스 모델에 따라 배치됩니다.


🖋️ inline-block 속성

특징

inline-block 요소는 inline 요소처럼 한 줄에 여러 개가 나란히 배치될 수 있지만, block 요소처럼 너비와 높이를 지정할 수 있습니다.
이는 inline 요소의 특성과 block 요소의 특성을 모두 가지는 속성입니다.
대표적인 예로 버튼이나 이미지 갤러리 등을 만들 때 유용합니다.


예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline-Block Example</title>
    <style>
        .inline-block-example {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: lightgreen;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="inline-block-example">1</div>
    <div class="inline-block-example">2</div>
    <div class="inline-block-example">3</div>
</body>
</html>


결과

위 예제에서 각 div 요소는 너비와 높이를 지정할 수 있으며, 한 줄에 나란히 배치됩니다. 이는 inline 요소처럼 동작하지만, block 요소처럼 크기를 조절할 수 있습니다.


block, inline-block, inline 속성 요약

속성특징
inline텍스트 크기 만큼만 공간을 점유하고, 줄바꿈을 하지 않습니다. 여러 요소가 한 줄에 나란히 배치됩니다.
block무조건 한 줄을 점유하며, 다음 요소는 줄바꿈이 됩니다. 기본적으로 너비가 100%로 설정됩니다.
inline-blockinline 요소처럼 한 줄에 여러 개가 나란히 배치되지만, block 요소처럼 너비와 높이를 지정할 수 있습니다.



결론

CSS의 block, inline-block, inline 속성은 요소의 배치 방식을 결정하는 중요한 속성입니다.
inline은 텍스트 크기만큼 공간을 차지하고, 줄바꿈을 하지 않으며, block은 한 줄 전체를 차지하고 다음 요소는 줄바꿈이 됩니다.
inline-block은 inline처럼 배치되지만, block처럼 너비와 높이를 지정할 수 있어 유연한 레이아웃을 구성할 수 있습니다.

HTML/CSS
selector
This post is licensed under CC BY 4.0 by the author.