<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>21st shop</title>
<link href='http://fonts.googleapis.com/css?family=Julius+Sans+One' rel='stylesheet' type='text/css'>
<!-- 초기화 -->
<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:960; margin: 0 auto;
/* 절대 좌표 */
height:160px;
position: relative;
}
#main_header > #title {
position:absolute;
left:20px; top: 30px;
}
#main_header > #main_gnb{
position:absolute;
right:0px; top:0px;
}
#main_header > #main_lnb{
position:absolute;
right:0px; bottom:10px;
}
</style>
<!-- 타이틀 -->
<style>
#title {
font-family: 'Julius Sans One';
}
</style>
<!-- 메뉴1 -->
<style>
#main_gnb > ul{ overflow:hidden; }
#main_gnb > ul > li { float: left; }
#main_gnb > ul > li > a {
display: block;
padding: 2px 10px;
border: 1px solid black;
}
#main_gnb > ul > li > a:hover {
background: black;
color: white;
}
#main_gnb > ul > li:FIRST-CHILD > a { border-radius: 10px 0 0 10px; }
#main_gnb > ul > li:LAST-CHILD > a { border-radius: 0 10px 10px 0; }
</style>
<!-- 메뉴2 -->
<style>
#main_lnb > ul { overflow: hidden; }
#main_lnb > ul >li { float: left; }
#main_lnb > ul > li > a {
display: block;
padding: 10px 20px;
border: 1px solid black;
}
#main_lnb > ul > li > a:hover {
background: black;
color: white;
}
#main_lnb > ul > li:FIRST-CHILD > a{ border-radius: 10px 0 0 10px; }
#main_lnb > 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: right; /* 왼쪽에 붙인다 */
}
#content > #main_aside {
width: 200px;
float: left; /* 오른쪽에 붙인다 */
}
</style>
<!-- 본문 -->
<style>
#main_section > article.main_article {
margin-bottom: 10px;
padding: 20px;
border: 1px solid black;
}
</style>
<!-- 사이드 -->
<style>
/* 첫번째 탭 */
input:nth-of-type(1) { display: none; }
input:nth-of-type(1) ~ div:nth-of-type(1) { display: none; }
input:nth-of-type(1):checked ~ div:nth-of-type(1) { display: block; }
/* 두번째 탭 */
input:nth-of-type(2) { display: none; }
input:nth-of-type(2) ~ div:nth-of-type(2) { display: none; }
input:nth-of-type(2):checked ~ div:nth-of-type(2) { display: block; }
/* 탭 모양 구성*/
section.buttons { overflow: hidden; }
section.buttons > label {
/* 수평 정렬*/
display: block; float:left;
/* 크기 및 글자 위치 지정*/
width: 100px; height: 30px;
line-height: 30px;
text-align: center;
/* 테두리 지정 */
box-sizing : border-box;
border: 1px solid black;
/* 색상지정 */
background: black;
color: white;
}
input:nth-of-type(1):checked ~ section.buttons > label:nth-of-type(1) {
background: white;
color: black;
}
input:nth-of-type(2):checked ~ section.buttons > label:nth-of-type(2) {
background: white;
color: black;
}
</style>
<!-- 목록 -->
<style>
.item {
overflow: hidden;
padding: 10px;
border: 1px solid black;
border-top: none;
}
.thumbnail {
float: left;
}
.description {
float:left;
margin-left: 10px;
}
.description > strong {
display: block;
width: 120px;
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;
}
</style>
<!-- 푸터 -->
<style>
#main_footer {
/* 중앙 정렬 */
width:960px; margin: 0 auto;
margin-bottom: 10px;
/* 테두리 */
box-sizing: border-box;
padding: 10px;
border: 1px solid black;
/* 글자정렬 */
text-align : center;
}
</style>
</head> <!-- *******************헤드의 끝************************** -->
<body>
<header id="main_header">
<div id="title">
<h1>21ST SHOP</h1>
<h2>html5</h2>
</div>
<nav id="main_gnb">
<ul>
<li><a href="#">Web</a><li>
<li><a href="#">Mobile</a><li>
<li><a href="#">game</a><li>
<li><a href="#">simulation</a><li>
<li><a href="#">Data</a><li>
</ul>
</nav>
<nav id="main_lnb">
<ul>
<li><a href="#">Web1</a><li>
<li><a href="#">Web2</a><li>
<li><a href="#">Web3</a><li>
<li><a href="#">Web4</a><li>
<li><a href="#">Web5</a><li>
</ul>
</nav>
</header>
<div id="content">
<section id="main_section">
<article class="main_article">
<h1>Main Section</h1>
<p> main section content main section content main section content
main section content main section content main section content
</p>
</article>
<article class="main_article">
<h1>Main Section</h1>
<p> main section content main section content main section content
main section content main section content main section content
</p>
</article>
<article class="main_article">
<h1>Main Section</h1>
<p> main section content main section content main section content
main section content main section content main section content
</p>
</article>
</section>
<aside id="main_aside">
<input id ="first" type="radio" name="tab" checked="checked" />
<input id ="second" type="radio" name="tab" />
<section class="buttons">
<label for="first">First</label>
<label for="second">Second</label>
</section>
<div class="tab_item">
<ul>
<li class="item"><a href="#">
<div class="thumbnail">
<img src="http://placehold.it/45x45" />
</div>
<div class="description">
<strong>HTML5 Canvas</strong><p>2015-05-21</p>
</div>
</a></li>
<li class="item"><a href="#">
<div class="thumbnail">
<img src="http://placehold.it/45x45" />
</div>
<div class="description">
<strong>HTML5 Audio</strong><p>2015-05-21</p>
</div>
</a></li>
<li class="item"><a href="#">
<div class="thumbnail">
<img src="http://placehold.it/45x45" />
</div>
<div class="description">
<strong>HTML5 Video</strong><p>2015-05-21</p>
</div>
</a></li>
<li class="item"><a href="#">
<div class="thumbnail">
<img src="http://placehold.it/45x45" />
</div>
<div class="description">
<strong>HTML5 Sementic Web</strong><p>2015-05-21</p>
</div>
</a></li>
</ul>
</div>
<div class="tab_item">
<ul>
<li class="item"><a href="#">
<div class="thumbnail">
<img src="http://placehold.it/45x45" />
</div>
<div class="description">
<strong>CSS Transition</strong><p>2015-05-21</p>
</div>
</a></li>
<li class="item"><a href="#">
<div class="thumbnail">
<img src="http://placehold.it/45x45" />
</div>
<div class="description">
<strong>CSS Animation</strong><p>2015-05-21</p>
</div>
</a></li>
<li class="item"><a href="#">
<div class="thumbnail">
<img src="http://placehold.it/45x45" />
</div>
<div class="description">
<strong>CSS Border</strong><p>2015-05-21</p>
</div>
</a></li>
<li class="item"><a href="#">
<div class="thumbnail">
<img src="http://placehold.it/45x45" />
</div>
<div class="description">
<strong>CSS Box</strong><p>2015-05-21</p>
</div>
</a></li>
</ul>
</div>
</aside>
</div>
<footer id="main_footer">
<h3>HTML5 + CSS3 Basic</h3>
<address>Website Layout Basic</address>
</footer>
</body>
</html>
'IT 잡다 > HTML5' 카테고리의 다른 글
| 화면 캡쳐 (0) | 2015.05.14 |
|---|---|
| NewFile.html // 기본 html 파일(index.html과 연결) (0) | 2015.05.14 |
| inputForm.html // 홈페이지실습(index.html과 연결) (0) | 2015.05.14 |
| index.html // 홈페이지 실습 (0) | 2015.05.14 |
