<!DOCTYPE html>
<html>
<head>
<title>HTML5 기본 프로젝트</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="page-wrapper">
<header>
<hgroup>
<h1>HTML5 Example Preview</h1>
<h2>한국정보교육원</h2>
</hgroup>
</header>
<nav>
<div class="nav-left">
<ul class="outer-menu-item">
<li class="outer-menu-li">
<span class="outer-menu-title">HTML5</span>
<ul class="inner-menu">
<li class="inner-menu-li"><a href="#">데이터</a></li>
<li class="inner-menu-li"><a href="#">데이터</a></li>
</ul>
</li>
<li class="outer-menu-li">
<span class="outer-menu-title">CSS3</span>
<ul class="inner-menu">
<li class="inner-menu-li"><a href="#">데이터</a></li>
<li class="inner-menu-li"><a href="#">데이터</a></li>
<li class="inner-menu-li"><a href="#">데이터</a></li>
</ul>
</li>
<li class="outer-menu-li">
<span class="outer-menu-title">JavaScript</span>
<ul class="inner-menu">
<li class="inner-menu-li"><a href="#">데이터</a></li>
<li class="inner-menu-li"><a href="#">데이터</a></li>
<li class="inner-menu-li"><a href="#">데이터</a></li>
<li class="inner-menu-li"><a href="#">데이터</a></li>
<li class="inner-menu-li"><a href="#">데이터</a></li>
<li class="inner-menu-li"><a href="#">데이터</a></li>
<li class="inner-menu-li"><a href="#">데이터</a></li>
<li class="inner-menu-li"><a href="#">데이터</a></li>
</ul>
</li>
</ul>
</div>
<div class="nav-right">
<div>
<form>
<input type="text">
<input type="submit" value="검색">
</form>
</div>
</div>
</nav>
<div id="content">
<section id="main-section">
<article>
<div class="article-header">
<h1 class="article-title">HTML5 개요와 활용</h1>
<p class="article-date">2013년 02월 14일</p>
</div>
<div class="article-body">
<img src="http://placehold.it/430x280">
<br>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo justo ac lorem pretium
vitae rhoncus lectus ullamcorper. Aliquam facilisis euismod diam sollicitudin commodo. Nunc
sagittis sapien venenatis lorem vestibulum cursus pellentesque mi sodales. Donec pellentesque
hendrerit turpis, vitae tempor nibh ultricies at. Aliquam consequat rutrum erat, vel sodales
tellus sagittis at. Proin sollicitudin augue eu augue vehicula vitae bibendum odio porta.
Aliquam elit arcu, venenatis in imperdiet ut, scelerisque non dolor. Donec in vulputate tortor.
Fusce egestas rutrum mi quis ultricies. Vivamus blandit augue ac felis ullamcorper consectetur.
Curabitur pretium fringilla neque, vitae cursus massa auctor vitae. Integer non massa sit amet
lacus accumsan blandit. Vivamus fermentum tellus at justo iaculis eu tempus lorem venenatis.
Suspendisse quis eros consectetur tellus posuere commodo. In hac habitasse platea dictumst.</p>
<br>
<p>Praesent orci quam, ornare sed scelerisque ac, porta a justo. Pellentesque quis magna sed magna
vehicula semper ac ut enim. Duis ut mattis ligula. Mauris at sem elit. Vestibulum justo tortor,
malesuada non tincidunt quis, feugiat ut metus. Maecenas varius neque ut diam ultrices
scelerisque. Praesent lectus massa, tincidunt vel adipiscing non, vehicula ut magna. Cras quis
lacinia ipsum. Sed consequat consectetur volutpat. Integer sed tortor risus. Donec accumsan ante
vel justo porttitor volutpat.</p>
</div>
</article>
<article>
<div class="article-header">
<h1 class="article-title">HTML5 응용과 실습</h1>
<p class="article-date">2013년 02월 17일</p>
</div>
<div class="article-body">
<img src="http://placehold.it/430x280">
<br>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo justo ac lorem pretium
vitae rhoncus lectus ullamcorper. Aliquam facilisis euismod diam sollicitudin commodo. Nunc
sagittis sapien venenatis lorem vestibulum cursus pellentesque mi sodales. Donec pellentesque
hendrerit turpis, vitae tempor nibh ultricies at. Aliquam consequat rutrum erat, vel sodales
tellus sagittis at. Proin sollicitudin augue eu augue vehicula vitae bibendum odio porta.
Aliquam elit arcu, venenatis in imperdiet ut, scelerisque non dolor. Donec in vulputate tortor.
Fusce egestas rutrum mi quis ultricies. Vivamus blandit augue ac felis ullamcorper consectetur.
Curabitur pretium fringilla neque, vitae cursus massa auctor vitae. Integer non massa sit amet
lacus accumsan blandit. Vivamus fermentum tellus at justo iaculis eu tempus lorem venenatis.
Suspendisse quis eros consectetur tellus posuere commodo. In hac habitasse platea dictumst.</p>
<br>
<p>Proin ut fringilla sapien.</p>
</div>
</article>
</section>
<aside id="main-aside">
<div class="aside-list">
<h3>카테고리</h3>
<ul>
<li><a href="#">데이터</a></li>
<li><a href="#">데이터</a></li>
<li><a href="#">데이터</a></li>
<li><a href="#">데이터</a></li>
<li><a href="#">데이터</a></li>
</ul>
</div>
<div class="aside-list">
<h3>최근 글</h3>
<ul>
<li><a href="#">데이터</a></li>
<li><a href="#">데이터</a></li>
<li><a href="#">데이터</a></li>
<li><a href="#">데이터</a></li>
</ul>
</div>
</aside>
</div>
<footer>
<a href="#">Created By Team-HeXagon</a>
</footer>
</div>
</body>
</html>
* { margin:0;
padding:0;
font-family:'맑은 고딕', Arial, Helvetica, sans-serif;}
body {
background-color: #e6e6e6;
width: 960px;
margin: 0 auto;
}
#page-wrapper {
background-color: white;
margin: 40px 0;
padding: 10px 20px;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
/* 헤더 */
header {
padding: 40px 50px;
}
header h1 {
font-size: 30px;
color: #181818;
}
header h2 {
font-size: 15px;
font-weight: 500;
}
/* 네비게이션*/
nav {
border-top: 1px solid #c8c8c8;
border-bottom: 1px solid #c8c8c8;
margin-bottom: 20px;
height: 40px;
}
.nav-left {
float: left;
}
.nav-right {
float: right;
}
.outer-menu-li {
float: left;
position: relative;
}
.outer-menu-title{
display: block;
padding: 5px 20px;
height: 30px;
line-height: 30px;
text-align: center;
}
.outer-menu-title:hover inner-menu-li {
display: block;
}
.inner-menu {
display: none;
position: absolute;
top: 40px;
left: 0;
width: 100%;
background-color: white;
box-shadow: 0 2px 6px rgba(5, 5, 5, 0.9);
z-index: 1000;
text-align: center;
}
.inner-menu-li > a {
display: block;
padding: 5px 10px;
color: black;
}
.inner-menu-li > a:hover {
background-color: black;
color: white;
}
.nav-right [type="text"] {
display: block;
float: left;
height: 27px;
padding: 0;
border-radius: 15px 0 0 15px;
width: 120px;
font-size: 12px;
color: #555555;
border: 1px solid #cccccc;
}
.nav-right [type="text"]:focus {
background-color: rgba(194, 255, 154, 0.7);
outline: 0;
box-shadow: inset 0 1px 1px {0, 0, 0, 0.5};
}
.nav-right [type="submit"] {
display: block;
float: left;
width: 50px;
height: 27px;
margin-left: -1px;
border-radius: 0 15px 15px 0;
border: 1px solid #cccccc;
display: inline-block;
}
/* 본문 */
#content {
overflow: hidden;
}
#content > section {
float: left;
width: 710px;
}
#content > aside {
float: right;
width: 200px;
}
article {
padding: 0 10px 20px 10px;
border-bottom: 1px solid #c8c8c8c8;
}
.article-header {
padding: 20px 0;
}
.article-title {
font-size: 30px;
font-weight: 500;
padding-bottom: 10px;
}
.article-date {
font-size: 12px;
}
.article-body {
font-size: 14px;
}
/*사이드바*/
.aside-list {
padding: 10px 0 30px 0;
}
.aside-list > h3 {
font-size: 15px;
font-weight: 600;
}
.aside-list li a {
margin-left: 8px;
font-size: 13px;
color: #6c6c6c;
}
댓글남기기