Topic

반응형 웹 디자인(Responsive Web Design), 미디어 쿼리(Media query)

What I Learned

미디어 쿼리

• 미디어 쿼리(Media Query): 개발자가 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 CSS를 적용할 수 있는 방법
  - @media로 시작한다
  - and not only , 미디어 타입이나 특성 간에 논리 연산자를 활용할 수 있다
  • 미디어 타입
    • all
    • print
    • screen
    • speech
  • 반응형 웹을 위한 미디어 특성(features)
    • max-width: N 브라우저의 width가 N 미만일 때만 적용
    • min-width: N 브러우저의 width가 N 이상일 때만 적용
    • [MIN_WIDTH] <= width <= [MAX_WIDTH]
      • Level 4 미디어 쿼리에서는 비교 연산자를 통해 min-width와 max-width를 설정할 수 있다
  • 다른 미디어 특성
    • hover: none 마우스 오버가 불가능한 모바일 디바이스 등을 위한 설정을 할 수 있다.
    • prefers-color-scheme: light/dark: 운영 체제에서 설정된 라이트/다크 모드를 감지할 수 있다.

반응형 웹

• 보통 태블릿 페이지는 768px <= width <= 1200px, 모바일 페이지는 width < 768px로 설정한다
• pc 버전을 메인으로 개발하고 태블릿, 모바일을 고려해서 미디어 쿼리를 추가하거나(desktop-first) 모바일 버전을 메인으로 개발하고 태블릿, pc를 고려해서 미디어 쿼리를 추가한다(mobile-first)

Feedback

• 반응형 웹 디자인을 할 때 미디어 타입인 screen and를 꼭 붙여야 하는지 알고싶다
• 다음으로 '인터랙티브 자바스크립트' 코드잇 콘텐츠를 수강할 예정이다

Reference

• Using media queries - CSS: Cascading Style Sheets | MDN
• Mobile-First vs Desktop-First Media Queries | Joe Galley
• 반응형 웹 퍼블리싱 - HTML/CSS 강의 | 코드잇