CSS Display

1. 기본 Display 값

Block 요소

• 예시: div, header, section, footer, ul, li, ol, dl, dt, dd, p, address, aside, nav
• 특징:
  • 기본적으로 가로 전체(100%)를 차지합니다.
  • 세로 크기는 내용에 따라 자동으로 늘어납니다.
  • 위아래로 쌓이며, 상하좌우의 마진과 패딩을 모두 지정할 수 있습니다.
  • 요소 내부에 다른 block 요소나 inline 요소를 포함할 수 있습니다.

Inline 요소

• 예시: a, span, em, strong, label, b, i, u
• 특징:
  • 텍스트처럼 흐르는 성질을 가지며, 가로 및 세로 크기가 내용만큼 결정됩니다.
  • 여러 요소가 한 줄에 나란히 배치되고, 줄바꿈은 공간이 부족할 때 자동으로 발생합니다.
  • 좌우의 마진과 패딩은 적용되지만, 상하의 마진/패딩은 제한적으로 동작합니다.
  • width와 height 같은 크기 지정은 기본적으로 불가능합니다.

Inline-Block 요소

• 예시: 주로 img, input, button, select, textarea, iframe, video 등
• 특징:
  • 기본 배치는 inline처럼 흐르지만, block처럼 width와 height를 지정할 수 있습니다.
  • 마진과 패딩은 상하좌우 모두 지정 가능하며, margin 병합이 발생하지 않습니다.

---

2. Flex 컨테이너와 아이템 정렬 (Flexbox)

Flexbox는 1차원(한 방향) 레이아웃을 쉽게 구성할 수 있도록 도와줍니다. 기본 개념은 "메인 축"과 "교차 축"을 기준으로 아이템을 정렬하는 것입니다.

Flex 컨테이너 설정

• display: flex;를 선언하면 해당 요소의 자식들이 Flex 아이템이 됩니다.

주요 속성들

• flex-direction
  • 메인 축의 방향을 결정합니다.
  • 값:
    • row (기본, 왼쪽 → 오른쪽)
    • column (위 → 아래)
    • row-reverse, column-reverse
• flex-wrap
  • 아이템들이 한 줄에 들어가지 않을 경우, 여러 줄로 넘길지 결정합니다.
  • 값:
    • nowrap (한 줄에 모두 배치, 기본)
    • wrap (다음 줄로 감)
    • wrap-reverse
• flex-flow
  • flex-direction과 flex-wrap을 동시에 설정하는 단축 속성입니다.
  • 예: flex-flow: row wrap;
• justify-content
  • 메인 축(기본적으로 가로)에서 아이템들의 정렬과 간격을 조정합니다.
  • 값:
    • flex-start: 시작점부터 정렬 (기본)
    • flex-end: 끝점부터 정렬
    • center: 중앙 정렬
    • space-between: 아이템 사이에 균등한 간격 배분 (양 끝은 붙음)
    • space-around: 각 아이템 주변에 균등한 간격 배분 (아이템 양쪽에 동일한 간격)
    • space-evenly: 아이템 사이와 양 끝에 동일한 간격 배분
• align-items
  • 교차 축(기본적으로 세로)에서 아이템들을 정렬합니다.
  • 값:
    • stretch: 아이템이 컨테이너 전체 높이를 채움 (기본)
    • flex-start: 교차 축 시작점 정렬
    • flex-end: 교차 축 끝점 정렬
    • center: 중앙 정렬
    • baseline: 아이템들의 텍스트 기준선(baseline)을 기준으로 정렬
• align-self
  • 개별 Flex 아이템에 대해 위의 align-items 값을 재정의할 수 있습니다.
  • 값: stretch, flex-start, flex-end, center, baseline
• align-content
  • 여러 줄로 배치된 아이템들의 전체 행(또는 열)의 정렬을 조정합니다. (flex-wrap 사용 시 적용)
  • 값:
    • flex-start, flex-end, center
    • space-between, space-around, space-evenly

• flex-shrink
  • 역할: Flex 컨테이너 내에서 공간이 부족할 때, 각 flex 아이템이 얼마나 축소될지를 결정합니다.
  • 기본값: 1 (즉, 모든 아이템이 동일한 비율로 축소됨)
  • 설명:
    • flex-shrink 값이 0이면, 해당 아이템은 축소되지 않습니다.
    • 값이 1보다 크면, 다른 아이템에 비해 더 많이 축소되어 남은 공간에 맞게 조정됩니다.
    • 예를 들어, 한 아이템에 flex-shrink: 2;를 지정하면, 기본값인 1인 아이템보다 두 배 더 빠르게 축소됩니다.

---

3. Display Grid

Grid 레이아웃은 2차원(행과 열) 레이아웃을 구성할 때 유용합니다. Flexbox가 한 방향(1차원) 정렬에 특화되어 있다면, Grid는 행과 열을 동시에 다룹니다.

Grid 컨테이너 생성

• display: grid;를 선언하여 그리드 컨테이너를 만듭니다.

주요 속성들

• grid-template-columns 와 grid-template-rows
  • 그리드의 열과 행의 크기를 정의합니다.
  • 예:
     

grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto;

• gap (또는 grid-gap)
  • 그리드 셀(행과 열) 사이의 간격을 지정합니다.
  • 예: gap: 10px;
• grid-template-areas(https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas)
  • 이름을 지정해 그리드 영역을 시각적으로 배치할 수 있습니다.
  • 예:

grid-template-areas:
  "header header header"
  "sidebar content content"
  "footer footer footer";

grid-template-areas - CSS: Cascading Style Sheets | MDN

 

• Grid 아이템 정렬 속성
  • justify-items:
    • 각 그리드 아이템의 수평 정렬을 설정합니다.
    • 값: start, end, center, stretch (기본)
  • align-items:
    • 각 그리드 아이템의 수직 정렬을 설정합니다.
    • 값: start, end, center, stretch (기본)
  • justify-content:
    • 전체 그리드의 행(열의 총 너비) 정렬을 결정합니다.
  • align-content:
    • 전체 그리드의 열(행의 총 높이) 정렬을 결정합니다.

특징 및 장점

• 2차원 레이아웃: 행과 열 모두를 자유롭게 제어할 수 있어 복잡한 레이아웃을 구현하기에 적합합니다.
• 자동 배치: Grid의 자동 배치 기능을 활용하면, 명시적으로 아이템의 위치를 지정하지 않아도 효율적으로 배치할 수 있습니다.
• 명시적 위치 지정: 개별 아이템에 대해 grid-column과 grid-row 속성을 사용해 정확한 위치를 지정할 수 있습니다.

---

• Display 종류
  • Block: 전체 너비, 위아래 쌓임, 모든 방향의 마진/패딩 지정 가능
  • Inline: 내용만큼 크기, 한 줄 흐름, 좌우 마진/패딩 중심
  • Inline-Block: inline 흐름에 있으면서 block처럼 크기 지정 가능
• Flexbox (1차원 레이아웃)
  • 주요 속성: flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-self, align-content
  • 용도: 주로 가로(또는 세로) 정렬 및 아이템 간 간격 조정
• Grid (2차원 레이아웃)
  • 주요 속성: grid-template-columns, grid-template-rows, gap, grid-template-areas, justify-items, align-items, justify-content, align-content
  • 용도: 행과 열 모두를 다루어 복잡한 레이아웃 구성에 적합

이처럼 CSS에서는 요소의 기본 display 속성부터 Flex와 Grid 레이아웃까지 다양한 방법을 통해 원하는 레이아웃을 효율적으로 구성할 수 있습니다. 필요에 따라 상황에 맞는 레이아웃 방식을 선택하면, 복잡한 화면 구성도 손쉽게 구현할 수 있습니다.