CSS - 미디어 쿼리

 미디어쿼리란, pc뿐 아니라 모바일과 태블릿에도 대응되는 웹사이트를 만들기 위한 CSS구문이다.

 

브라우저 가로폭의 최소와 최대 사이즈를 지정하여,

그 사이즈에 맞는 브라우저 사이즈의 경우, 다른 css 속성을 입히는 것이다.

 

아래 코드를 이용하여 미디어 쿼리를 작성할 수 있다.

@media (min-width: 최소) and (max-width: 최대) { ... } 
/* 브라우저의 너비가 최소~최대 범위에 포함되면 중괄호 속 속성을 적용한다.*/

.media {
    width: 500px; 
    height: 500px;
    background-color: black;  /* 기본 속성은 너비와 높이가 500px, 배경은 black */
}
@media (min-width: 300px) and (max-width: 900px) {  /* 브라우저 width가 300~900px 일 때 */
    width: 300px;
    height: 300px;
    background-color: blue;    		/* 너비와 높이가 300px, 배경이 blue 적용 */
}

 

또한 미디어쿼리가 제대로 작동하려면 html파일에 아래 코드가 필요하다.

<meta name="viewport" content"width=device-width, initial-scale=1,0">

viewport: 화면 상에 표시되는 영역을 의미하며, 너비와 배율을 설정

width=device-width: viewport의 가로폭은 디바이스의 가로폭

initial-scale=1.0 : 비율은 1.0을 의미