<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TeamNote Main Page</title>
<link href="http://fonts.googleapis.com/css?family=Henny+Penny" rel="stylesheet"/>
<!-- 초기화 -->
<style>
* { margin:0; padding:0;}
body { font-family: 'Times New Roman', serif;}
li { list-style: none;}
a { text-decoration: none;}
img { border: 0;}
</style>
<!-- 헤더 스타일 -->
<style>
#main_header {
/* 중앙 정렬 */
width: 960px; margin: 0 auto;
/* 절대 좌표 */
height: 160px; position: relative;
background-color: navy;
color: white;
}
#main_header > #title {
position: absolute; left: 20px; top: 30px;
}
#main_header > #main_menu {
position: absolute; right:0; bottom: 10px;
}
</style>
<!-- 타이틀 스타일 -->
<style>
#title {
font-family: 'Henny Penny', cursive;
}
</style>
<!-- 메뉴 -->
<style>
#main_menu > ul { overflow: hidden; }
#main_menu > ul > li { float: left; }
#main_menu > ul > li > a {
display: block;
background: white;
text-size: 30px;
padding: 10px 20px;
border: 1px solid black;
}
#main_menu > ul > li > a:hover {
background: black;
color: white;
}
#main_menu > ul > li:first-child > a { border-radius: 10px 0 0 10px; }
#main_menu > ul > li:last-child > a { border-radius: 0 10px 10px 0; }
</style>
<!-- 콘텐츠 -->
<style>
#content {
/* 중앙 정렬 */
width: 960px; margin: 0 auto;
/* 수평 레이아웃 구성 */
overflow: hidden;
}
#content > #main_section {
width: 750px;
float: left;
}
#content > #main_aside {
width: 200px;
float: right;
}
</style>
</head>
<body>
<header id="main_header">
<hgroup id="title">
<h1>Team Note for Project</h1>
<h3>made by Junho</h3>
</hgroup>
<nav id="main_menu">
<ul>
<li><a href="#">Team Board</a></li>
<li><a href="#">Schedule</a></li>
<li><a href="#">Diary</a></li>
</ul>
</nav>
</header>
<div id="content">
<section id="main_section">
<article class="main_article">
</article>
</section>
<aside> </aside>
</div>
<footer></footer>
</body>
</html>
'프론트엔드 > Server Part' 카테고리의 다른 글
| JSP 에러 페이지 처리 (0) | 2014.01.08 |
|---|---|
| 페이지 추가하는 법 (0) | 2013.05.23 |
| useBean과 톰캣 Tomcat 폴더 지정 (0) | 2013.05.12 |
| jQuery 강좌 소개 (0) | 2013.05.05 |
| 톰캣 서버 시작 위치 지정 (7) | 2013.02.20 |
WRITTEN BY
