공부 내용

미디어 쿼리 사용 방법에 대해 알아보았다.

미디어쿼리

다양한 디바이스들이 웹브라우징을 지원하면서 뷰포트(viewport) 너비에 따라 유연하게 컨텐츠를 배치하는 기술이 점점 중요해지고 있습니다. 뷰포트의 해상도에 따라 CSS를 분기시키는 미디어쿼리는 반응형 프로젝트에서 반드시 필요한 기법입니다.

1. 기본적인 사용방법

@media (조건문) { 실행코드 }

<link rel="stylesheet" media="all and (조건)" href="desktop.css" >

<link>를 사용하는 방법은 권장하지 않습니다. (브라우저는 모든 css를 내려받기 때문에 사이즈가 커짐)

2. 모바일/데스크톱 우선

모바일우선 - min-width 사용 (최소 ~ 부터 적용)

작은 가로폭부터 큰 가로폭 순서로 만드는 것

모바일기기는 해상도가 작기 때문에 작은게 먼저 조건에 부합

//기본으로 작성되는 CSS는 576px보다 작은 화면에서 작동 됩니다.
// 가로모드 모바일 디바이스 (가로 해상도가 576px 보다 큰 화면에 적용)
@media (min-width: 576px) { ... }

// 태블릿 디바이스 (가로 해상도가 768px 보다 큰 화면에 적용)
@media (min-width: 768px) { ... }

// 데스크탑 (가로 해상도가 992px 보다 큰 화면에 적용)
@media (min-width: 992px) { ... }

// 큰화면 데스크탑 (가로 해상도가 1200px 보다 큰 화면에 적용)
@media (min-width: 1200px) { ... }

데스트탑우선 - max-width 사용 (최대 ~ 까지 적용)

큰 가로폭부터 작은 가로폭 순서로 만드는 것

데스크탑은 해상도가 크기 때문에 큰게 먼저 조건에 부합

// 기본 CSS를 작성합니다.
// 기본으로 작성되는 CSS는 1199px보다 큰 화면에서 작동 됩니다.
// 세로모드 모바일 디바이스 (가로 해상도가 576px 보다 작은 화면에 적용)
@media (max-width: 575px) { ... }

// 가로모드 모바일 디바이스 (가로 해상도가 768px 보다 작은 화면에 적용)
@media (max-width: 767px) { ... }

// 태블릿 디바이스 (가로 해상도가 992px 보다 작은 화면에 적용)
@media (max-width: 991px) { ... }

// 데스크탑 (가로 해상도가 1200px 보다 작은 화면에 적용)
@media (max-width: 1199px) { ... }