※ 사실 새로운 div테이블을 사용해서 위아래 검정색을 만들었으나
편의상 header(헤더)와 footer(푸터) div테이블로 설명함
검정색으로 된 것이 결과물.
□html
<body>
<div id=header> - 헤더는 맨 위에
</div>
<div id=container> - 컨테이너는 가운데에
<div id=content> - 컨텐츠는 컨테이너 속으로
</div>
</div>
<div id=footer> - 푸터는 맨 아래에
</div>
■스타일시트.
0. body의 가로비율을 100%로 한다.
(width:가로길이 height:세로길이)
body{width:100%}
1. header(헤더), footer(푸터) 스타일에서 가로비율을 없애고 세로비율만 조정(세로비율은 자유)
#header{background-color:black;height:100px;margin:0 0 0 0;padding:0 0 0 0px}
#footer{background-color:black;height:100px;margin:0 0 0 0;padding:0 0 0 0px}
2. margin(마진), padding(패딩)값도 모조리 제거한다.
#header{background-color:black;height:100px;margin:0 0 0 0;padding:0 0 0 0px}
#footer{background-color:black;height:100px;margin:0 0 0 0;padding:0 0 0 0px}
3. 색깔을 지정한다.
#header{background-color:black;height:100px;margin:0 0 0 0;padding:0 0 0 0px}
#footer{background-color:black;height:100px;margin:0 0 0 0;padding:0 0 0 0px}
4. footer의 세로길이는 글이 없을시 잘려서 배경색이 나오므로, body 색도 손봐준다.
이 때 body의 margin,padding도 모두 0으로 만든다.
#body{background-color:black;margin:0 0 0 0;padding:0 0 0 0}
5. body의 색을 바꾸면 전체 색이 모두 묻히므로 container(컨테이너) 색을 손봐준다.
여기서 container 가로비율도 100%로 지정해준다. margin과 padding도 0으로 만든다.
위치도 가운데에 놓는다.
##container {float:center;
width:100%;
margin:0px auto;
padding:0px;
background-color:white;
}
6. 완성.
'문서함 > 웹코딩' 카테고리의 다른 글
| 브라우저에서 자바스크립트 실행 가능한지 확인하는 법 (0) | 2014.08.16 |
|---|---|
| 네이버 블로그센터에 논문을 썼다 (0) | 2012.06.29 |
| 일반적인 배너크기 (0) | 2012.01.18 |
| 티스토리 메뉴바없애기 (0) | 2011.11.30 |
| 라이트박스 태그 적용하기 위한 소스파일 (0) | 2011.10.17 |