반응형
<DIV>를 이용하여 레이아웃 설정을 통해 프레임형식 웹을 표현해 보겠습니다.
<head>부분에 아이디값을 정하고 스타일 설정을 하겠습니다.
#아이디이름 {길이, 색상, 테두리, 여백설정}으로 설정하도록 하겠습니다.
#header { width:770px; height:50px;background-color:Yellow;
border:groove 1px silver; padding:5px 5px 5px 5px;
margin:0px 0px 10px 0px; }
#left{ width:180px; height:100px; background-color:Yellow;
border:groove 1px silver; padding:5px 5px 5px 5px;
margin:0px 10px 0px 0px;float:left; }
#content{ width:350px; height:100px; background-color:Yellow;
border:groove 1px silver; padding:5px 5px 5px 5px;
margin:0px 0px 0px 0px;float:left; }
#right{ width:180px; height:100px; background-color:Yellow;
border:groove 1px silver; padding:5px 5px 5px 5px;
margin:0px 0px 0px 10px;float:left; }
#footer{ clear:both;width:770px; height:50px;
background-color:Yellow;
border:groove 1px silver;
padding:5px 5px 5px 5px; margin:10px 0px 0px 0px;
border:groove 1px silver; padding:5px 5px 5px 5px;
margin:0px 0px 10px 0px; }
#left{ width:180px; height:100px; background-color:Yellow;
border:groove 1px silver; padding:5px 5px 5px 5px;
margin:0px 10px 0px 0px;float:left; }
#content{ width:350px; height:100px; background-color:Yellow;
border:groove 1px silver; padding:5px 5px 5px 5px;
margin:0px 0px 0px 0px;float:left; }
#right{ width:180px; height:100px; background-color:Yellow;
border:groove 1px silver; padding:5px 5px 5px 5px;
margin:0px 0px 0px 10px;float:left; }
#footer{ clear:both;width:770px; height:50px;
background-color:Yellow;
border:groove 1px silver;
padding:5px 5px 5px 5px; margin:10px 0px 0px 0px;
float:left; } padding,margin 여백설정(CSS2.0-13강좌)
22.Div태그로레이아웃설정.htm반응형
'jQuery | javascript | CSS' 카테고리의 다른 글
| 24.CSS - 속성정리 (0) | 2009.07.30 |
|---|---|
| 23.CSS - 레이어 (0) | 2009.07.30 |
| 21.CSS - 이미지관련 스타일 (0) | 2009.07.30 |
| 20.CSS - 리스트(목록)관련 스타일 (0) | 2009.07.30 |
| 19.CSS - 나만의 스타일시트 (0) | 2009.07.29 |
Comments