미디어 쿼리
CSS2.1 부터 미디어 타입으로 단말기 종류에 따라 각각 다른 스타일을 적용시키는 게 가능해졌습니다. 그러나 기기의 특성을 정확히 판단하기 어렵다는 단점 때문에 널리 사용되지 않았으나, CSS3부터는 이 미디어 타입을 개선하여 좀 더 구체적인 조건으로 필요한 스타일을 적용할 수 있도록 하였습니다. 이런 미디어 쿼리는 반응형 웹 디자인의 핵심 부분입니다. 뷰포트(브라우저 창)의 크기에 따라 서로 다른 조판을 생성할 수 있기 때문입니다. 이번 챕터에서는 미디어 쿼리에 대해 학습하도록 하겠습니다.
미디어 쿼리 적용법
미디어 쿼리를 적용하는 방법에는 다음 방법들이 있습니다.
<link href="css파일이름.css" media="screen and (min-width: 400px) and (max-width: 1000px)" rel="stylesheet">
<style type="text/css" media="screen and (min-width: 400px) and (max-width: 1000px)">
/* 여기 css를 작성합니다. */
</style>
CSS 파일을 HTML 파일에 적용하던 것처럼 태그 안에 태그를 위치 시킵니다. 다른 css 파일을 적용할 때와 다른 점은 미디어 속성을 사용하여 조건을 지정한다는 점입니다. 미디어 속성 내 해당 조건을 만족할 때에만 해당 css 파일을 불러오게 됩니다.
CSS 파일 혹은 태그 안에서 직접 미디어 쿼리 작성
혹은 CSS 파일 안 또는 태그 안에서 직접 미디어 쿼리를 작성하여 해당 미디어 쿼리의 조건을 만족할 때 스타일을 적용시키는 방법도 있습니다.
이제 미디어 쿼리를 어떻게 작성해야 하는지 살펴보겠습니다.
미디어 쿼리 구문
@media 미디어 타입 (조건(너비 및 높이)) {
(CSS 입력하는 부분)
}
--예제
@media screen (max-width: 400px) {
body {
color: red;
}
}
미디어 쿼리의 기본적인 구조는 다음과 같습니다.
미디어 타입 : 코드가 어떤 미디어를 위한 것인지 브라우저에 알려줍니다.
조건(너비 및 높이) : 지정한 창의 너비나 높이를 기준으로 기준이 만족되면 스타일이 적용되고, 만족되지 않으면 적용되지 않습니다.
CSS 입력하는 부분 : 조건문을 통과하고, 미디어 타입이 올바른 경우 스타일이 적용 됩니다.
미디어 타입(Media Type)
지정할 수 있는 미디어 타입은 여러 종류가 있습니다.
all : 모든 미디어 타입
print : 프린터
screen : 컴퓨터 화면
speech : 스크린 리더
이 외에도 다양한 타입이 있으나 실무에서 자주 쓰이는 타입은 all, print, screen 정도이며, 그 중에서도 screen이 대부분입니다. 화면을 출력하는 디스플레이가 있는 미디어들은 대개 screen 타입에 속하기 때문에 현실적으로 고려해야 하는 미디어는 전부 여기에 해당하기 때문입니다.
조건(너비 및 높이)
반응형 디자인을 만들기 위해 가장 많이 사용하는 기능은 뷰포트 너비이며, min-width와 max-width, width 등의 미디어 기능을 활용해 뷰포트가 특정 너비 이상 또는 이하인 경우 CSS를 적용할 수 있습니다.
@media screen and (width: 600px) {
body {
color : red;
}
}width(혹은 height)는 브라우저의 창 크기에 사용할 수 있습니다. 따라서 min- 혹은 max- 접두사를 붙이게 되면 최소값인지 최대값인지 표시할 수 있습니다.
@media screen and (max-width: 400px) {
body {
color: blue;
}
}
