๋ฐ์ํ ๊ทธ๋ฆฌ๋ - ๋์
HTML
<!DOCTYPE html>
<html>
<head>
<title>๋ฐ์ํ ๊ทธ๋ฆฌ๋</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
</body>
</html>
CSS
body {
margin: 0;
}
#div1 {
background-color: #FF0000;
width: 100%;
height: 60px;
float: left;
}
#div2 {
background-color: #FFA500;
width: 100%;
height: 350px;
float: left;
}
#div3 {
background-color: #FFFF00;
width: 100%;
height: 320px;
float: left;
}
#div4 {
background-color: #008000;
width: 100%;
height: 385px;
float: left;
}
#div5 {
background-color: #0000FF;
width: 100%;
height: 200px;
float: left;
}
#div6 {
background-color: #4B0082;
width: 100%;
height: 200px;
float: left;
}
@media (min-width:768px){
div{
float: left;
}
#div2{
height: 562px;
}
#div3{
height: 282px;
}
#div4{
width: 50%;
height: 360px;
}
#div5{
width: 50%;
height: 180px;
}
#div6{
width: 50%;
height: 180px;
}
@media (min-width:992px){
div{
float: left;
}
#div2{
width: 50%;
height: 700px;
}
#div3{
width: 50%;
height: 350px;
}
#div4{
width: 25%;
height: 350px;
}
#div5{
width: 25%;
height: 175px;
}
#div6{
width: 25%;
height: 175px;
}
๊ฒฐ๊ณผ
1. ๋ชจ๋ฐ์ผ ๋ชจ๋
2. ํ๋ธ๋ฆฟ ๋ชจ๋
3. ๋ฐ์คํฌ ํ ๋ชจ๋
PS : ๋ธ๋ผ์ฐ์ ํฌ๊ธฐ๋ฅผ ์ค์ด๊ฑฐ๋ ๋๋ฆฌ๋ฉด ์๋์ผ๋ก ๋ ์ด์์์ด ๋ฐ๋๋๋ฐ ์ด๊ฑธ ๋ฐ์ํ ์น์ด๋ผ๊ณ ํ๋ค.
๋ฐ์ํ ์น์ ๋ง๋ค๋ฉด ๋ฐ๋ก ํ๋ธ๋ฆฟ, ๋ชจ๋ฐ์ผ ๋ฒ์ ผ์ ์น์ ๋ง๋ค์ง ์์๋ ๋๋ค๋ ์ฅ์ ์ด ์๋ค.
'HTML + CSS ์๋ฆฌ์ฆ๐ธ > HTML & CSS ์๋ฆฌ์ฆ(V 1.0)' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| bootstrap(๋ถํธ์คํธ๋ฉ) ์ ๋ํด | HTML&CSS ์๋ฆฌ์ฆ 024 (2) | 2021.07.28 |
|---|---|
| ์ผํ๋ชฐ ์ฌ์ดํธ ๋ง๋ค๊ธฐ | HTML&CSS ์๋ฆฌ์ฆ 022 (4) | 2021.07.28 |
| ๋ฐฐ๋ฌ ๋ฉ๋ด ์น์ฌ์ดํธ ๋ง๋ค๊ธฐ | HTML&CSS ์๋ฆฌ์ฆ 021 (5) | 2021.07.27 |
| ๋ฐฐ๊ฒฝ์ด๋ฏธ์ง ์ค์ ๋ฐฉ๋ฒ | HTML&CSS ์๋ฆฌ์ฆ 020 (0) | 2021.07.24 |
| ํ ๋๋ฆฌ (border ) ์ ๋ฆฌ!! | HTML&CSS ์๋ฆฌ์ฆ 020 (0) | 2021.07.24 |
