PC, 스마트폰, 태블릿 등등 다양한 디바이스들이 웹브라우저를 지원하면서 화면의 크기에 따라 유연하게 컨텐츠를 조절하는 기술이 더욱 중요하게 되었다. 이를 가능하게 하는 기술이 바로 미디어쿼리(Media Query)다. 다음의 코드를 보자.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
border: 10px solid green;
font-size: 60px;
}
@media(min-width:1200px){
div{
display:none;
}
}
</style>
</head>
<body>
<div>
Sugar
</div>
</body>
</html>
위 코드에서 보다시피 미디어쿼리의 기본문법구조는 다음과 같다는 것을 알 수 있다.
@media (조건) {
스타일
}
이제 좁은화면 스타일링을 해보자. 휴대폰처럼 작은화면에서만 'SUGAR'라는 단어가 보이도록 하고 싶다면 위 코드처럼 min-width 조건문을 넣어주면 된다. min-width : 1200px는 screen width > 1200px라는 부등식과 같다. 즉, 1200px보다 화면이 커지는 순간 diplay : none을 적용한다. 직접 코드를 쳐서 결과를 확인해보자!
정말 화면의 크기가 1200px를 넘어가는 순간 단어는 사라진다. 이것이 바로 반응형 웹디자인이다.
min과 max를 이용해 다양한 범위를 설정해 줄 수 있다. 다음의 코드를 보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
}
div {
background-color: teal;
width: 200px;
height: 200px;
}
@media screen and (min-width: 500px) and (max-width: 1000px) {
div {
background-color: red;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
범위를 보면 (min-width: 500px) and (max-width: 1000px) 라고 쓰였는데 이는 500px < width < 1000px와 같다.
저 범위 내에서는 배경색이 빨간색으로 변한다는 의미이다.
크롬 개발자 도구는 device toolbar기능을 제공한다. F12를 눌러 개발자 모드로 들어가보자.
파란색으로 동그라미 친 부분을 보면 device toolbar기능을 사용할 수 있다. 들어가보면
다음과 같이 디바이스별 화면크기를 제공한다. 이를 통해 좀 더 수월한 반응형 웹디자인을 설계할 수 있다!
우리가 사용할 수 있는 모든 media query는 다음의 사이트에 모두 정리되있다. 유용하게 사용하도록 하자!
https://developer.mozilla.org/ko/docs/Web/CSS/Media_Queries/Using_media_queries
미디어 쿼리 사용하기 - CSS: Cascading Style Sheets | MDN
미디어 쿼리는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용합니다.
developer.mozilla.org
'WEB > HTML&CSS' 카테고리의 다른 글
| [HTML/CSS] #13.Pseudo Selector (0) | 2021.12.27 |
|---|---|
| [HTML/CSS] #12. position: fixed, relative, absolute (0) | 2021.12.10 |
| [HTML/CSS] #10.flexbox (0) | 2021.12.10 |
| [HTML/CSS] #9.그리드 (0) | 2021.12.09 |
| [HTML/CSS] #8.박스 모델 (0) | 2021.12.05 |
