mason
mason-log.

mason

mason.

안녕하세요. mason 입니다.

css

CSS 레이아웃.

Flexbox, Grid, positioning. 화면 구조를 잡는 CSS 레이아웃.

레이아웃은 요소를 가로, 세로로 어떻게 배치할지다. 요즘은 Flexbox와 Grid가 기본이고, 필요하면 positioning을 섞는다.

↔️ Flexbox

한 방향(행 또는 열) 정렬에 강하다. 네비, 카드 가로 나열, 가운데 정렬에 자주 쓴다.

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

주요 속성:

  • flex-direction: row / column
  • justify-content: 메인 축
  • align-items: 교차 축
  • gap: 아이템 간격 (margin 핵보다 단순)
  • flex: 1: 남는 공간 나누기
  • flex-wrap: wrap: 줄바꿈

🗂️ Grid

2차원(행+열) 배치에 강하다. 페이지 골격, 카드 그리드, 사이드바 레이아웃에 맞다.

.layout {
  display: grid;
  grid-template-columns: 24rem 1fr;
  gap: 2rem;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1rem;
}

주요 속성:

  • grid-template-columns / rows
  • grid-column: 1 / -1 — 전체 열 병합
  • auto-fill + minmax — 반응형 카드 나열에 유용

⚖️ Flex vs Grid

Flex 축과 Grid 트랙 비교

FlexGrid
축1차원2차원
아이템 크기콘텐츠, flex 비율트랙 정의
전형툴바, 한 줄 정렬페이지 그리드, 갤러리

둘을 중첩해서 쓰는 게 자연스럽다. (바깥 Grid, 안쪽 Flex)

📍 Positioning

값기준
static기본 흐름
relative자기 자리 / absolute 기준점
absolute가까운 positioned 조상
fixed뷰포트 (고정 헤더 등)
sticky스크롤 구간에 붙음

같이 알아둘 것:

  • z-index는 stacking context 안에서만 비교된다.
  • transform, opacity 등이 새 컨텍스트를 만들 수 있다.

📜 예전에 쓰던 방식

  • float 기반 레이아웃은 레거시 코드에서 만날 수 있다. 신규는 Flex/Grid를 우선한다.
  • table 레이아웃도 표 데이터가 아니면 비추다.

🔗 참고 자료