반응형
예제코드
<!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;
border: 1px solid #000000;
padding: 5px;
width: 700px;
height: 100px;
}
main{
background-color: #a6ae24;
margin: 0 auto;
border-bottom: 1px solid #000000;
padding: 20px 0 20px 0; /* top right bottom left */
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>main 영역</p>
<div id='box1'>
<p>box 1</p>
</div>
<div id='box2'>
<p>box 2</p>
</div>
</main>
<footer>
<p>footer 영역</p>
</footer>
</body>
</html>결과
header 영역
main 영역
box 1
box 2
반응형
'프로그래밍 언어 > CSS' 카테고리의 다른 글
| [CSS] div 태그를 이용해서 프레임 나누기 (0) | 2021.06.10 |
|---|---|
| [CSS] 링크 꾸미기 (link 속성/ a:link, a:visited, a:hover, a:active) (0) | 2021.06.10 |
| [CSS] CSS text 속성 (color, text-align, text-transform, direction...) (0) | 2021.06.09 |
| [CSS] CSS란? CCS기초, CSS적용하는 방법 (inline, internal, external) (0) | 2021.06.09 |