28

Media query에 대해서 알아보자

미디아 쿼리는 CSS의 문법 중 하나이며, 반응형 디자인을 사용할 수 있도록 해준다 이것이 미디아쿼리~~~

기본적인 사용 방법

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

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

모바일우선

모바일우선 - min-width 사용 (최소 ~ 부터 적용)
작은 가로폭부터 큰 가로폭 순서로 만드는 것
※ 모바일 = 작다 = min, 모바일기기는 해상도가 작기 때문에 작은게 먼저 조건에 부합

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

데스크탑우선

데스트탑우선 - max-width 사용 (최대 ~ 까지 적용)
큰 가로폭부터 작은 가로폭 순서로 만드는 것
※ desktop =크다 = max, 데스크탑은 해상도가 크기 때문에 큰게 먼저 조건에 부합

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