style css display 이해하기

2025. 1. 9. 11:04

CSS의 display 속성은 HTML 요소가 페이지에 배치되는 방식을 결정하는 데 사용됩니다. display 속성의 다양한 값과 그에 따른 작동 방식을 이해하면 웹 페이지의 레이아웃을 유연하게 설계할 수 있습니다.

1. display: block

block은 블록 요소로, 콘텐츠를 한 줄 전체에 배치합니다. 기본적으로 <div>, <p>와 같은 요소는 display: block으로 동작합니다.

특징

화면 전체 너비를 차지하며, 위아래 여백이 발생합니다.
다음 요소는 아래로 이동합니다.

예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display: Block</title>
    <style>
        .block-example {
            display: block;
            background-color: lightblue;
            margin: 10px 0;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h1>Block Example</h1>
    <div class="block-example">This is a block-level element.</div>
    <div class="block-example">Another block-level element.</div>
</body>
</html>

2. display: inline

inline은 인라인 요소로, 콘텐츠가 한 줄에 나란히 배치됩니다. 기본적으로 <span>, <a> 같은 요소가 해당 속성을 가집니다.

특징

콘텐츠 크기만큼의 공간을 차지합니다.
줄바꿈이 되지 않고, 요소는 나란히 배치됩니다.

예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display: Inline</title>
    <style>
        .inline-example {
            display: inline;
            background-color: lightgreen;
            margin: 5px;
            padding: 5px;
        }
    </style>
</head>
<body>
    <h1>Inline Example</h1>
    <span class="inline-example">This is an inline element.</span>
    <span class="inline-example">Another inline element.</span>
</body>
</html>

3. display: inline-block

inline-block은 블록 요소처럼 크기와 여백을 지정할 수 있으면서도 인라인 요소처럼 한 줄에 나란히 배치됩니다.

특징

블록처럼 너비와 높이를 설정할 수 있습니다.
줄바꿈 없이 요소가 나란히 배치됩니다.

예제

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

4. display: flex

flex는 플렉스박스 레이아웃을 제공하며, 요소를 효율적으로 정렬하고 공간을 분배할 수 있습니다.

특징

부모 요소에 display: flex를 설정하면 자식 요소는 플렉스 아이템이 됩니다.
요소 간의 간격과 정렬이 자동으로 조정됩니다.

예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display: Flex</title>
    <style>
        .flex-container {
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: lightgray;
            height: 100px;
        }
        .flex-item {
            background-color: skyblue;
            padding: 10px;
            margin: 5px;
            width: 50px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Flex Example</h1>
    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
    </div>
</body>
</html>

5. display: grid

grid는 격자 기반의 레이아웃을 만들 수 있는 강력한 도구입니다.

특징

부모 요소에 display: grid를 설정하면 자식 요소는 그리드 아이템이 됩니다.
행과 열 단위로 배치할 수 있습니다.

예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display: Grid</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            background-color: lightyellow;
        }
        .grid-item {
            background-color: lightpink;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Grid Example</h1>
    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
    </div>
</body>
</html>

6. display: none

none은 요소를 화면에 표시하지 않으며, 공간도 차지하지 않습니다.

특징

요소는 DOM에 남아 있지만, 렌더링되지 않습니다.

예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display: None</title>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <h1>None Example</h1>
    <p>This paragraph is always visible.</p>
    <p class="hidden">This paragraph is hidden and does not take up space.</p>
</body>
</html>

결론

display 속성은 웹 페이지의 레이아웃과 디자인을 결정하는 데 중요한 역할을 합니다. block, inline, inline-block, flex, grid, none 등의 다양한 값을 적절히 사용하면 효율적이고 아름다운 UI를 설계할 수 있습니다. 위 예제를 활용하여 실제 프로젝트에 적용해 보세요!

저작자표시

'개발 > CSS' 카테고리의 다른 글

style css padding, margin 이해하기 (0)	2025.01.09
style css position 이해하기 (0)	2025.01.09
CSS의 Flex 속성에 대한 완벽 가이드 (0)	2025.01.08
테이블 Td나 Div에 문자열이 길 경우 말줄임표 기능 표현 (0)	2019.03.08
css 속성 강제적용 important (0)	2019.02.27

subinto의 개발노트