미디어 쿼리로 반응형 웹 디자인 구현하기
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- 초보 웹 개발자 및 디자이너
- 반응형 디자인 기초 학습자
- CSS 기능 활용에 관심 있는 사람
핵심 요약
- 미디어 쿼리란?
- *
@media** 규칙을 사용해 화면 크기, 방향 등 기기 특성에 따라 스타일을 동적으로 적용하는 CSS 기술 - 기본 문법 예시
```css
@media (max-width: 600px) { body { background-color: lightblue; } }
```
- 핵심 목적
- *모바일 최적화**, 사용자 경험 향상, 다양한 화면 크기에 맞는 레이아웃 커스터마이징
섹션별 세부 요약
1. 미디어 쿼리 정의
- 기능: 기기 특성(화면 너비, 높이, 방향)에 따라 CSS 스타일 적용
- 목적: 반응형 웹 디자인 구현
- 기본 개념: 반응형 디자인은 모바일, 태블릿, 데스크탑 등 다양한 기기에 최적화된 레이아웃 제공
2. 문법 구조
- 기본 구조:
```css
@media [조건] { [적용할 CSS 규칙] }
```
- 주요 조건 예시:
- only screen: 화면 기기 대상
- (max-width: 600px): 최대 600px 화면 너비
- 브라켓 내부: 조건 충족 시 적용할 스타일 정의
3. 일반적인 브레이크포인트
- 휴대폰:
max-width: 600px - 태블릿:
min-width: 601pxandmax-width: 992px - 노트북:
min-width: 993pxandmax-width: 1200px - 데스크탑:
min-width: 1201px - 참고: 프로젝트에 맞는 커스텀 브레이크포인트 설정 가능
4. 미디어 쿼리의 중요성
- 사용자 경험 향상: 모든 기기에서 일관된 디자인 제공
- 모바일 친화적 웹사이트 구축: 모바일 기기 최적화
- 레이아웃 유연성: 화면 크기에 따라 레이아웃 자동 조정
5. 실습 예시
- 기본 스타일:
```css
p { font-size: 16px; color: black; }
```
- 모바일 최적화:
```css
@media (max-width: 600px) { p { font-size: 14px; color: blue; } }
```
- 결과: 화면 너비 600px 이하일 때 글꼴 크기와 색상 변경
6. 결론
- 핵심 팁: 미디어 쿼리는 반응형 디자인의 핵심 도구로, 모든 웹 개발자가 반드시 익혀야 할 기술
- 적용 방법: 브레이크포인트를 기반으로 화면 크기에 맞는 스타일 적용
- 실무 예시: 위 예시처럼 텍스트 스타일을 조건에 따라 동적으로 변경 가능