접속하는 미디어(device)에 따라 특정 CSS스타일을 사용할 수 있도록 하는 것!
브라우저 창의 너비가 조절될 때마다 화면에 표시되는 column 갯수가 달라지고,
사용하는 디바이스의 크기에 따라 웹사이트의 layout이 바뀌는 것이 그 예시이다.
미디어 쿼리 구문
@media [only|not] 미디어_유형 [and 조건] * [and 조건]
미디어 유형은
all, print, screen, tv, aural, braille, handheld, projection, tty, embossed 가 있다.
미디어 쿼리의 조건 - viewport (가로 너비와 세로 높이)
속성으로는
1. width, height
2. min-width, min-height
3. max-width, max-height 가 있다.
단말기 크기의 viewport를 하나로 통일해 사용하기 위해 "width=device-width"로 주로 사용한다.
<meta name="viewport" content="width=device-width, initial-scale=1">위 코드를 <head>태그 안에 삽입하면 된다.
<head>
<meta charset="utf-8">
<title>Media Queries</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background: url(images/bg0.jpg) no-repeat fixed;
background-size: cover;
}
@media screen and (max-width: 1024px) {
body {
background: url(images/bg1.jpg) no-repeat fixed;
background-size: cover;
}
}
@media screen and (max-width: 768px) {
body {
background: url(images/bg2.jpg) no-repeat fixed;
background-size: cover;
}
}
@media screen and (max-width: 320px) {
body {
background: url(images/bg3.jpg) no-repeat fixed;
background-size: cover;
}
}
</style>
</head>화면 크기를 조정하면 조정된 화면 크기에 따라 해당하는 이미지가 배경화면으로 변경된다.
미디어 쿼리의 조건 - orientation (화면 회전)
1. orientation: portrait : 단말기 세로 방향
2. orientation: landscape : 단말기 가로 방향
위 조건을 미디어 쿼리 구문의 조건에 넣어서 설정할 수 있다.
<head>
<meta charset="utf-8">
<title>Media Queries</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: #eee
}
@media screen and (orientation: landscape) {
body {
background-color: orange;
}
}
@media screen and (orientation: portrait) {
body {
background-color: yellow;
}
}
</style>
</head>
F12를 눌러 형광펜으로 표시한 Toogle device toolbar로 orientation 작동을 확인할 수 있다.
그 밖에, 미디어쿼리 조건은
화면비율(aspect-ratio, min-aspect-ratio, max-aspect-ratio),
단말기 화면 비율(device-aspect-ratio, min-device-aspect-ratio, max-device-aspect-ratio),
색상당 비트 수(color, min-color, max-color) 등이 있다.
미디어 쿼리 중단점 (breakpoint)
서로 다른 css를 적용할 화면 크기
"미디어 쿼리의 조건 - viewport"의 예시 코드 처럼 미디어쿼리로 조건을 나누어 기준을 세우는 것을 말한다.
외부 CSS 파일 연결
1. <link> 태그 사용 - <head> 태그 안에 아래의 두 코드 중 한가지 코드를 삽입하면 된다.
이미지와 비디오, 음성 파일 등과 같이 외부 파일을 로딩하여 사용하는 것과 동일한 방법이다.
<link rel="stylesheet" media="미디어쿼리조건" href="css파일경로/css파일이름.css">2. @import 구문 사용 - <style>태그 안에 삽입하면 된다.
@import url(css파일경로/css파일이름.css) 미디어쿼리조건
미디어쿼리 예시
css파일에서 미디어 쿼리 부분
@media screen and (min-width: 768px) and (max-width: 1719px) {
#container {
width: 570px;
margin: 50px auto;
}
.card {
position: relative;
width: 550px;
height: 250px;
margin: 20px 10px;
border: 1px solid #0f0f0f33;
}
.words {
position: absolute;
width: 200px;
left: 310px;
top: 50px;
text-align: center;
color: #8c8cff;
}
}
@media screen and (min-width: 1720px) {
#container {
width: 1710px;
margin: 50px auto;
}
.card {
position: relative;
float: left;
width: 550px;
height: 250px;
margin: 10px;
border: 1px solid #0f0f0f33;
}
.words {
position: absolute;
left: 310px;
top: 50px;
text-align: center;
width: 200px;
color: #6EE0FF;
}
}<head>태그 안에 <link>태그를 사용하여 따로 생성한 css파일을 불러오는 방법으로 해보았다.
<head>
<meta charset="utf-8">
<title>Media Queries</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../css/style-media-query-practice-web.css" rel="stylesheet" type="text/css">
</head>창 크기를 조정함에 따라 설정한 대로 변경되는 것을 확인할 수 있다.
출처 : Do it! HTML5 + CSS3 웹 표준의 정석 (고경희)
사진 출처 : Pixabay
'HTML5 & CSS3' 카테고리의 다른 글
| HTML & CSS : Flex box로 웹사이트 레이아웃 구성해보기 실습 (0) | 2022.12.19 |
|---|---|
| HTML & CSS #16 : Flex Box Layout (0) | 2022.12.19 |
| HTML & CSS #14 : 반응형 웹 (0) | 2022.12.14 |
| HTML & CSS : 애니메이션 keyframes hover transition 실습 (0) | 2022.12.14 |
| HTML & CSS #13 : CSS 애니메이션 (0) | 2022.12.14 |
댓글