java-school logo

#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;
}

예제보기 1

#header h1 위치 재지정

h1 엘리먼트는 디폴트 마진을 가지고 있기에 #header 엘리먼트는 마진만큼 아래로 떨어진다. h1의 디폴트 마진과 패딩을 제거한다. 그리고 9px 아래로 이동한다. /*** The Essential Code ***/에 다음 코드를 추가한다.

#header h1 {
	margin: 0;
	padding: 0;
	position: relative;
	top: 9px;
}

예제보기 2

#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;
	height: 70px;
	font-size: 11px;
	color: #8d8d8d;
	letter-spacing: -1px;
	border-top: 1px solid #DAEAAA;	
}

/*** Just for Looks ***/의 #header, footer를 제거한다.

예제보기 3

#footer 메뉴를 가로로 보이게 수정

/*** The Essential Code ***/에 다음 코드를 추가한다.

#footer ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#footer ul li {
	float: left;
} 

예제보기 4

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 a {
	color: #8D8D8D;
	text-decoration: none;
}
#footer a:hover {
	text-decoration: underline;
}
#footer ul li#company-info {
	margin-left: 350px;
	letter-spacing: 0;
	background: none;
}

예제보기 5

#content 스타일

#content 좌우 마진을 5px씩 늘려서 #content가 #sidebar와 #extra 사이에 간격을 두도록 설정한다. 보더를 추가하여 경계를 구분한다.

#content {
	margin-left: 180px;
	margin-right: 210px;
	border-left: 1px solid #DAEAAA;
	border-right: 1px solid #DAEAAA;
}

#content 상자의 영역은 1000px이다. 좌우 마진합이 390px(180 + 210)이라면 #content의 width는 610px이다. border를 좌우로 1px 주었다면, #content의 width는 608px이 된다.

레이아웃을 좀 더 우아하게 보이도록 강조된 부분을 추가한다.

#container {
	float: left;
	width: 100%;
	border-top: 1px solid #DAEAAA;
}
#sidebar {
	float: left;
	width: 173px;
	margin-left: -1000px;
	margin-bottom: 20px;
	border: 1px solid #DAEAAA;
	font-family: Verdana, sans-serif;
	font-size: 12px;
	position: relative;
	top: 7px;
}
#extra {
	float: left;
	width: 205px;
	margin-left: -205px;
	position: relative;
	top: 7px;
}

#sidebar의 margin-bottom: 20px; 설정은 #sidebar의 높이가 #content보다 클 때 #sidebar의 position: relative;와 top: 7px; 설정 때문에 #sidebar가 #footer를 침범하기에 추가했다.

테스트를 위해서 /*** Just for Looks ***/의 #content의 높이를 100px에서 300px으로 수정한다.

#content {
	font-size: large;
	text-align: center;
	background: #DDD;
	height: 300px;
}

예제보기 6

참고