728x90
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/*๊ธฐ๋ณธ๋ง์ง์ ์ญ์ ํ๋ ๋ฐฉ๋ฒ*/
*{
margin: 0;
padding 0;
}
header{
background-color: #e2c100;
margin: 10px auto; /*์์ง margin 10px ์ข์ฐ๋ง์ง auto ์ค๊ฐ๋ง์ถค */
border: 1px solid #000000; /*solid ์ค์ */
padding: 5px;
width: 700px;
height: 100px;
}
main {
background-color: #a6ae24;
margin: 0 auto;
border-bottom: 1px solid #000000;
padding: 20px 0 20px 0; /*์ผ์ชฝ ์ค๋ฅธ์ชฝ ์ ์๋ ์*/
width: 500px;
height: 150px;
}
#box1{
background-color: #ff8000;
width:250px;
height:120px;
float:left;
}
#box2{
background-color: #be81f7;
width:250px;
height:120px;
float:left;
}
footer{
background-color: #75c1e3;
margin: 30px auto;
border: 3px dotted #000000;
padding: 20px;
width: 650px;
height: 50px;
}
</style>
</head>
<body>
<header>
<p>header ์์ญ</p>
</header>
<main>
<p>mine ์์ญ</p>
<div>
<p id="box1">box 1</p>
<p id="box2">box 2</p>
</div>
</main>
<footer>
<p>footer ์์ญ</p>
</footer>
</body>
</html>
'๐ HTML\CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| ์นํ์ค(Web Standards) (0) | 2021.06.29 |
|---|---|
| ๐ ๋ค์ด๋ฒ ๋ก๊ทธ์ธ ์ฐฝ ๋ง๋ค๊ธฐ ๐ (0) | 2021.03.17 |
| ํ๋ฉด ๋๋๊ธฐ / ์ปฌ๋ฌ๋ธ๋ญ ๋ง๋ค๊ธฐ (0) | 2021.02.26 |
| Table์ CSS์ ์ฉ (0) | 2021.02.25 |
| List ์ CSS ์ ์ฉ, ์ด๋ฏธ์ง ์ถ๊ฐ (0) | 2021.02.25 |
๋๊ธ