[2주][4일][1~2교시] CSS: 레이아웃 만들기, 영역 나누기.
레이아웃 만들고, 영역 나누기 - #left{}, <div>
※ 스타일 적용이므로 <head>태그 안에 들어간다.
<style type = "text/css">
body{
font-family:"맑은 고딕";
}
#top{
width:700px;
background-color:#ff0;
margin-top:0px;
margin-left:50px;
padding-bottom:50px;
}
#left{
float:left;
width:150px;
background-color:#ff0; //노랑
margin:0px 0px 0px 50px; //위쪽부터 시계방향순: 위,오른,아래,왼쪽
padding-bottom:50px;
}
#main{
float:left;
margin:0px 0px 0px 0px;
padding-bottom:50px;
background-color:#f00; //빨강
width:150px;
}
</style>
<body>
<!영역 나누기-div>
<div id="top">css에 따라 같은 html 구조라도 디자인의 느낌이 많이 달라진다.</div>
<div id="left">css에 따라 같은 html 구조라도 디자인의 느낌이 많이 달라진다.</div>
<div id="main">css에 따라 같은 html 구조라도 디자인의 느낌이 많이 달라진다.</div>
</body>
#left를 right로 적용했을때
#left{
float:right;
width:150px;
background-color:#ff0; //노랑
margin:0px 0px 0px 50px; //위쪽부터 시계방향순: 위,오른,아래,왼쪽
padding-bottom:50px;
}
