#header, #footer, #content 스타일 지정
index.html의 #header 사이에 다음 코드를 추가한다.
<h1><a href="/"><img src="images/ci.gif" alt="java-school" /></a></h1>
/*** Just for Looks ***/에서 #header, #footer의 배경색을 제외한 나머지 스타일을 제거한다.
#header, #footer {
background: #999;
}
#header h1 위치 재지정
h1 엘리먼트는 디폴트 마진을 가지고 있기에 #header 엘리먼트는 마진만큼 아래로 떨어진다.
h1의 디폴트 마진과 패딩을 제거한다. 그리고 9px 아래로 이동한다.
/*** The Essential Code ***/에 다음 코드를 추가한다.
#header h1 {
margin: 0;
padding: 0;
position: relative;
top: 9px;
}
#footer 디자인
index.html의 #footer 사이에 다음 코드를 추가한다.
<div id="footer"> <ul> <li><a href="#">이용약관</a></li> <li><a href="#">개인정보보호정책</a></li> <li><a href="#">이메일무단수집거부</a></li> <li id="company-info">전화 : 02-123-5678, FAX : 02-123-5678<br /> people@ggmail.org<br /> Copyright java-school.net All Rights Reserved.</li> <li><a href="#">찾아오시는 길</a></li> </ul> </div>
/*** The Essential Code ***/의 #footer에 다음 강조한 부분을 추가한다.
#footer {
clear: both;
width: 1000px;
height: 70px;
font-size: 11px;
color: #8d8d8d;
letter-spacing: -1px;
border-top: 1px solid #DAEAAA;
position: relative;
top: 7px;
}
/*** Just for Looks ***/의 #header, footer를 제거한다.
#footer 메뉴를 가로로 보이게 수정
/*** The Essential Code ***/에 다음 코드를 추가한다.
#footer > ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#footer > ul > li {
float: left;
}
footer 글로벌 메뉴 스타일
#footer > ul {
margin: 0;
padding: 0;
list-style-type: none;
position: relative;
left: 8px;
}
#footer > ul > li {
float: left;
padding: 6px 12px 6px 8px;
background: url('../images/circle.gif') no-repeat 0 50%;
}
#footer > ul > li > a {
color: #8D8D8D;
text-decoration: none;
}
#footer > ul > li > a:hover {
text-decoration: underline;
}
#footer > ul > li#company-info {
margin-left: 350px;
letter-spacing: 0;
background: none;
}
#content 스타일
#content 좌우 마진을 5px씩 늘려서 #content가 #sidebar와 #extra 사이에 간격을 두도록 설정한다. 보더를 추가하여 경계를 구분한다.
#content {
margin-left: 180px;
margin-right: 210px;
}
#content 상자의 영역은 1000px이다. 좌우 마진합이 390px(180 + 210)이라면 #content의 width는 610px이다. border를 좌우로 1px 주었다면, #content의 width는 608px이 된다.
레이아웃을 좀 더 우아하게 보이도록 강조된 부분을 추가한다.
#container {
float: left;
width: 100%;
border-top: 1px solid #DAEAAA;
}
#extra {
float: left;
width: 205px;
margin-left: -205px;
margin-bottom: 20px;
position: relative;
top: 7px;
}
테스트를 위해서 /*** Just for Looks ***/의 #content의 높이를 100px에서 300px으로 수정한다.
#content {
font-size: large;
text-align: center;
background: #DDD;
height: 300px;
}
