CSS 레이아웃 핵심 개념: Flexbox, 반응형 디자인, 크기 단위
AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

200일 전역 스택 개발 여정 - CSS 레이아웃 핵심 개념

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

웹 개발자 및 프론트엔드 학습자 (초보자~중급자)

핵심 요약

  • CSS 크기 단위(px, em, rem, %, vh, vw)는 반응형 디자인의 기초
  • floatclear은 구식 레이아웃 방식으로 Flexbox가 현대적인 대체 방안
  • Flexbox(display: flex, justify-content, align-items)로 유연한 레이아웃 구현 가능

섹션별 세부 요약

1. CSS 크기 단위

  • px: 고정 크기, 16px으로 설정 시 사용자 환경에 따라 조정 불가
  • em: 부모 요소의 font-size에 비례 (예: 1.5em = 부모 16px의 24px)
  • rem: 루트 요소(html)의 font-size 기준 (예: 2rem = 32px)
  • %: 부모 요소의 너비/높이에 비례 (예: 50% = 부모의 1/2 너비)
  • vw/vh: 뷰포트 크기 기준 (예: 100vw = 브라우저 창의 전체 너비)

2. float 및 clear

  • float: 요소를 좌우로 이동시키며 텍스트 둘레에 감싸기 가능 (예: float: left)
  • clear: 부유 요소 주변 흐름 방지 (예: .clearfix { clear: both })
  • Pro Tip: 레이아웃 목적은 Flexbox를 사용하고, float은 텍스트 감싸기 용도로 한정

3. Flexbox 레이아웃

  • 컨테이너에 display: flex 설정 시 자식 요소가 행 방향으로 정렬
  • 주요 속성:

- justify-content: 주 축 정렬 (예: space-around)

- align-items: 교차 축 정렬 (예: center)

- flex-direction: 방향 설정 (row / column)

- flex-wrap: 줄 바꿈 허용 (예: wrap)

  • 예시: .container { display: flex; justify-content: space-around; align-items: center }

결론

  • 레이아웃 구현 시 Flexbox를 우선적으로 사용하고, float은 텍스트 감싸기 용도로 한정
  • em/rem은 반응형 폰트 크기 설계에 적합, %/vw/vh는 뷰포트 기반 크기 조정에 활용
  • CSS Tricks, MDN, Flexbox Froggy 등 실습 자료 활용하여 개념 정리 및 적용 연습 필수