미디어 쿼리(media query)
반응형웹
하나의 웹사이트에서 pc, 스마트폰 태블릿 등 접속하는 디스플레이 종료에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 방법
@media 매체유형 and (속성에 대한 조건) {
css 코드 ...
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>미디어쿼리1</title>
<style>
body { background-color: deeppink; }
@media screen and (min-width: 800px) {
body { background-color: deepskyblue;}
}
</style>
</head>
<body>
<h2>미디어쿼리1</h2>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>미디어쿼리2</title>
<link rel="stylesheet" href="./css/media.css">
</head>
<body>
<div id="container">
<header>
<nav>
<ul>
<li>인스타그램</li>
<li>유튜브</li>
<li>페이스북</li>
<li>트위터</li>
</ul>
</nav>
</header>
<div id="contents">
<section id="intro">
<img src="./images/facebook_media_social_icon.png" alt="페이스북">
<img src="./images/instagram_icon.png" alt="인스타그램">
<img src="./images/twitter new logo_icon.png" alt="트위터">
<img src="./images/youtube_icon.png" alt="유튜브">
</section>
<section id="desc" class="text">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. A ullam magni rem, deserunt, facilis doloremque ab vel dolore veniam laborum nemo voluptatum sequi, velit numquam sit minus. Sint, facilis dicta!Lorem ipsum dolor sit amet consectetur adipisicing elit. A ullam magni rem, deserunt, facilis doloremque ab vel dolore veniam laborum nemo voluptatum sequi, velit numquam sit minus. Sint, facilis dicta!Lorem ipsum dolor sit amet consectetur adipisicing elit. A ullam magni rem, deserunt, facilis doloremque ab vel dolore veniam laborum nemo voluptatum sequi, velit numquam sit minus. Sint, facilis dicta!
</p>
</section>
</div>
<footer>
<p>copyright 2024 by 송윤섭</p>
</footer>
</div>
</body>
</html>* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
width: 100%;
background-color: black;
margin-bottom: 20px;
}
nav > ul {
height: 50px;
list-style: none;
color: gold;
font-size: 12px;
}
nav > ul > li {
float: left;
padding: 10px;
margin: 5px 5px;
}
/*
구형폰: 320px;
일반폰: 360px ~
*/
nav, #contents {
width: 320px;
margin: 0 auto;
}
#intro > img {
width: 100%;
padding: 10px;
}
#desc {
width: 100%;
padding: 10px;
line-height: 1.5;
}
footer {
width: 100%;
height: 50px;
padding: 10px;
background-color: black;
color: white;
}
footer > p {
text-align: center;
font-size: 16px;
line-height: 25px;
}
/* 태블릿: 768px ~ */
@media screen and (min-width: 768px) {
nav > ul {
font-size: 20px;
height: 80px;
}
nav > ul > li {
margin: 20px 25px;
}
nav, #contents {
width: 760px;
margin: 0 auto;
}
#intro {
width: 100%;
}
#intro > img {
width: 22%;
padding: 10px;
}
#desc {
width: 100%;
padding: 10px;
margin: 10px auto;
}
footer {
height: 70px;
padding: 10px;
}
footer > p {
font-size: 20px;
line-height: 50px;
}
}
/* 데스크탑: 1024px ~ */
@media screen and (min-width: 1024px) {
nav, #contents {
width: 1000px;
margin: 0 auto;
}
#intro > img {
width: 10%;
padding: 10px;
float: left;
margin-right: 20px;
}
#desc {
height: auto;
font-size: 20px;
padding: 10px;
}
footer {
clear: both;
}
}
매체유형
all: 모든 매체
screen: 컴퓨터, 태블릿, 스마트폰 ..
print: 프린터
speech: 스크린 리더
em과 rem 특징
상대적인 크기를 정하는 단위
em
- 부모 요소 크기의 몇 배 인지를 단위로 설정
pc의 일반 텍스트 크기: 16px = 1em
모바일의 일반 텍스트 크기: 12px = 1em
HTML <div id='hello'> <!-- 32px --> <div>안녕하세요</div> <!-- 32px = 1em --> </div>
CSS
#hello { font-size: 2em; }rem
- 문서의 최상위 요소(html)의 몇 배 인지를 크기로 설정HTML
<html>
<body>
<div id='hello'>
<div>안녕하세요</div> <!-- 32px -->
</div>
</body>
</html>
CSS
#hello { font-size: 2rem; } /* 16 * 2px */```
'코딩 > Web' 카테고리의 다른 글
| 자바스크립트 JavaScript (1) | 2024.04.15 |
|---|---|
| CSS 우선순위와 Custom Properties, 애니메이션 (1) | 2024.04.12 |
| CSS 레이아웃, flex (0) | 2024.04.11 |
| CSS z-index, float, clear (0) | 2024.04.11 |
| CSS Position (0) | 2024.04.09 |
