하나의 소스로 다양한 화면 크기에 대응하는 반응형 웹 디자인(Responsive Web Design)의 핵심 기술을 정리했다.
미디어 쿼리: 화면 크기별 스타일 적용
CSS의 @media 규칙을 사용하여 화면 너비에 따라 스타일을 변경한다.
/* 기본 스타일 (모바일 우선) */
.container { width: 100%; padding: 10px; }
/* 태블릿 이상 (768px ~) */
@media (min-width: 768px) {
.container { width: 90%; margin: 0 auto; }
.sidebar { display: block; width: 25%; }
}
/* 데스크톱 이상 (1024px ~) */
@media (min-width: 1024px) {
.container { max-width: 1200px; }
}
반응형 웹의 3대 요소
- 뷰포트(Viewport) 설정:
<meta>태그를 통해 기기별 화면 비율을 조절한다. - 유연한 레이아웃(Flexible Layout): 고정 단위(
px) 대신 상대 단위(%,rem,vw등)를 사용하여 요소 크기를 유동적으로 관리한다. - 미디어 쿼리(Media Queries): 특정 지점(Breakpoint)에서 레이아웃을 재배치한다.
모바일 퍼스트(Mobile First) 전략
작은 화면을 기준으로 스타일을 정의한 후 확장해 나가는 방식은 효율적이다.
이는 코드의 간결함을 유지하고 일관된 사용자 경험을 제공한다.
기기 환경에 관계없이 최적화된 화면을 구현하기 위한 기초를 습득한 것 같다.
