<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>my BLOG PAGE</title>
<style>
body{
background-color: yellow;
font-family: 'Times New Roman', Times, serif;
margin: 0;
}
header{
background-color: violet;
}
header h1{
margin: 0;
text-align: center;
padding: 10px 0;
}
nav{
background-color: aqua;
display: table-cell;
padding: 15px;
}
section{
background-color: aquamarine;
display: table-cell;
padding: 15px;
}
footer{
background-color: bisque;
color: blue;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<!-- 시멘틱 [semantic] 태그 사용 -->
<header>
<h1>my blog page</h1>
</header>
<nav>
<h2>links</h2>
<ul>
</ul>
<figure>
<img src="./image/pome.png" alt="pome" width="85">
<figcaption>포메라이언</figcaption>
</figure>
</nav>
<section>
<article>
<h3>semantic tags</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint atque pariatur obcaecati eligendi fugiat delectus voluptate quam nesciunt earum nihil dolorum non, a provident iusto cumque soluta similique natus velit.
</p>
</article>
<article>
<h3>html와 css3</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat iusto voluptatum corrupti facilis nisi repellat repudiandae dignissimos velit mollitia dolore ratione est id, blanditiis fuga perferendis debitis, deserunt fugit facere.
</p>
</article>
</section>
<footer>
copyright © 2023 lej0118
</footer>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layout</title>
<!-- 옛날방식 -->
<style>
#header{
background-color: aqua;
width: 100%;
height: 50px;
}
#nav{
background-color: yellow;
width: 30%;
height: 100px;
float: left;
}
#content{
background-color: greenyellow;
width: 70%;
height: 80px;
float: right;
}
#footer{
background-color: violet;
width: 100%;
height: 50px;
clear: both;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">header</div>
<div id="nav">menu</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
</body>
</html>
'CSS' 카테고리의 다른 글
| Web App: 반응형웹01 (0) | 2023.10.30 |
|---|---|
| 웹사이트 만들어보기 (0) | 2023.10.30 |
| CSS-D04 (0) | 2023.10.27 |
| CSS-D03 (0) | 2023.10.26 |
| css//01 (0) | 2023.08.30 |