Frontend/HTML
미디어 쿼리
olli2
2021. 12. 6. 14:32
미디어 쿼리
- 화면의 크기나 환경을 감지하여 웹사이트를 변경하는 기술
- 미디어에게 질문하고 감지하여 웹사이트를 변경하는 기술 (미디어의 종류, 미디어 화면의 크기)
- 반응형 웹을 제작할 때 반드시 필요 기술
- 컴퓨터 기기의 환경 또는 종류를 감지해야 그 기기에 맞게 웹사이트의 구조를 바꿀 수 있기 때문
@media [미디어 유형] [and] (조건문) { 실행문 }
- 조건문 : 조건문이 사실일 경우 뒤에 오는 실행문을 수행
- 실행문 : 일반적으로 CSS 코드로 작성
@media all and (min-width:960px) {
body { background:yellow; }
}
미디어 유형
- 생략 가능
- all, print, screen, tv, projection, handheld 등
- 생략 시 all
- 스마트 기기는 screen
미디어 쿼리 사용 시 주의사항
- and 다음에 반드시 공백 있어야 함
- min 접두사는 반드시 크기가 작은 순서대로 작성해야 하고,
- max 접두사를 사용할 때는 반드시 크기가 큰 순서대로 작성해야 함
- 순서가 중요한 이유
- min : 최소 또는 그 이상이라는 뜻으로, 점차 커지는 것을 의미
- max : 최대 또는 그 이하라는 뜻으로, 점차 작아지는 것을 의미
- 미디어 쿼리 사용하여 브라우저 크기 감지 시, 크기 감지 기준 = HTML 문서
미디어 쿼리 예제 - 1 : 문서 내부에 CSS 정의 / min-width 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>미디어 쿼리</title>
<style>
@media all and (min-width:320px) {
body { background:red;}
}
@media all and (min-width:768px) {
body { background:green;}
}
@media all and (min-width:960px) {
body { background:yellow;}
}
* {margin:0 auto; padding:0;}
div {
margin:0 auto;
width:50%;
max-width:420px;
}
img {
margin:100%;
height:auto;
border:solid 1px;
}
</style>
</head>
<body>
<div><img src="image/fashion2.png"></div>
</body>
</html>
미디어 쿼리 예제 - 2 : 문서 내부에 CSS 정의 / orientation (portrait, landscape)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>미디어 쿼리 2 : orientation</title>
<style>
@media screen and (orientation:portrait) {
body { background:red;}
}
@media screen and (orientation:landscape) {
body { background:green;}
}
* {margin:0 auto; padding:0;}
div {
margin:0 auto;
width:50%;
max-width:420px;
}
img {
margin:100%;
height:auto;
border:solid 1px;
}
</style>
</head>
<body>
<div><img src="image/fashion2.png"></div>
</body>
</html>
미디어 쿼리 예제 - 3 : 스마트폰 크기일 경우 스타일 해제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>미디어 쿼리 : 스마트폰에서 스타일 해제</title>
<style type="text/css">
* { margin:0; padding:0;}
body {
width:960px;
margin:0 auto;
overflow:hidden;
}
#menu {
width:260px;
float:left;
}
#section {
width:700px;
float:right;
}
@media screen and (max-width:767px){
/* 스마트폰 사이즈에서는 전부 해제 */
body { width:auto;}
#menu { width:auto; float:none;}
#section { width:auto; float:none;}
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ul>
</div>
<div id="section">
<h1>반응형 웹</h1>
<p>크기 감지 기준은 HTML 문서 크기라는 것
미디어 쿼리를 사용해서 브라우저 크기를 감지할 때, 어떤 대상을 기준으로 크기를 감지하는지 모르고 있는 경우가 대부분임
이처럼 어떤 기준으로 크기를 감지해야 하는지 몰라 웹사이트 제작 시 혼란을 겪는 경우가 많음
미디어쿼리를 사용해서 브라우저의 크기를 감지할 때는 HTML 문서 크기를 기준으로 감지한다는 것</p>
<p>브라우저의 비율에 따라 웹사이트의 구조가 늘어나거나 줄어드는 가변형 레이아웃에서
브라우저 너비에 맞게 이미지나 기타 멀티미디어 요소들을 가변적으로 작동하게 만들어줘야 함
width와 max-width 속성의 차이
width : 100%; 화면의 너비에 맞춰 크기 조정
max-width:100%;
화면의 너비에 맞춰 크기 조정
그러나 멀티미디어 요소 자신의 기본 크기 이상으로는 커지지 </p>
</div>
</body>
</html>
미디어 쿼리 예제 - 4 : 외부 CSS 파일 사용 / 모바일과 PC 다르게
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name=”viewport” content=”width=divice-width, initial-scale=1>
<title>미디어 쿼리 : 외부 css</title>
<style>
div {
margin:0 auto;
width:50%;
}
img {
width:100%;
border:1px solid;
}
</style>
<!-- 모바일용 -->
<link rel="stylesheet" href="mobile.css" media="(max-width:600px)">
<!-- PC용 -->
<link rel="stylesheet" href="pc.css" media="(min-width:600px)">
</head>
<body>
<div><img src="image/fashion2.png"></div>
</body>
</html>