미디어 쿼리(media query)
반응형웹
하나의 웹사이트에서 pc, 스마트폰, 태블릿 등 접속하는 디스플레이 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 방법
@media 매채유형 and (속성에 대한 조건){
css 코드 ...
}
매체유형
all: 모든 매체유형
screen: 컴퓨터, 태블릿, 스마트폰..
print: 프린터
speech: 스크린 리더<head>
<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>
<head>
<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.png" alt="페이스북">
<img src="./images/youtube.png" alt="유튜브">
<img src="./images/instagram.png" alt="인스타그램">
<img src="./images/twitter.png" alt="트위터">
</section>
<section id="desc" class="text">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Commodi nulla ipsam illo quia odio ut! Ad quasi earum dolorum consectetur voluptatem est facilis? Amet eos, quidem voluptatum aut quasi explicabo?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Commodi nulla ipsam illo quia odio ut! Ad quasi earum dolorum consectetur voluptatem est facilis? Amet eos, quidem voluptatum aut quasi explicabo?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Commodi nulla ipsam illo quia odio ut! Ad quasi earum dolorum consectetur voluptatem est facilis? Amet eos, quidem voluptatum aut quasi explicabo?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Commodi nulla ipsam illo quia odio ut! Ad quasi earum dolorum consectetur voluptatem est facilis? Amet eos, quidem voluptatum aut quasi explicabo?</p>
</section>
</div>
<footer>
<p>copyright 2024 by 이현우</p>
</footer>
</div>
</body>
# CSS
* {
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: 750px;
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;
}
}
em / rem
상대적인 크기를 정하는 단위
em
- 부모 요소 크기의 몇 배 인지를 단위로 설정
pc의 일반 텍스트 크기: 16px = 1em
모바일의 일반 텍스트 크기: 12px = 1em
HTML
<div id='hello'> <!-- 32px -->
<div>안녕하세요!</div> <!-- 32px = 1em -->
**## css 에서 em의 단위를 설정했을 경우, html코드 안에서는 해당 사이즈를 1em으로 인식한다.
</div>
CSS
#hello { font-size: 2em; }rem
- 문서의 최상위 요소(html)의 몇 배 인지를 크기로 설정
HTML
<html>
<body>
<div id='hello'> <!-- 32px -->
<div>안녕하세요!</div> <!-- 32px = 1em -->
</div>
</body>
</html>
CSS
html { font-size: 2rem } /* 16 * 2px */'Web' 카테고리의 다른 글
| [ HTML ] CSS 2D + 과제 (0) | 2024.04.12 |
|---|---|
| [ HTML ] CSS 우선순위 (0) | 2024.04.12 |
| [ HTML ] CSS Float, Flex (0) | 2024.04.11 |
| [ HTML ] CSS Position ( 위치지정방식 ) (0) | 2024.04.09 |
| [ HTML ] CSS의 배경요소 + 과제 (0) | 2024.04.09 |