[HTML/CSS] 5. CSS : Display

문정준

Mar 07, 2025

Contents

Display : 외관 설정

✏️

Inline, Block, Inline-block

Display : 외관 설정

사용자에게 어떻게 표시할 지를 정하는 속성

inline
block
inline-block

Block, Inline의 성질

Block의 경우

너비(width)는 화면 전체
높이(height)는 내부의 텍스트 글꼴 크기에 따라 달라짐

높이는 직접 크기 설정 가능

Inline의 경우

너비, 높이가 모두 내부의 텍스트 글꼴 크기에 따라 달라짐
크기 직접 설정 불가

Inline-Block

크기 변경이 자유롭지 못한 Inline, Block의 단점을 보완하기 위한 속성

너비, 높이를 모두 직접 설정 가능

기본 값은 Inline


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            border: 1px solid black;
            padding: 10px;
        }

        .b1 {
            display: block;
            height: 200px;
        }

        .b2 {
            display: inline;
            height: 200px;
        }

        .b3 {
            display: inline-block;
            height: 200px;
            width: 200px;
        }
    </style>
</head>

<body>
    <div class="b1">1</div>
    <hr>
    <div class="b2">2</div>
    <hr>
    <div class="b3">3</div>
</body>

</html>

See more posts

[HTML/CSS] 5. CSS : Display

Inline, Block, Inline-block

Display : 외관 설정

Block, Inline의 성질

Inline-Block

[HTML/CSS] 7. Grid Layout

[HTML/CSS] 6. CSS Flexbox

[HTML/CSS] 4. CSS 기본

[HTML/CSS] 3. 학교 시간표 만들기