CSS display 옵션들에 대해 알아보기
목차
✔ display 옵션이란?
CSS에서 display 속성은 웹 페이지 내의 요소가 어떻게 보여질지, 즉 그 요소의 레이아웃 박스 유형을 결정하는 중요한 속성이다.
이 속성은 요소가 문서 흐름에 어떻게 포함될지, 다른 요소들과 어떻게 상호 작용할지를 정의한다.
display 속성에는 여러 가지 값이 있으며, 각각이 요소의 행동 방식을 크게 변경한다.
가장 기본적인 값으로는 block, inline, inline-block, flex, grid, none 등이 있다.
div {
display: /* options */
}✔ display: none;
none을 설정하면 요소가 화면에서 보이지 않게 된다.
이는 요소를 DOM에서 제거하지는 않지만, 렌더링에서 제외시킨다.
visibility: hidden과 다르게 요소가 차지하는 공간조차 없애버린다.
div {
display: none;
}
요소를 DOM에서 제거하는 것은 아니지만, 해당 요소와 그 자식 요소들이 모두 렌더링되지 않는다.
따라서 접근성과 SEO 측면에서 주의가 필요하다.
✔ display: block;
이 옵션은 요소를 블록 레벨 요소로 만든다.
즉, 새로운 줄에서 시작하고 가능한 한 넓게 확장된다.
요소의 가로 너비는 부모 요소의 전체 너비를 차지하며, 세로 너비는 내용에 따라 결정된다.
block 요소는 width, height, margin, padding과 같은 속성을 모두 적용할 수 있다.
div {
display: block;
}
block 요소는 화면의 많은 공간을 차지할 수 있으므로, 레이아웃을 계획할 때 주의해야 한다.
여러 block 요소를 나란히 배치하려면 float나 flex, grid 같은 레이아웃 기법을 사용해야 한다.
<div>, <p>, <h1> 등 대부분의 HTML 요소는 기본적으로 block 요소이다.
✔ display: inline;
이 옵션은 요소를 인라인 레벨로 만든다.
즉, 텍스트와 같이 줄 안에서 표시되게 된다.
inline은 주로 텍스트 내에서 사용된다.
width, height 속성이 적용되지 않으며, margin-top, margin-bottom도 적용되지 않는다.
padding은 적용되지만, 레이아웃에 영향을 주지 않는다.
div {
display: inline;
}
inline 요소에는 상하 여백(margin-top, margin-bottom)과 높이(height)가 적용되지 않기 때문에
이러한 속성을 조절하고 싶다면 inline-block이나 다른 display 속성을 고려해야 한다.
<span>, <a>, <img> 등이 inline 요소이다.
✔ display: inline-block;
inline-block은 inline과 block의 중간 형태이다.
이 요소는 줄 바꿈 없이 다른 요소와 같은 줄에 배치되지만,
block처럼 width, height, margin, padding 등을 모두 적용할 수 있다.
div {
display: inline-block;
}
inline-block 요소는 텍스트의 기준선에 맞춰 정렬되므로, 다른 inline-block 요소들과의 정렬을 조정할 때 주의가 필요하다.
vertical-align 속성을 활용하여 이를 조정할 수 있다.
<button>, <input> 등이 inline-block 요소이다.
✔ display: flex;
flex는 유연한 박스 모델을 제공한다.
flex 컨테이너 내의 아이템들은 가로나 세로 축을 기준으로 유연하게 배치할 수 있다.
즉, 자식 요소들을 다양한 방향과 순서로 정렬할 수 있게 해주는 것이다.
div {
display: flex;
}
flex는 한 방향(수평 또는 수직)에 초점을 맞추므로, 2차원 레이아웃을 구성하려면 grid를 고려해야 한다.
💠 display flex의 옵션
- flex-direction
플렉스 아이템들이 행(row) 또는 열(column) 방향으로 배치되는지 결정한다. - justify-content
주 축(main axis)을 따라 플렉스 아이템들의 정렬 방법을 결정한다. - align-items
교차 축(cross axis)을 따라 플렉스 아이템들의 정렬 방법을 결정한다. - flex-wrap
플렉스 아이템들이 컨테이너 내에서 줄바꿈을 할지 여부를 결정한다. - align-content
여러 줄의 플렉스 아이템들이 교차 축을 따라 어떻게 정렬될지 결정한다. - flex-grow, flex-shrink, flex-basis
플렉스 아이템의 성장, 축소 및 기본 크기를 결정한다.
📌 display flex example
.flex-container {
display: flex;
justify-content: space-around; /* 아이템들을 주 축을 따라 균등하게 배치 */
align-items: center; /* 아이템들을 교차 축을 따라 중앙에 배치 */
height: 200px; /* 컨테이너의 높이 설정 */
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
padding: 10px;
width: 50px; /* 각 아이템의 너비 설정 */
height: 50px; /* 각 아이템의 높이 설정 */
margin: 5px;
line-height: 50px; /* 텍스트를 중앙에 배치 */
text-align: center; /* 텍스트를 중앙 정렬 */
font-size: 20px;
}<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>✔ display: grid;
grid는 2차원 레이아웃 시스템을 제공한다.
행과 열의 형태로 공간을 분할하여 요소를 배치할 수 있다.
grid-template-columns, grid-template-rows, grid-gap 등의 속성을 통해 세밀한 레이아웃 조정이 가능하다.
grid는 복잡한 레이아웃을 구현할 때 매우 유용하다.
div {
display: grid;
}grid 레이아웃은 상대적으로 복잡하므로 학습 곡선이 있다.
💠 display grid의 옵션
- grid-template-columns, grid-template-rows
그리드의 열과 행의 크기 및 수를 정의한다. - grid-column-gap, grid-row-gap
그리드 열과 행 사이의 간격을 설정한다. - grid-auto-columns, grid-auto-rows
암시적으로 생성된 그리드 행과 열의 크기를 정의한다. - grid-auto-flow
그리드 아이템이 그리드 셀에 자동 배치되는 방식을 결정한다. - justify-items, align-items
그리드 아이템들의 정렬 방법을 결정한다. - justify-content, align-content
전체 그리드 컨테이너 내에서 그리드 자체의 정렬을 결정한다.
📌 display grid example
.grid-container {
display: grid;
grid-template-columns: auto auto auto; /* 세 개의 열 생성 */
grid-gap: 10px; /* 그리드 아이템 사이의 간격 */
background-color: lightgrey;
padding: 10px;
}
.grid-item {
background-color: tomato;
padding: 20px;
text-align: center;
font-size: 30px;
}<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>
flex와 grid 옵션에는 공통적으로 사용되는 속성들이 있다.
각 옵션들에 대해서 간단하게만 알아보자.
✔ justify-content
주 축(main axis)에 대해 자식 요소들을 어떻게 정렬할지 결정한다.
- flex-start
요소들을 컨테이너의 시작 부분에 정렬한다. - flex-end
요소들을 컨테이너의 끝 부분에 정렬한다. - center
요소들을 컨테이너의 중앙에 정렬한다. - space-between
요소들 사이에 동일한 간격을 두고 정렬한다. - space-around
요소들 주위에 동일한 간격을 두고 정렬한다. - space-evenly
요소들이 컨테이너 내에서 균등하게 분포되도록 정렬한다.
✔ align-items
교차 축(cross axis)에 대해 자식 요소들을 어떻게 정렬할지 결정한다.
- flex-start
요소들을 컨테이너의 시작 부분에 정렬한다. - flex-end
요소들을 컨테이너의 끝 부분에 정렬한다. - center
요소들을 컨테이너의 중앙에 정렬한다. - baseline
요소들을 컨테이너의 기준선에 맞춰 정렬한다. - stretch
요소들을 컨테이너의 높이에 맞게 늘려 정렬한다.
✔ align-content
여러 줄의 컨테이너에서 교차 축(cross axis)을 따라 어떻게 공간을 분배할지 결정한다.
- flex-start
여러 줄을 컨테이너의 시작 부분에 정렬한다. - flex-end
여러 줄을 컨테이너의 끝 부분에 정렬한다. - center
여러 줄을 컨테이너의 중앙에 정렬한다. - space-between
여러 줄 사이에 동일한 간격을 두고 정렬한다. - space-around
여러 줄 주위에 동일한 간격을 두고 정렬한다. - stretch
여러 줄을 컨테이너의 높이에 맞게 늘려 정렬한다.
✔ gap
flex 또는 grid 컨테이너 내의 아이템들 사이의 간격을 설정한다.
div {
gap: 10px;
}✔ row-gap / column-gap
row-gap은 행 사이의 간격을, column-gap은 열 사이의 간격을 지정한다.
div {
row-gap: 20px;
column-gap: 15px;
}위 작성한 옵션들 말고도 다양하게 있는데, 나머지는 간단하게만 알아보겠다.
✔ display table 관련 옵션들
- table
요소를 블록 레벨 테이블로 표시한다.
<table>과 유사한 행동을 한다. - table-row
요소를 테이블 행으로 표시한다.
<tr>과 유사한 행동을 한다. - table-cell
요소를 테이블 셀로 표시한다.
<td>나 <th>와 유사한 행동을 한다. - table-column
요소를 테이블의 열로 표시한다.
주로 열의 그룹을 스타일링하는 데 사용된다. - table-column-group
여러 열(table-column)을 그룹화한다.
<colgroup>과 유사하다. - table-header-group
테이블의 헤더 행 그룹을 나타낸다.
<thead>와 유사하다. - table-footer-group
테이블의 푸터 행 그룹을 나타낸다.
<tfoot>와 유사하다. - table-row-group
하나 이상의 행을 그룹화한다.
<tbody>와 유사하다.
✔ display inline 관련 옵션들
- inline-flex
요소를 인라인 레벨의 플렉스 컨테이너로 만든다.
이는 flex와 비슷하지만, 요소가 인라인 요소처럼 동작한다. - inline-grid
요소를 인라인 레벨의 그리드 컨테이너로 만든다.
이는 grid와 비슷하지만, 요소가 인라인 요소처럼 동작한다. - inline-table
요소를 인라인 레벨 테이블로 표시한다.
<table>과 유사하지만, 요소가 인라인 요소처럼 동작한다.
처음 이 포스트를 작성할려고 마음 먹었을 때는 생각보다 오래 걸리지 않을 거라 생각했는데...
너무나 많은 옵션들이 있어서 생각보다 오래 걸렸다.
필자의 경우 display flex와 grid를 자주 사용하고 굉장히 좋아하는데, 이렇게 따로 공부하고나니 감회가 새롭다.
저를 응원해주세요!
'CSS' 카테고리의 다른 글
| ChatGPT로 Bulma 알아보기 (8) | 2023.06.26 |
|---|---|
| ChatGPT로 Tailwind CSS 알아보기 (12) | 2023.06.02 |
| ChatGPT로 Sass 알아보기 (11) | 2023.05.28 |
| ChatGPT로 LESS CSS 알아보기 (7) | 2023.05.27 |
| chatGPT가 생각하는 아름다운 CSS 버튼 스타일 (feat. before/after 가상 요소) (1) | 2023.04.23 |
오랜만에 CSS와 관련된 포스팅을 작성하는 듯 하다.
이번 포스트에서는 CSS 속성들 중 'dispaly'에 대해서 알아보는 시간을 가지고자 한다.
display 속성은 HTML 요소가 어떻게 표시되는지를 결정하는 중요한 속성이다.
display의 주요 옵션이 무엇이 있는지 알아보고, 각각 어떤 기능을 하는지 간단하게 알아보자.