[HTML/CSS] 5. CSS Display

Mar 10, 2025

Contents

1. 기본 값 (Normal Flow)2. 레이아웃 관련 속성 3. 표(Table) 관련 속성 4. 기타 유용한 속성 5. visibility: hidden vs display: none 차이 6. display 속성 정리

‼️

display 속성은 HTML 요소가 어떻게 배치될지를 결정하는 중요한 속성

1. 기본 값 (Normal Flow)

속성 값	설명
`block`	블록 요소 (줄바꿈됨, 전체 너비 차지)
`inline`	인라인 요소 (줄바꿈 없음, 내용 크기만큼 차지)
`inline-block`	인라인처럼 배치되지만 크기 조절 가능
`none`	요소를 화면에서 숨김 (공간도 사라짐)

2. 레이아웃 관련 속성

속성 값	설명
`flex`	Flexbox 컨테이너 (1차원 레이아웃)
`grid`	CSS Grid 컨테이너 (2차원 레이아웃)
`inline-flex`	`flex`와 같지만 인라인 요소처럼 배치
`inline-grid`	`grid`와 같지만 인라인 요소처럼 배치

3. 표(Table) 관련 속성

속성 값	설명
`table`	`<table>`과 같은 동작
`inline-table`	인라인 테이블 형태
`table-row`	`<tr>`과 같은 동작
`table-cell`	`<td>`과 같은 동작

4. 기타 유용한 속성

속성 값	설명
`contents`	요소는 삭제되지만 내부 콘텐츠는 유지
`list-item`	목록 항목처럼 동작 (기본적으로 `block` + `::marker` 포함)

5. `visibility: hidden` vs `display: none` 차이

속성	설명
`display: none;`	요소를 화면에서 완전히 제거 (공간도 사라짐)
`visibility: hidden;`	요소는 보이지 않지만 공간은 유지됨

6. `display` 속성 정리

block → 줄바꿈 O, 너비 100%

inline → 줄바꿈 X, 내용만큼 차지

inline-block → 인라인처럼 배치되지만 크기 조절 가능

flex → 1차원 레이아웃

grid → 2차원 레이아웃

none → 요소 숨김 (공간도 사라짐)


<!DOCTYPE html>
<html lang="ko">
<head>
    <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>