html5와 css로 사이트를 구축할 수 있다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<title>my first html5</title>
<link rel="stylesheet" href="aaa.css">
<script src="aaa.js"></script>
</head>
<body>
<div id="big_wrapper">
<header id="top_header">
<h1>Welcome to my html5 page!</h1>
</header>
<nav id="top_menu">
<ul>
<li>Home</li>
<li>네이버 영화</li>
<li>네이버 지도</li>
</ul>
</nav>
<div id="main_wrapper">
<section id="main_section">
<article>
<header>
<hgroup>
<h1>기사1 큰제목</h1>
<h2>기사1 작은제목</h2>
</hgroup>
</header>
<p>this is a paragraph....</p>
<footer>
<p>홍길동 작성</p>
</footer>
</article>
<article>
<header>
<hgroup>
<h1>기사2 큰제목</h1>
<h2>기사2 작은제목</h2>
</hgroup>
</header>
<p>this is a paragraph....</p>
<footer>
<p>홍길동 작성</p>
</footer>
</article>
</section>
<aside id="side_news">
<h4>News</h4>
오늘의 뉴스를 알려드리겠습니다...
</aside>
</div>
<footer id="main_footer">
copyright 2012 홍길동
</footer>
</div>
</body>
</html>
aaa.css
* {
margin: 0px;
padding: 0px;
}
body {
width: 100%;
display:-webkit-box;
-webkit-box-pack:center;
}
#big_wrapper {
border: 1px solid black;
width: 1000px;
margin: 20px 0px;
display:-webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}
h1 {
font: bold 20px Tahoma;
}
h2 {
font: bold 14px Tahoma;
}
header, section, footer, aside, nav, article, hgroup {
display: block;
}
#top_header {
background: yellow;
border: 1px solid blue;
padding: 20px;
}
#top_menu {
background: blue;
color: white;
}
#top_menu li {
display: inline;
list-style: none;
padding: 5px;
font: bold 14px Tahoma;
}
#main_wrapper {
display:-webkit-box;
-webkit-box-orient: horizontal;
}
#main_section {
-webkit-box-flex: 1;
margin: 30px;
}
#side_news{
width: 220px;
margin: 20px 0px;
padding: 30px;
background: #66CCCC;
}
#main_footer {
text-align: center;
padding: 20px;
border-top: 2px solid green;
}
article {
background: #FFFBCC;
border: 1px solid red;
padding: 20px;
margin-bottom: 15px;
}
article footer {
text-align: right;
}
참고: http://thenewboston.org/
'자바 스크립트' 카테고리의 다른 글
| html5 비디오 (0) | 2013.02.11 |
|---|---|
| html5 사이트구축 -webkit-box (0) | 2013.02.11 |
| [jquery]플리커에서 원하는 이미지 가져오기 (0) | 2012.06.10 |
| jQuery #2 (0) | 2012.05.22 |
| JQuery Hello World (0) | 2012.05.21 |