[Responsive] 미디어 쿼리(media query)

미디어  쿼리(media query)

• CSS3에서 도입된 기능으로, 브라우저의 환경(뷰포트 크기, 디바이스 해상도, 방향 등)에 따라 조건에 따라 스타일을 적용
• 주로 화면 크기에 따라 레이아웃을 바꾸는 데 사용

---

기본 문법

/* [문법] */
@media media-type and (media-feature) {
  /* 조건을 만족할 때 적용될 스타일 */
}

media-type (미디어 유형)

미디어 유형	설명
all	모든 장치에 적용 (기본값)
screen	화면 기반 장치 (모니터, 스마트폰 등)
print	인쇄 또는 인쇄 미리보기 시 적용
speech	스크린리더용 장치

media-feature (미디어 특성)

미디어 특성	설명
width, height	뷰포트의 너비 / 높이
min-width, max-width	최소 / 최대 너비 조건
orientation	장치의 방향 (portrait, landscape)
resolution	해상도 (ex. min-resolution: 2dppx)
hover	마우스 오버 지원 여부
pointer	입력 장치의 정확도 (fine, coarse, none)

논리 연산자

연산자	설명	예시
and	조건 모두 만족해야 적용	@media (min-width: 600px) and (max-width: 900px)
not	조건이 아닐 때 적용	@media not screen and (max-width: 768px)
only	특정 미디어 타입만 적용	@media only screen and (min-width: 768px)
, (쉼표)	or 역할	@media screen and (max-width: 500px), print

---

실무 적용 시 고려 사항

1. 모바일 퍼스트 전략

• 모바일 스타일을 먼저 작성하고 → 더 큰 화면에서 덮어쓰기
• 유지보수에 유리하고 퍼포먼스 측면에서도 좋음
• 모바일 퍼스트 / 데스크탑 퍼스트 중 선택하여 일관성 있게 적용 필요

[Responsive] Mobile First vs Desktop First

2. 중단점(Breakpoints) 정의는 전략적으로

• 디자인에 맞게 정의하되 불필요하게 너무 많지 않게 정의

3. 단위는 em 또는 rem을 추천

• 사용자 설정에 따라 유연하게 반응할 수 있음

---

미디어 쿼리 작성 tip

팁	설명
중단점 명확히 구분	768px, 1024px, 1280px 등 프로젝트 기준에 맞게 설정
중첩보단 분리 권장	SCSS에서는 미디어 쿼리를 섞어 쓰기보다 나중에 분리하는 게 명확함
컴포넌트 단위 작성	각 컴포넌트 스타일에 해당하는 미디어 쿼리를 함께 작성하면 유지보수에 좋음
성능 고려	너무 많은 조건, 너무 촘촘한 중단점은 브라우저 처리 비용 증가