본문 바로가기
css

CSS3아이디 선택자 #​ div 레이아웃

by wanee 2015. 1. 28.

 

 <!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; /* 글자색 : 검정 */

​​}

댓글