CSS display property

CSS의 display 프로퍼티는 요소가 어떤 방식으로 보여지는지를 정의합니다.

block

display 프로퍼티의 값 중 가장 일반적인 것은 블록(block)입니다. 블록은 가로폭 전체를 차지하며 새로운 줄에서 시작되는 형태를 가지고 있습니다. 예를 들어, <div>와 <p> 태그는 기본적으로 블록 요소입니다.

inline

인라인(inline)은 줄 내에서만 존재하며 필요한 만큼의 너비만 차지합니다. <span>과 <a> 태그는 기본적으로 인라인 요소입니다.

inline-block

인라인-블록(inline-block)은 인라인과 블록의 특성을 모두 가지고 있습니다. 인라인-블록 요소는 새로운 줄에서 시작하지 않으면서도 가로폭 전체를 차지할 수 있습니다.

none

display none은 웹 페이지에서 특정 요소를 보이지 않게 하는 방법 중 하나입니다. 숨긴 요소는 렌더링이 되지 않으므로 공간도 차지하지 않습니다.

flex

flex는 요소를 유연한 컨테이너로 만들어줍니다. 이 속성을 사용하면 요소들을 행 또는 열로 정렬할 수 있으며, 각 요소의 크기를 자동으로 조정하여 빈 공간을 채울 수 있습니다.

display: flex를 사용하면 다음과 같은 이점을 얻을 수 있습니다.

자동으로 요소를 정렬합니다. flex-direction 속성을 사용하여 요소를 행으로 정렬할지, 열로 정렬할지 결정할 수 있습니다.
요소의 크기를 자동으로 조정합니다. flex-grow 속성을 사용하여 빈 공간을 채울 때 각 요소의 크기를 어떻게 조정할지 결정할 수 있습니다.
요소 간 간격을 조정할 수 있습니다. justify-content 속성을 사용하여 요소 간 간격을 정렬할 수 있습니다.
요소를 수직 정렬할 수 있습니다. align-items 속성을 사용하여 요소를 수직으로 정렬할 수 있습니다.
요소들을 반응형으로 조정할 수 있습니다. flex-wrap 속성을 사용하여 요소가 컨테이너를 벗어나는 경우 줄 바꿈을 할지, 더 작은 크기로 조정할지 결정할 수 있습니다.

아래는 간단한 예시입니다.

<style type="text/css">
.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.item {
    flex-grow: 1;
}

.blue {
    background-color: blue;
}

.red {
    background-color: red;
}

.yellow {
    background-color: yellow;
}
</style>

<body>
    <div class="container">
        <div class="item blue">abc</div>
        <div class="item red">def</div>
        <div class="item yellow">fhi</div>
    </div>
    <div class="container">
        <div class="item red">abc2</div>
        <div class="item yellow">def2</div>
        <div class="item blue">fhi2</div>
    </div>
</body>

이 예시에서 .container 클래스는 요소들을 행으로 정렬하고, 요소들 사이의 간격을 고르게 분배하기 위해 justify-content: space-between 속성을 사용합니다. .item 클래스는 flex-grow: 1 속성을 사용하여 요소의 크기를 자동으로 조정하도록 설정합니다.

출력되는 화면은 다음과 같습니다.

grid

그리드 레이아웃은 요소를 행과 열의 그리드로 배치하여 웹 페이지의 레이아웃을 만들 수 있는 방법입니다. 아래는 간단한 그리드 레이아웃 예제입니다.

<style type="text/css">
.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px;
}

.item {
    background-color: #ddd;
    border: 1px solid #999;
    padding: 20px;
    text-align: center;
}
</style>

<body>
    <div class="container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <div class="item item4">4</div>
        <div class="item item5">5</div>
        <div class="item item6">6</div>
    </div>
</body>

위 예제에서는 .container 클래스에 display: grid 속성을 적용하여 그리드 레이아웃을 생성합니다. grid-template-columns 속성은 그리드 컬럼의 크기를 지정하는데, 여기서는 3개의 컬럼을 각각 1프랙션이 차지하도록 지정했습니다. grid-gap 속성은 그리드 항목 사이의 간격을 지정합니다.

.item 클래스는 그리드 레이아웃 안에서 표시될 항목을 나타냅니다. 각 항목에는 background-color, border, padding, text-align 속성이 지정되어 있습니다.

실행 결과는 다음과 같습니다.

저작자표시

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

css float 속성 (0)	2023.03.19
css overflow 속성 (0)	2023.03.19
html에서 img를 화면 가로로 가운데에 배치하는 방법 (0)	2023.03.18
html에서 이미지 크기를 적당히 조정하는 방법 (0)	2023.03.18
CSS의 box model (0)	2023.03.11