CSS 탐구생활 : 미디어 쿼리 사용하기

 

1. 미디어 쿼리(Media Query)

미디어 쿼리는 반응형 웹을 만들기 위해 사용되며, 태블릿,모바일,데스크탑등 미디어의 유형에 따라 웹사이트의 스타일을 적용할 때 사용된다. 

 

 

2. 미디어 쿼리 사용법

(1) html에서의 세팅

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

-- 먼저 head태그안에 meta태그를 이용하여 뷰포트를 설정해준다.

 

(2) css에서의 세팅

/* mobile 가로*/
@media screen and (min-width:576px){

}

/* tablet */
@media screen and (min-width:768px){

}

/* desktop */
@media screen and (min-width:992px){

}

/* PC */
@media screen and (min-width:1200px){

}

-- 미디어 쿼리 분기점을 나눠준다.(위의 예시는 모바일 퍼스트 기준)

mobile 세로 : ~576px

mobile 가로 : 576px ~ 768px

tablet : 768px ~ 992px

desktop : 992px ~ 1200px

PC : 1200px~

 

이렇게 세팅해주게 되면 미디어쿼리를 사용할 수 있다. 분기점을 위의 예시처럼 잡을 수도 있지만 데스크탑 퍼스트 방식을 이용할 경우에는 min-width 대신 max-width를 사용해주면 된다.