<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My blog page</title>
<style>
body{
background-color: #efe5d0;
font-family: Arial, "Trebucket MS", sans-serif;
margin: 0px;
}
header{
background-color: #e3afed;
color:#000000;
margin: 0px;
text-align:center;
padding: 5px;
}
h1{
margin: 0px;
}
section#main{
display: table-cell;
background-color: yellow;
padding: 15px;
}
nav{
display: table-cell;
background-color: #ffd800;
padding: 15px;
}
footer{
background-color: #954b4b;
color: #efe5d0;
text-align: center;
padding: 10px;
margin: 0px 0px 0px 0px;
font-size: 90%;
}
</style>
</head>
<body>
<header>
<h1>My blog page</h1>
</header>
<nav>
<h1>Links</h1>
<ul>
</ul>
<figure>
<img width="85" height="85"
src="12-25-1.png"
alt="홍길동" />
<figcaption>홍길동</figcaption>
</figure>
</nav>
<section id="main">
<article>
<h1>Semantic Tags</h1>
<p>
시맨틱 요소(Semantic elements)는 브라우저에게 요소의 의미나 목적을 명확하게 알려주는 요소이다.
</p>
</article>
<article>
<h1>div와 span</h1>
<p>
div는 "divide"의 약자로서 페이지를 논리적읜 섹션으로 분리하는데 사용되는 태그이다.
span요소는 인라인 요소로서 텍스트를 위한 컨테이너로 사용할 수 있다.
</p>
</article>
</section>
<footer>Copyright (c) 2013 Hong</footer>
</body>
</html>
