200일 전역 스택 개발 여정 - CSS 레이아웃 핵심 개념
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
웹 개발자 및 프론트엔드 학습자 (초보자~중급자)
핵심 요약
- CSS 크기 단위(
px
,em
,rem
,%
,vh
,vw
)는 반응형 디자인의 기초 float
과clear
은 구식 레이아웃 방식으로 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 등 실습 자료 활용하여 개념 정리 및 적용 연습 필수