CSS์ ๋ฏธ๋์ด์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํด์ ๋ฐ์ํ ์น ํ์ด์ง ๋ง๋ค๊ธฐ
(ํ๋ฉด ํฌ๊ธฐ์ ๋ฐ๋ผ ๊ธ์จ ๋ด์ฉ๊ณผ ์๊น์ด ๋ฌ๋ผ์ ธ์)
CSS์ ๋ฏธ๋์ด์ฟผ๋ฆฌ๋ฅผ ์ด์ฉํด์ ํด์๋์ ๋ฐ๋ฅธ ์์๊ณผ ๋ฉํธ์ ๋ณ๊ฒฝ์ ์ฝ๋ฉํ๋ค.
๊ฒฐ๊ณผ์ ์ผ๋ก , ๋ ๊ฐ์ง ๋ฐฉ์์ผ๋ก ์ฝ๋ฉ์ ํ๋ค.
์ฒ์์ ๋ฌด์์ ํค๋ฉ์ ํ๋ฉฐ ์ฝ๋ฉ์ ํ๋๋ฐ..
์์ฑํ๊ณ ๋ณด๋, ์์ฌ์ด ๋ง์์ด ๋ค์๋ค.
์ ์ง ์ด ๊ฒ๋ณด๋ค๋ ๋ ๋์ ๊ตฌ์กฐ๋ก๋ ๋ง๋ค ์ ์์ ๊ฒ ๊ฐ์๋ค.
๊ฒฐ๊ตญ, ๋ ๋ฒ์งธ์๋ ์ฌ๋ฌ ์๋ฃ๋ฅผ ๊ตฌ๊ธ๋ง ํด์ ์ฝ๋ ๊ตฌ์กฐ๋ฅผ ๊ฐ์ ํ ์ ์์๋ค.
display: inherit; ์ญ์ ์๋ ๊ฒ์ด ํ์ด๋ค.
*๋ด ๋
ธํธ๋ถ ํด์๋๋ฅผ ๊ธฐ์ค์ผ๋ก ๋ง๋ค์๋ค. ์ค์ ํด์๋์๋ ์ฐจ์ด๊ฐ ์๋ค.๐
์ฒ์ ์์ฑํ ์ฝ๋
<HTML>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="./cf_origin.css">
<title>HTML & CSS 04-11-01</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<intro class="intro">
<div class="top"><h1>์ฌ๋ฌ ํ๋ฉด ํฌ๊ธฐ๋ก ์ดํด๋ณด์ธ์!</h1></div>
<div class="bt">
<div class="bt1"><p>์ผ๋ฐ PC</p></div>
<div class="bt2"><p>์ ํด์๋ PC</p></div>
<div class="bt3"><p>์ผ๋ฐ ํ๋ธ๋ฆฟ</p></div>
<div class="bt4"><p>์ ํด์๋ ํ๋ธ๋ฆฟ</p></div>
</div>
</intro>
</body>
</html>
<CSS>
body {
background-color: rgb(247, 245, 180);
}
.top {
text-align: center;
position: relative;
margin-top: 500px;
font-size: 20px;
color: white;
}
.bt {
text-align: center;
position: relative;
font-size: 30px;
color: white;
}
@media all and (min-width:1501px) and (max-width:2000px) {
body {
background-color: rgb(8, 31, 105);}
.bt2 {
display: none;
}
.bt3 {
display: none;
}
.bt4 {
display: none;
}
}
@media all and (min-width:1000px) and (max-width:1500px) {
body {
background-color: rgb(7, 121, 64);
}
.bt1 {
display: none;
}
.bt3 {
display: none;
}
.bt4 {
display: none;
}
}
@media all and (min-width:600px) and (max-width:1000px) {
body {
background-color: rgb(131, 9, 76);
}
.bt1 {
display: none;
}
.bt2 {
display: none;
}
.bt4 {
display: none;
}
}
@media all and (max-width:600px) {
body {
background-color: rgb(241, 179, 7);
}
.bt1 {
display: none;
}
.bt2 {
display: none;
}
.bt3 {
display: none;
}
}
๊ฐ์ ํ ์ฝ๋
<HTML>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="./cfstyle.css">
<title>HTML & CSS 04-11-01</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<intro class="intro">
<h1>์ฌ๋ฌ ํ๋ฉด ํฌ๊ธฐ๋ก ์ดํด๋ณด์ธ์!</h1>
<div class="bt1"><p>์ผ๋ฐ PC</p></div>
<div class="bt2"><p>์ ํด์๋ PC</p></div>
<div class="bt3"><p>์ผ๋ฐ ํ๋ธ๋ฆฟ</p></div>
<div class="bt4"><p>์ ํด์๋ ํ๋ธ๋ฆฟ</p></div>
</intro>
</body>
</html>
<CSS>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: rgb(247, 245, 180);
}
.intro{
display: flex;
flex-direction: column;
height: 100vh;
color: white;
align-items: center;
justify-content: center;
}
div {
font-size: 30px;
display: none;
}
@media all and (min-width:1501px) and (max-width:2000px) {
body {
background-color: rgb(8, 31, 105);}
.bt1 {
display: inherit;
}
}
@media all and (min-width:1000px) and (max-width:1500px) {
body {
background-color: rgb(7, 121, 64);
}
.bt2 {
display: inherit;
}
}
@media all and (min-width:600px) and (max-width:1000px) {
body {
background-color: rgb(131, 9, 76);
}
.bt3 {
display: inherit;
}
}
@media all and (max-width:600px) {
body {
background-color: rgb(241, 179, 7);
}
.bt4 {
display: inherit;
}
}
๊ฒฐ๊ณผ
์ฒ์ ์์ฑํ ์ฝ๋
See the Pen CF OG by Kong Yang (@Kong-Yang) on CodePen.
๊ฐ์ ํ ์ฝ๋
See the Pen CF by Kong Yang (@Kong-Yang) on CodePen.
