미디어 쿼리란?
미디어 쿼리는 화면 크기에 따른 각각의 속성 값을 지정하여, 여러가지 화면을 구성하는 기술입니다.
@media only all and (조건문) {실행문}
- @media: 미디어 쿼리가 시작됨을 표시합니다.
- only: 미디어 쿼리 구문을 해석하라는 명령어입니다.(생략가능)
- all: 미디어 쿼리를 해석해야 할 대상을 나타냅니다. (생략가능)
> all : 모든 미디어 유형에서 사용할 CSS를 정의합니다.
> print : 인쇄 장치에서 사용할 CSS를 정의합니다.
> screen : 컴퓨터 스크린에서 사용할 CSS를 정의합니다.
> aural : 화면을 읽어 소리로 출력해주는 장치에서 CSS를 정의합니다.
> tv : TV에서 사용할 CSS를 정의합니다.
> handheld : 손에 들고 다니는 장치를 사용할 CSS를 정의합니다.
> projection : 프로젝트를 위한 사용할 CSS를 정의합니다.
- and: 앞과 뒤의 조건을 나타냅니다. (생략가능)
- (조건문): 해당 조건을 설정 할 수 있습니다.
- (실행문): 조건에 따른 실행을 설정합니다.
다음과 같이 CSS 에 미디어 쿼리를 적용합니다.
<style>
body {background: #b71c1c; color: #fff;}
h1::before {content: '1. '}
h1::after {content: ' - 기본'}
/* 화면 너비가 0 ~ 1280px: 피시 */
@media (max-width: 1280px) {
body {background: #880e4f;}
h1::before {content: '2. '}
h1::after {content: ' - 1025px ~ 1280px'}
}
/* 화면 너비가 0 ~ 1024px: 데스크탑 */
@media (max-width: 1024px) {
body {background: #4a148c;}
h1::before {content: '3. '}
h1::after {content: ' - 968px ~ 1024px'}
}
/* 화면 너비가 0 ~ 960px: 노트북 */
@media (max-width: 960px) {
body {background: #311b92;}
h1::before {content: '4. '}
h1::after {content: ' - 769px ~ 960px'}
}
/* 화면 너비가 0 ~ 768px: 타블렛 */
@media (max-width: 768px) {
body {background: #4a148a;}
h1::before {content: '5. '}
h1::after {content: ' - 577px ~ 768px'}
}
/* 화면 너비가 0 ~ 576px: 모바일 */
@media (max-width: 576px) {
body {background: #004d40;}
h1::before {content: '6. '}
h1::after {content: ' - 0 ~ 576px'}
}
</style>