728x90
과제 1 영역 설정
margin : 0 auto; - 중앙으로 설정
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#fullsc{
width : 600px;
height: 600px;
background-color: gray;
}
#left{
width: 200px;
height: 100;
background-color: yellow;
float: left;
}
#center{
width: 200px;
height:600;
background-color: green;
float: left;
}
#right{
width: 200px;
height:300;
background-color: black;
float: left;
}
#leftup{
width: 200px;
height: 500px;
background-color: red;/* 파란색 */
}
#centerup{
width: 200px;
height: 200px;
background-color: blue;/* 파란색 */
}
#rightup{
width: 200px;
height:300px;
background-color: black;
float: left;
}
#leftdown{
width: 200px;
height: 100px;
background-color: yellow;/* 파란색 */
}
#centerdown{
width: 200px;
height: 400px;
background-color: green;/* 파란색 */
}
#rightdown{
width: 200px;
height:300px;
background-color: pink;
float: left;
}
</style>
</head>
<body>
<div id = fullsc>
<div id = left>
<div id = leftup>
</div>
<div id = leftdown>
</div>
</div>
<div id = center>
<div id = centerup>
</div>
<div id = centerdown>
</div>
</div>
<div id = right>
<div id = rightup>
</div>
<div id = rightdown>
</div>
</div>
</div>
</body>
</html>
과제 2 영역 설정, padding , margin : 0 auto 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#border{
width:800px;
height:200px;
background-color: #EABE4D;
border-style: solid;
border-width: 1px;
margin : 0 auto;
}
#main{
width:600px;
height:300px;
background-color: #56D847;
margin : 0 auto;
padding-top: 50px;
}
#box1{
width:300px;
height:200px;
background-color: #EF744F;
border-color: black;
border-style: 1px;
float: left;
margin : 0 auto;
}
#box2{
width:300px;
height:200px;
background-color: #45ABD3;
border-color: black;
border-style: 1px;
float: left;
margin : 0 auto;
}
#footer{
width:600px;
height:100px;
background-color: #4CE0C2;
border-style: dotted;
margin : 0 auto;
padding-left: 15px;
}
</style>
</head>
<body>
<div id = border>
border 영역
</div>
<br><br>
<div id = main>
main 영역
<br>
<div id = box1>
box1
</div>
<div id = box2>
box2
</div>
</div>
<br><br>
<div id = footer>
<br>
footer 영역
</div>
</body>
</html>
728x90
'HTML' 카테고리의 다른 글
| 34일차// javaScript// document.getElementById(' ').innerHTML (0) | 2021.03.02 |
|---|---|
| html + css login page (0) | 2021.03.02 |
| 32일차//[css] HTML A tag //링크의 글자색(font color on text link)을 지정하는 방법 (0) | 2021.02.25 |
| 32일차//[css] body { background } 속성 (0) | 2021.02.25 |
| city 예제 <div>를 사용하여 영역나누기 External 방식 (0) | 2021.02.25 |
