CSS

CSS[Display 속성]

developer_Michael 2023. 4. 4. 08:30
반응형

CSS의 display 속성은 요소를 어떻게 표시할지를 결정하는 데 사용됩니다. 

 

이 속성은 각 요소의 기본 동작을 제어하며, 레이아웃을 구성하는 데 매우 중요합니다.

가장 일반적으로 사용되는 값은 다음과 같습니다.

block: 요소가 블록 레벨 요소가 됩니다. 즉, 요소는 새 줄에서 시작하며, 너비, 높이, 여백 및 패딩 등을 지정할 수 있습니다.
inline: 요소가 인라인 요소가 됩니다. 즉, 요소는 텍스트와 같은 다른 인라인 요소 옆에 표시됩니다. 너비, 높이, 여백 및 패딩 값을 지정할 수 없습니다.
inline-block: 요소는 인라인 박스로 표시되지만, 요소에 너비, 높이, 여백 및 패딩 값을 지정할 수 있습니다.
none: 요소가 표시되지 않습니다. 즉, 해당 요소는 문서 흐름에서 제거되지만, 문서의 다른 부분에 영향을 미치지 않습니다.
flex: 요소가 플렉스 컨테이너가 되어 내부 요소의 배치를 제어할 수 있습니다.
다른 유형의 값도 있으며, 각 값은 요소의 표시 방법을 변경합니다.

<!DOCTYPE html>
<html>

<head>
    <title>Example</title>
    <style>
        div {
            border: 1px solid black;
            padding: 10px;
            margin: 10px;
        }

        /* block */
        .block {
            display: block;
        }

        /* inline */
        .inline {
            display: inline;
        }

        /* inline-block */
        .inline-block {
            display: inline-block;
        }

        /* none */
        .none {
            display: none;
        }

        /* flex */
        .flex {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="block">block</div>
    <div class="inline">inline</div>
    <div class="inline-block">inline-block</div>
    <div class="none">none</div>
    <div class="flex">flex</div>
</body>

</html>

위 코드는 display 속성의 값에 따라 다른 형태로 표시되는 5개의 div 요소를 보여줍니다. 

 

블록, 인라인, 인라인-블록, 없음 및 플렉스가 표시됩니다. 이를 통해 각 값의 차이점을 이해할 수 있습니다.

반응형