[CSS] 5. CSS Display

김주희

Mar 10, 2025

Contents

1. CSS Display

1. Display 속성

사용자에게 어떻게 보여줄지 레이아웃을 결정하는 속성

none / block / inline / inline-block / flex / grid / table

default는 block

2. Block

width : 화면 전체의 가로 영역을 차지

height : 내부 item의 크기에 따라 유동적

내부에 내용 없으면 보이지 않음 →width는 화면 전체지만 height가 없다는 뜻
직접 크기 지정 가능

3. Inline

width와 height 둘 다 내부 item의 크기에 따라 유동적

내부에 내용 없으면 보이지 않음 → width, height 둘 다 없다는 뜻

직접 크기 지정 불가능

4. Inline-Block

inline과 block 요소의 단점 보완

width, height 지정 가능

줄바꿈이 되지 않는 inline처럼 동작 + 크기와 여백 지정 가능한 block처럼 동작

default는 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와 padding 설정*/
            border : 1px solid black;
            padding : 10px;
        }
        .b1 {
            display: block;
            height: 200px;
        }
        .b2 {
            display: inline;
            height: 300px;
        }
        .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>

⇒ inline 요소로 지정된 b2 클래스로 지정한 태그는 height를 300px로 설정해도 적용되지 않음을 알 수 있다.

See more posts

[CSS] 5. CSS Display

1. CSS Display

1. Display 속성

2. Block

3. Inline

4. Inline-Block

More articles

[CSS] 7. Grid-Layout

[CSS] 6. Flex

[CSS] 4. CSS 선택자

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