[CSS] ⑥ 반응형 웹을 위한 미디어 쿼리

 

▶반응형 웹을 위한 미디어 쿼리

미디어 쿼리를 사용하면 콘텐츠 자체를 변경하지 않고 장치의 해상도, 뷰포트의 너비, 미디어의 유형 같은 조건에 따라 스타일을 지정할 수 있습니다.

데스크톱과 모바일, 태블릿 등 화면의 크기에 따라 다른 스타일을 지정하거나 인쇄, 음성 장치 등의 조건에 따라 다른 스타일을 적용할 수 있습니다.

미디어 쿼리 작성은 크게 CSS 파일 내부에 작성하거나 <link>나 <style>에 media 속성으로 작성하는 방식으로 나뉩니다.

 

각 스타일은 media 속성에 작성된 조건에 해당될 때 적용됩니다.

하지만 css 파일(스타일 시트)은 조건의 참, 거짓 여부와는 상관없이 다운로드 되니, 이 점을 주의해야 합니다.

<link
	rel="stylesheet"
    media="screen (min-width: 300px)"
    href="main.css" />
    
<style media="screen (min-width: 300px)">
/*...*/
</style>

 

미디어 쿼리는 미디어 타입과 미디어 기능을 기준으로 동작합니다.

두 조건이 모두 일치할 때 해당 코드가 동작합니다.

미디어 타입에는 모든 장치(all), 인쇄미디어(print), 화면(screen) 등이 존재합니다.

/* 미디어 타입이 screen일 때 적용됩니다. */
@media screen {
	/*...*/
}

 

미디어 기능(feature)은 width나 height 등 장치의 환경 및 특성을 나타냅니다.

이 값은 미디어 타입과 다르게 괄호로 묶어서 나타냅니다.

min-과 max-를 이용해 최소, 최대 조건을 명시할 수도 있습니다.

max이면 "이하"일 때, min이면 "이상"일 때 스타일을 적용합니다.

/* 장치의 너비가 700px 이상일 때 적용됩니다. */
@media (min-width: 700px) {
	/*...*/
}

 

모던 브라우저에서는 >, =, < 등의 비교 연산자를 사용하여 min, max를 이용한 조건과 동일하게 작성할 수 있습니다.

범위 연산자를 사용하면 좀 더 직관적으로 작성할 수 있다는 장점이 있지만 아직 많은 브라우저에서 지원되지 않아 지원 여부를 확인한 뒤 사용해야 합니다.

/* 장치의 너비가 700px 이상일 때 적용됩니다. */
@media (width >= 700px) {
	/*...*/
}

 

미디어 타입과 기능은 ',', and, not, only 등의 연산자로 이어서 작성합니다.

/*
 * 생략 시 모든 타입의 장치를 의미합니다.
 * 700px 이상일 때 그리고 뷰포트의 방향이 가로일 때 해당 조건을 실행합니다.
*/
@media (min-width: 700px) and (orientation: landscape) {
	div {
    	border: 1px solid #ccc;
    }
}

 

 

---

여기까지 미디어 쿼리에 대해 알아보았습니다 :)