[css] Display 종류와 예시

CSS의 display 속성은 다양한 값으로 요소를 표시하는 방법을 제어합니다.

주요한 display 속성 값과 각각의 예시를 아래 HTML 코드에서 Display 요소만 변경하여 작성했습니다.

1. block

블록 요소는 문단처럼 세로로 쌓이는 상자입니다.

한 줄에 하나씩 있고, 너비를 지정할 수 있어요.

CSS Display property

block 예시

Block 1

Block 2

Block 3

2. inline

인라인 요소는 문장 안에서 같은 줄에 들어가는 상자입니다.

가로 너비는 내용의 크기에 따라 자동으로 결정돼요.

CSS Display property

inline 예시

Inline 1

Inline 2

Inline 3

3. inline-block

인라인 블록 요소는 문장 안에 있는데, 블록처럼 너비와 높이를 설정할 수 있어요.

블록의 넓이를 각각 300px, 150px, 200px로 지정해봤습니다.

CSS Display property

inline-block 예시

Inline-block 1

Inline-block 2

Inline-block 3

4. flex

플렉스는 요소를 가로나 세로로 배치할 수 있는 유연한 상자입니다.

안에 있는 항목들을 유연하게 정렬할 수 있어요.

개발자 도구를 이용해서 원하는 디자인을 만들 수 있어요.

CSS Display property

flex 예시

Flex 1

Flex 2

Flex 3

5. inline-flex

인라인 플렉스는 플렉스처럼 동작하지만, 문장 안에서 줄을 바꾸지 않고 표시돼요.

align-items 요소를 사용해서 각 블록 내 글자(내용)의 위치를 다르게 설정해도 한 줄로 나옵니다.

CSS Display property

inline-flex 예시

Inline-flex 1

Inline-flex 2

Inline-flex 3

<!DOCTYPE html>
<html>
    <head>
        <title>CSS Display property</title>
        <style>
            #Inline-flex1 {
                height: 50px;
                width: 300px;
                background: #F6E9B2;
                display: inline-flex;
                align-items: flex-start;
                justify-content: center;
            }

            #Inline-flex2 {
                height: 50px;
                width: 150px;
                background: #F3CA52;
                display: inline-flex;
                align-items: flex-end;
            }

            #Inline-flex3 {
                height: 50px;
                width: 200px;
                background: #7ABA78;
                display: inline-flex;
                align-items: center;
                justify-content: flex-end;
            }

            .vision {
                font-size: 16px;
                margin-left: 20px;
            }

            .main {
                padding: 20px;
                text-align: center;
                background-color:#FBF9F1;
            }
        </style>
    </head>

    <body>
        <div class="vision">inline-flex 예시</div>
        <div class="main">
            <div id="Inline-flex1">Inline-flex 1</div>
            <div id="Inline-flex2">Inline-flex 2</div>
            <div id="Inline-flex3">Inline-flex 3</div>
        </div>
    </body>
</html>

6. grid

그리드는 격자 모양으로 요소를 배열할 수 있는 상자입니다.

행과 열 요소(align-content / justify-content / align-items / justify-items)를 사용해 내용을 정렬할 수 있어요.

CSS Display property

grid 예시

Grid 1

Grid 2

Grid 3

7. inline-grid

인라인 그리드는 그리드처럼 동작하지만, 문장 안에서 줄 바꿈 없이 표시돼요.

align-items 요소를 사용해서 각 블록 내 글자(내용)의 위치를 다르게 설정해도 한 줄로 나옵니다.

CSS Display property

inline-grid 예시

Inline-grid 1

Inline-grid 2

Inline-grid 3

8. table

테이블은 표와 같은 모양의 상자입니다.

행과 열로 이루어져 있어서 요소를 테이블처럼 배열할 수 있어요.

내부 요소를 정렬할 때에는 vertical-align과 text-align 요소를 사용해요.

vertical-align은 셀의 콘텐츠를, text-align은 셀 안의 텍스트를 제어합니다.

CSS Display property

table 예시

Table 1

Table 2

Table 3

+ display: table을 사용하면 텍스트를 테이블의 아래로 내리는 것은 불가능합니다.

display: table 속성은 테이블 레이아웃을 만드는 데 사용되며, 텍스트를 아래로 내리고 싶으면 display: flex 혹은 display: grid 를 사용해야 합니다.

이외 잘 쓰이지 않는 값들

9. inherit: 부모 상자의 디스플레이 속성을 그대로 따라갑니다.

10. initial: 디스플레이 속성의 초기값을 가집니다. 보통 블록이에요.

11. unset: 상속된 값이나 초기값을 가집니다. 만약 부모 요소가 디스플레이 속성을 가지고 있다면 inherit처럼 작동하고, 그렇지 않으면 initial처럼 작동해요.

'HTML•CSS' 카테고리의 다른 글

[css] 그라데이션 폰트 만들기 (2)	2024.05.03
[css] CSS 속성의 종류 (display, font 등) (0)	2024.05.03
[css] CSS의 구조 (선택자, 요소, 값) (0)	2024.05.03
VScode 단축키 (맥용) Visual Studio Code (2)	2024.04.25
[티스토리] 코드 블럭에 코드 복사 버튼 만들기 (5)	2024.04.24