오늘은 CSS의 미디어 쿼리에 대해 알아보고자 한다. 반응형 웹 사이트를 만들기 위해서는 미디어 쿼리를 사용하는 것이 필수인데, 미디어 쿼리가 어떤 것인지 알아보고, 실제 CSS 코드를 통해 미디어 쿼리를 적용하는 법에 대해 알아보겠다.
1. 미디어 쿼리란?
미디어 쿼리는, 사용자가 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 CSS가 작동할 수 있도록 도와주는 코드이다. 이는, 반응형 웹 제작에 필수적인 요소로써 컴퓨터 환경 뿐만이 아닌, 스마트폰, 태블릿 환경에서 웹 화면을 보는 현대에는 필수적인 요소가 되었다.
CSS 코드에서, 화면 크기(width)가 550픽셀을 넘어가는 순간 그에 맞는 다른 CSS를 적용시킬 수 있다. 이렇듯 뷰포트에 따라 다른 CSS를 적용시킬 수 있는 것이 미디어 쿼리이다.
2. 미디어 쿼리 작성하기
미디어 쿼리는 기본적으로 CSS에서 작성하지만, HTML 문서에서 먼저 작성해두어야 하는 것이 있다. 그것은 바로 meta 태그. meta tag는 웹 서버와 웹 브라우저간에 상호 교환되는 정보를 정의하는데 사용한다. <head> 태그 안에 삽입되어, 웹 페이지 본문에는 출력되지 않는다. 미디어 쿼리를 사용하기 위해서는 이 meta tag에 이를 위한 코드를 작성하여야 한다. 그 코드는 아래와 같다.
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
meta tag에는 다양한 값을 넣어줄 수 있지만, 여기서는 미디어 쿼리를 설명하니 위 코드에 대해서만 설명하겠다. 위 코드는, viewport 메타태그임을 명시하기 위해 name 속성에 viewport를 주었다. content에는 meta 정보의 내용을 지정하는데 이 때 뷰포트의 넓이(width)를 스크린의 크기에 자동으로 맞추게 설정한다. 이를 위한 코드가 "width=device-width"이다. 그리고 initial scale은 페이지를 처음으로 접속할 때 보여지는 배율을 의미한다.
HTML <head> 태그 내에 위 meta tag를 작성하고 나면 CSS 파일에 비로소 미디어 쿼리를 작성할 수 있다. 미디어 쿼리 작성을 위한 기본 포맷은 아래와 같다.
@media media-type and ( media-feature-rule ) {
/* CSS Code */
}
2-1. @media
미디어 쿼리 작성을 위한 선언문이라고 보면 된다. 미디어 쿼리 작성을 위해서는 반드시 @media를 작성하여야 한다.
2-2. media-type
media-type은 미디어 유형을 지정할 수 있는데, 미디어 쿼리를 적용할 상황이라고 생각하면 편하다. 크게 네 가지가 있다.
| 미디어 타입 | 미디어 쿼리 적용 대상 |
| all | 모든 장치 |
| screen | 화면(뷰포트) |
| 인쇄 결과물 및 인쇄 미리보기 | |
| speech | 음성 합성장치 |
주로 all이나 screen을 자주 사용한다. 위 미디어 쿼리 기본 포맷에서 미디어 타입을 생략하고 바로 규칙을 작성할 수 있는데, 이 경우 all로 인식한다.
2-3. media-feature-rule
미디어 쿼리를 적용시킬 조건을 작성하는 곳이다. 이 곳에서는 뷰포트의 너비가 특정 픽셀 이상이 될 경우 아래의 CSS 코드를 적용시키거나, 가로 모드, 세로 모드와 같은 조건들을 입력할 수 있다. 미디어 쿼리에서 중요한 부분이라 할 수 있다.
3. 실습
미디어 쿼리에 대한 기본적인 설명이 끝났으니 다음은 실제 HTML 태그와 CSS 코드를 통해 미디어 쿼리를 작성해보고 실제 어떻게 동작하는지 살펴보도록 하겠다. 우선 미디어 쿼리 작성을 위해 아래의 HTML 태그를 사용한다.
<div class = "menubox">
<ul class = "menu">
<li>
<a href = "#">
MENU1
</a>
</li>
<li>
<a href = "#">
MENU2
</a>
</li>
<li>
<a href = "#">
MENU3
</a>
</li>
<li>
<a href = "#">
MENU4
</a>
</li>
</ul>
</div>
기본적인 메뉴창이다. 아래는 CSS 코드이다.
* {
box-sizing: border-box;
}
.menubox {
border: 2px solid blue;
width: 15vh;
}
.menu {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
padding: 5px;
}
.menu li {
display: inline-block;
list-style-type: none;
}
.menu li a {
display: block;
padding: 10px 0px;
width: 57.591px;
text-align: center;
}
미디어 쿼리를 작성할 때는 여러 개의 뷰포트를 만들어야 한다. 데스크톱 화면에서의 뷰포트, 태블릿 화면에서의 뷰포트, 모바일 화면에서의 뷰포트.. 이럴 경우 편하게 만들기 위해서는 크기가 작은 화면을 가장 먼저 만들고, 그 다음으로 큰 화면을 제작하는 것이 편하다.
그래서 위 코드는 모바일 뷰포트임을 가장하여 만든 코드이다.
크롬을 활용하여 화면을 확인하니 위와 같이 출력되었다. menubox 클래스를 통해 전체 박스에 테두리를 그려주었고, menu 클래스를 적용한 div에는 flex를 적용하여 정렬하였다. 지금 보이는 뷰포트의 너비는 615px이다. 우리는 min-width를 미디어 쿼리에 적용하여 442px 이상일 경우 메뉴바가 가로로 정렬되도록 설정할 것이다. 이를 위한 코드는 아래와 같다.
@media screen and ( min-width:442px ) {
.menubox {
width: 100%;
padding: 0px;
}
.menu {
flex-direction: row;
justify-content: flex-start;
align-content: center;
margin: 0px;
height: 100%;
}
.menu li {
margin-right: 10px;
}
.menu li a {
display: block;
padding: 15px 0px;
width: 100%;
}
}
@media screen and ( min-width: 442px ) 를 해석하자면, '화면을 대상으로 미디어 쿼리를 적용하는데, 뷰포트의 너비가 442px을 넘어갈 경우 아래 CSS 코드를 적용시키겠다.'라는 의미가 된다.
위 CSS 코드를 적용시킬 경우 웹 브라우저 화면에는 아래와 같이 출력된다.
615px의 너비를 가지는 뷰포트에서 메뉴바의 모습이 바뀐 것을 확인할 수 있다. 이처럼 미디어 쿼리를 활용하여 특정 시점이 되었을 때에만 적용 가능한 CSS 코드를 작성할 수 있다.
그럼 반대로 미디어 쿼리의 조건을 max-width로 설정해보자. max-width로 설정할 경우, min-width와는 반대로 설정한 크기의 너비/높이까지 아래의 CSS 코드를 적용하라는 의미가 된다.
@media screen and ( max-width:442px ) {
.menubox {
width: 100%;
padding: 0px;
}
.menu {
flex-direction: row;
justify-content: flex-start;
align-content: center;
margin: 0px;
height: 100%;
}
.menu li {
margin-right: 10px;
}
.menu li a {
display: block;
padding: 15px 0px;
width: 100%;
}
}
max-width:442px 는 뷰포트의 너비가 442px이 될 때까지 아래 코드를 적용하라는 의미가 된다. 그럴 경우 웹 브라우저의 너비를 442px 이하로 설정하였을 때 어떻게 출력되는지 확인해보자.
이번에는 442px 이하 일때, 메뉴바가 가로로 정렬되었음을 확인할 수 있다. 이와 같이 미디어 쿼리를 사용하면 뷰포트에 따라 다양한 화면을 구성할 수 있다.
오늘은 미디어 쿼리의 기초에 대해 알아보았다. 오늘 포스팅에서 소개한 기능 이외에도 미디어 쿼리에 논리합, 논리곱을 통하여 다양한 조건 속에서 코드를 적용시킬 수 있는 방법 등 더욱 복잡한 방법으로 반응형 웹 페이지를 구성할 수 있다. 다음에도 재미있는 공부거리를 들고 포스팅하도록 하겠다.
P. S 조잡한 글 읽어주셔서 감사합니다! 혹시나 틀린 정보가 있다면 과감한 지적(하지만 욕은 삼가해주시면 감사하겠습니다 ㅎㅎ) 부탁드립니다.
'웹 프로그래밍 > CSS' 카테고리의 다른 글
| <22.06.04> CSS 공부 일지 #10. Position 속성의 Sticky에 대해 알아보자! (0) | 2022.06.04 |
|---|---|
| <22.05.21> CSS 공부 일지 #09. HTML 요소를 이리저리 움직여보자 ㅡ CSS의 transition (0) | 2022.05.21 |
| <22.03.18> CSS 공부 일지 #07. 마지막 남은 display 속성 ㅡ Flex (0) | 2022.03.18 |
| <22.03.17> CSS 공부 일지 #06. CSS로 요소 움직이기! ㅡ position 속성에 대해 (0) | 2022.03.17 |
| <22.03.16> CSS 공부 일지 #05. float 속성 활용하여 정렬하기 (0) | 2022.03.16 |