css
CSS3아이디 선택자 # div 레이아웃
wanee
2015. 1. 28. 15:06
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#header {
width: 680px;
margin: 0 auto;
background: red;
}
#wrap {
width: 680px;
height: 300px;
margin: 0 auto;
overflow: hidden;
}
#aside {
width: 80px;
height: 300px;
float: left;
background: blue;
color: white;
}
#content {
width: 600px;
height: 300px;
float: left;
background: green;
color: red;
}
#footer {
width: 680px;
height: 50px;
margin: 0px auto;
background: yellow;
}
#footer2 {
width: 300px;
height: 50px;
background: red;
padding: 30px;
float: right;
}
</style>
</head>
<body>
<div id="header">
<h1>Header</h1>
</div>
<div id="wrap">
<div id="wrap2">
<div id="aside">aside</div>
<div id="content">content</div>
</div>
</div>
<div id="footer">footer</div>
</body>
</html> |
CSS3아이디 선택자 #
- id속성을 가진 태그를 선택해서, 원하는 속성을 부여한다.
아래 소스 본문을 보면, body태그안의 id가 header인 div를 선택했다.
<sylte>태그안에서 다음과 같은 형식으로 속성을 지정해줬다.
#header {
width: 680px;
margin: 0 auto; /* 가운데 정렬 */
background: yellow;
color: black; /* 글자색 : 검정 */
}