๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
HTML + CSS ์‹œ๋ฆฌ์ฆˆ๐Ÿ•ธ/HTML & CSS ์‹œ๋ฆฌ์ฆˆ(V 1.0)

๋ฐ˜์‘ํ˜• ๊ทธ๋ฆฌ๋“œ | HTML&CSS ์‹œ๋ฆฌ์ฆˆ 023

by @ENFJ 2021. 7. 28.

๋ฐ˜์‘ํ˜• ๊ทธ๋ฆฌ๋“œ - ๋„์•ˆ

 


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 : ๋ธŒ๋ผ์šฐ์ € ํฌ๊ธฐ๋ฅผ ์ค„์ด๊ฑฐ๋‚˜ ๋Š˜๋ฆฌ๋ฉด ์ž๋™์œผ๋กœ ๋ ˆ์ด์•„์›ƒ์ด ๋ฐ”๋€Œ๋Š”๋ฐ ์ด๊ฑธ ๋ฐ˜์‘ํ˜• ์›น์ด๋ผ๊ณ  ํ•œ๋‹ค.

๋ฐ˜์‘ํ˜• ์›น์„ ๋งŒ๋“ค๋ฉด ๋”ฐ๋กœ ํƒœ๋ธ”๋ฆฟ, ๋ชจ๋ฐ”์ผ ๋ฒ„์ ผ์˜ ์›น์„ ๋งŒ๋“ค์ง€ ์•Š์•„๋„ ๋œ๋‹ค๋Š” ์žฅ์ ์ด ์žˆ๋‹ค.