레이아웃 만들고, 영역 나누기 - #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;
}
'N스크린하이브리드앱과정 > HTML&CSS' 카테고리의 다른 글
| [2주][5일][5~7th] 자바스크립트 실습. alert = 경고창. (0) | 2013.07.26 |
|---|---|
| [2주][5일][1~2th] HTML5 맛보기! (0) | 2013.07.26 |
| [2주][4일][1~2교시] CSS: 가상선택자. 롤오버효과, 하이퍼링크 등 (0) | 2013.07.25 |
| [2주][3일] 웹표준: market.html에 css 스타일 적용하기 (0) | 2013.07.24 |
| [2주][3일] 웹표준: css선택자의 3가지 종류. {아이디/클래스/태그} 선택자 (0) | 2013.07.24 |