반응형 웹을 위한 미디어쿼리

미디어 쿼리란?
- 화면 너비, 해상도, 장치 유형에 따라 CSS를 다르게 적용하는 방법

기본 문법
@media screen and (max-width: 768px) {
body {
font-size: 14px;
}
}

- max-width: 768px → 화면이 768px 이하일 때 적용
- min-width도 반대로 사용 가능

자주 쓰는 구간 예시
@media (max-width: 1200px) { ... } // 태블릿~데스크탑 중간
@media (max-width: 992px) { ... } // 태블릿
@media (max-width: 768px) { ... } // 모바일 기준
@media (max-width: 480px) { ... } // 작은 모바일

실전 팁
- 모바일부터 스타일을 먼저 작성하고, 점점 넓히는 “모바일 퍼스트” 방식이 유지보수에 유리
- 요소의 크기, 정렬, 여백, 폰트 등을 미디어 쿼리에서 세분화 가능

예시
.box {
width: 100%;
padding: 20px;
}
@media (max-width: 768px) {
.box {
padding: 10px;
}
}