Media Query
Media Query는 반응형 웹(responsive web)을 만들기 위해 반드시 알아야하는 CSS 선언중 하나입니다.
웹 브라우저를 데스크 탑뿐만 아니라 모바일, 태블릿 등 여러 디바이스의 뷰포트에서 웹 브라우저를 이용합니다.
이때 디바이스의 사이즈에 따라서 그에 맞게 화면에 보여주기 위해서 CSS 스타일을 적용을 해놓은 사이트를 반응형 웹 사이트라고 합니다.
반응형 웹 사이트를 만들기 위해서는 반드시 두 가지 요건을 충족해야 합니다.
-
"viewport meta"
-
"media query"
HTML 문서에서는 viewport meta 태그가 필요하고, CSS 문서에는 media query 문이 선언되어야 합니다.
media query를 사용하여 반응형 웹을 만들 때는 모바일부터 시작하는 것이 일반적입니다. 작은 사이즈일 때 어떤 스타일을 표시할지 선언하고 점점 사이즈를 키워 스타일을 작성합니다.
1. viewport meta
viewport는 사용자가 사용하고 있는 브라우저 창의 크기를 viewport 합니다. 그러므로 디바이스의 종류에 따라 viewport의 크기가 서로 다릅니다.
반응형 웹 사이트를 만들기 위해서는 viewport meta 태그가 선언되어야 하는데 바로 아래와 같은 메타 태그가 필요합니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
,,,,
</head>
<body>
,,,,
</body>
</html><meta name="viewport" content="width=device-width" />가 viewport meta 태그입니다.
해석을 하면 "viewport에 관한 정보이며, 웹 페이지의 가로 사이즈는 사용자의 디바이스의 가로 사이즈에 맞춰 달라"는 의미를 갖고 있습니다.
2. media qeuery
CSS media qeury는 다음과 같은 형태를 갖고 있습니다.
@media media-type and (media-feature-rule) {
/* CSS 스타일 코드 작성 ,,, */
}media-type으로 작성 가능한 값들은 all, screen, print, speech가 존재합니다.
media-type은 적용될 미디어 유형을 지정하며 지정하지 않으면 all 로 적용됩니다.
-
all은 모든 장치에 적용됩니다. -
screen은 표시되는 화면, 즉 뷰포트에 적용됩니다. -
print는 인쇄 결과물이나 출력 미리보기 화면에 적용됩니다. -
speech는 음성 장치(스크린 리더)에 적용됩니다.
뷰포트에 적용하기 위해서는 media-type에 all 또는 screen을 작성해주어야 합니다.
media-feature-rule에는 특정 조건이나 규칙을 작성합니다. 이때 특정 조건이나 규칙에 부합되는 경우에만 {,,,}안에 작성된 스타일이 적용됩니다.
일반적으로 max-width나 min-width를 작성하여 조건을 작성하여 뷰포트에 대한 너비에 따라 스타일을 적용합니다. 이때 가로와 세로는 뷰포트에 대한 가로와 세로를 의미합니다.
이외 orientation 속성으로 가로 모드 혹은 세로 모드에 대한 조건을 작성할 수도 있습니다. orientation 속성값이 landscape인 경우 가로 모드, 즉 뷰포트의 세로 길이보다 가로 길이가 더 긴 경우를 의미합니다.
@media screen and (min-width: 768px) {
,,,
}위 코드처럼 @media 키워드를 통해 선언하고 media-type에 screen을 작성하여 뷰포트로 명시해줍니다. 그리고 조건에 뷰포트의 가로 사이즈가 768px, 즉 768px 이상에서는 {,,,}에 작성한 스타일을 적용할 것이라는 의미를 갖고 있습니다.
@media screen and (min-width: 768px) and (max-width: 991px) {
/* 브라우저의 크기가 768px이상 991px 이하일 때 적용될 CSS 스타일 */
}위 코드는 and를 사용하여 여러 조건을 사용하고 있습니다. 위 코드의 경우에는 뷰포트의 가로 너비가 768px 이상이고 991px 이하일 때 해당 스타일을 적용하게 됩니다.
,(콤마)를 작성하면 OR로 동작합니다. 실제로는 조건을 여러 개 나열하기 보다는 여러 break point를 만들어 사용하게 됩니다.
Break Point
media query에서 break point란 스타일이 변경될 분기점을 의미하게 됩니다.
즉, 여러 디바이스에 대응하기 위해서 각 디바이스마다 스타일이 적용될 분기점, break point를 지정해야 합니다. 여러 디바이스에 대응하기 위해 그에 따라 여러 media query와 break point가 필요로 합니다.
일반적으로 태블릿의 break point는 min-width: 768px을 사용합니다. 768px 보다 작은 뷰포트의 경우 모바일 환경 분기점을 의미합니다.
데스크탑의 분기점은 min-width: 1024px을 사용합니다.
즉, 768px 미만은 모바일 환경, 768px 이상 1024px 이하 태블릿 환경, 1024px 초과는 데스크탑 환경 분기점이 됩니다.
/* 모바일 환경, 768px 미만 */
,,,
/* 태블릿 환경 , 768px 이상 1024px 이하 */
@media screen and (min-width: 768px) {
,,,
}
/* 데스크탑 환경, 1024px 이상 */
@media screen and (min-width: 1024px) {
,,,
}위 코드처럼 모바일 환경 스타일부터 작성하고 점차 커지는 식으로 작성하고, 조건을 작성할 때는 min-width 또는 max-width 중 하나만 일관되도록 사용하는 것이 좋습니다.
CSS는 위에서 아래로 해석되므로 모바일 스타일을 태블릿이나 데스크탑 환경 스타일로 덮어씌워 적용됩니다.
