#1 ์๊ณ ๋ฆฌ์ฆ
#1-1
ํ๋ฉด ํฌ๊ธฐ์ ๋ค์์ฑ์ ๊ณ ๋ คํ๋ค๋ ๋ง์ด ๊ผญ ๋ค๋ฅธ ํ๋ซํผ๋ผ๋ฆฌ์ ๋ค์์ฑ๋ง์ ์๋ฏธํ์ง ์๋๋ค. PC์์ ์น ํ์ด์ง๋ฅผ ๋ณผ ๋ ์ธํฐ๋ท ์ฐฝ์ ์ต๋ํํด์ ๋ณด์ง ์๊ณ , ์๋ฅผ ๋ค๋ฉด ํ๋ฉด ์ข์ฐ ๊ฐ๊ฐ์ ํญ์ ์ค์ธ ์ธํฐ๋ท ์ฐฝ์ ํ๋์ฉ ์ผ ๋์ ๊ฒฝ์ฐ๊ฐ ์๋ค. ์ด๋, ๊ทธ์ ๋ง๋ ์ ์ ํ ๋์์ ๋ฏธ๋์ด ์ฟผ๋ฆฌ๊ฐ ์ํํ ์ ์๋ค.
#1-2
#2 ์ฝ๋
#2-1 HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>๋ฏธ๋์ด ์ฟผ๋ฆฌ (Media Queries)</title>
<link rel="stylesheet" href="./media-queries-practice.css">
</head>
<body>
<div id="myBox">
<h2>Media Queries</h2>
</div>
</body>
</html>
#2-2 CSS
@media screen and (max-width: 767px) { /* width <= 767*/
body {
background-color: beige;
}
#myBox {
background-color: yellow;
text-align: right;
font-size: 20px;
font-style: none;
transform: scaleY(-1);
}
}
@media screen and (min-width: 768px) and (max-width: 1023px) { /* (768 <= width) and (width <= 1023) */
body {
background-color: brown;
}
#myBox {
background-color: rgb(201, 112, 112);
text-align: center;
font-size: 30px;
font-style: italic;
transform: none;
}
}
@media screen and (min-width: 1024px) { /* 1024 <= width */
body {
background-color: burlywood;
}
#myBox {
background-color: green;
text-align: left;
font-size: 40px;
font-style: none;
transform: none;
}
}
@media print {
body {
background-color: greenyellow;
}
#myBox {
background-color: coral;
text-align: center;
font-size: 50px;
font-style: italic;
transform: scaleX(-1);
}
}
#3 ์น ํ์ด์ง
media-queries-practice.html
0.00MB
๋ชจ๋ ์ฝ๋๋ฅผ ํ๋์ ํ์ผ์ ํฉ์ณ ๋ฃ์๋ค.
#4 ์์ฝ
๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ฅผ ํตํด์, ํ๋ฉด ํฌ๊ธฐ ํํธํ์ UI์ ์ผ๋ก ๋์ํ ์ ์๋ค.