미디어 쿼리

미디어 쿼리

미디어 쿼리란?

현재 브라우저 또는 장치 환경이 프로그래머가 정의한 규칙에 부합할 때 특정 css를 적용하도록 해주는 구문

특히 반응형 웹을 만들고자 할 때 화면 크기에 따라 서로 다른 css 스타일을 적용하기 위해 많이 사용한다

미디어 쿼리 기본

@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}

구성 요소

@media

• 미디어 쿼리의 시작 부분

media-type

• 미디어 유형
• all, print, screen, speech 네 가지 중 하나를 지정할 수 있다
  • all: 모든 장치에 적용 (기본값)
  • print: 인쇄 결과물 및 출력 미리보기 화면에 적용
  • screen: 화면에 적용
  • speech: 음성합성장치에 적용
• 논리합 및 논리곱 연산자를 이용하여 연결하여 사용할 수 있다

and / , / not

• 논리합 (or) 또는 논리곱 (and) 또는 부정 (not)
• 앞뒤 조건을 && 또는 || 으로 묶어주는 역할을 하거나, 조건을 뒤집는다
  • and: 논리곱 (앞뒤로 연결된 조건문이 모두 참이어야 스타일 적용)
  • , : 논리합 (앞뒤로 연결된 조건문이 하나라도 참이면 스타일 적용)
  • not : 부정 (모든 미디어 쿼리 부정 = 뒤따라오는 조건 중 하나라도 참이면 스타일 적용하지 않음)
  • not 사용 시에는 미디어 유형을 반드시 지정해주어야 하며, 한 개의 조건만 부정할 수 없다 (무조건 모든 미디어 쿼리를 부정하므로, 맨 마지막에 적용된다)

media-feature-rule

• 미디어 특성 표현식
• 일종의 조건문이라고 보면 된다
• 각각의 조건문은 괄호로 묶어주고, 논리 연산자를 통해 여러 조건을 함께 적용할 수 있다
• 올 수 있는 특성의 일부는 다음과 같다
  • device-height: 출력 장치 화면의 높이
  • devide-width: 출력 장치 화면의 너비
  • width: 뷰포트의 너비
  • height: 뷰포트의 높이
  • orientation: 뷰포트의 방향 (landscape / portrait)
  • 더 많은 특성은 여기서 확인
• 미디어쿼리 level 4 사양에선 특성 표현식 괄호 안에서 비교연산자 (<, >, ≤, ≥) 와 and, or, not 연산자를 사용할 수 있다

@media (30 <= width <= 80) {
      어쩌구
}

@media (not(hover)) {
      어쩌구
}

미디어 쿼리 구성 팁

반응형 웹을 구성할 땐 데스크탑 기준으로 작업 후 미디어 쿼리를 이용하여 모바일 화면을 줄이거나, 모바일 기준으로 작업 후 미디어 쿼리를 이용하여 데스크탑 화면으로 늘리는 두 가지 방법 중 하나가 이용된다

후자의 작업법은 모바일 우선 반응형 디자인으로 불리는데, 모바일은 화면이 데스크탑에 비해 훨씬 작기 때문에 더 작은 컴포넌트들로 화면을 구성해야 하며 따라서 요소들을 더 잘게 잘라 작업하게 된다

데스크탑을 기준으로 작업할 경우 모바일 화면을 구성할 때 이미 만들어진 컴포넌트들을 더 쪼개주는 추가적인 작업이 필요한데, 모바일 기준으로 작업할 경우 데스크탑 화면을 구성할 땐 추가적인 분할 없이 작은 원소들을 갖다 붙이기만 하면 되므로 작업량이 현저히 줄어든다

참고자료

미디어 쿼리 사용하기 - CSS: Cascading Style Sheets | MDN

미디어 쿼리 사용하기 - CSS: Cascading Style Sheets | MDN

미디어 쿼리 초보자 안내서 - Web 개발 학습하기 | MDN

미디어 쿼리 초보자 안내서 - Web 개발 학습하기 | MDN