<head>
<title>My Blog Page</title>
<style>
body {
background-color : #efe5d0;
font-family: Arial, "Trebuchet MS", sans-serif;
margin : 0px;
}
header{
background-color:#e3afed;
color:#000000;
margin:0px;
text-align : center;
padding:5px;
}
h1{
margn : 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>
<li><a href = "http://www.w3c.org/">W3C</a></li>
<li><a href = "#">MOZILLA</a></li>
<li><a href = "#">HTML DOGS</a></li>
</ul>
<figure>
<img width = "85" heigh ="85"
src = "hong.png"
alt = "홍길동" />
<figcaption>홍길동</figcaption>
</figure>
</nav>
<section id = "main">
<article>
<h1>Semantic Tags</h1>
<p>시맨택 요소는 브라우저에게 요소의 의미와 목적을 명확하게 알려주는 요소임</p>
</article>
<article>
<h1>div and span</h1>
<p>div 는 "divide"의 약자로서 페이지를 논리적인 섹션으로 분리하는 데 사용되는 태그이다.
span 요소는 인라인 요소로서 텍스트를 위한 컨테이너로 사용할 수 있다.</p>
</article>
</sextion>
<footer>Copyright (c) 2013 Hong </footer>
댓글 없음:
댓글 쓰기