<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>site logo</title>
<link href="../css/site_logo.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding:wgt@400;700;800&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<header>
<img src="../images/logo.png"><br>
<p>header 부분입니다.</p>
</header>
<nav class="nav">
<ul>
<li><a href="#">메인 nav 1</a></li>
<li><a href="#">메인 nav 2</a></li>
<li><a href="#">메인 nav 3</a></li>
</ul>
</nav>
<div>
<nav class="sidebar">
<ul>
<li><a href="#">aside nav 1</a></li>
<li><a href="#">aside nav 2</a></li>
<li><a href="#">aside nav 3</a></li>
</ul>
</nav>
<article>
<h2>HTML5와 CSS3을 이용한 웹 사이트 개발</h2>
<h3>Article에 해당 하는 내용이 들어갑니다.</h3>
<p>HTML5와 CSS을 이용하여 다양한 웹 페이지 레이아웃을 구성해 보겠습니다.<br>
웹페이지와 레이아웃을 일정한 패턴이 있습니다.<br>
따라서 CSS를 이용해서 레이아웃을 잡는 연습을 많이 하게 되면, 사이트를 새로 만들거나 유지 보수 시 매우 편리합니다.</p>
<section class="content">
<h3>Section 내용입니다.</h3>
<p>HTML의 시맨틱 태그는 다음과 같습니다.<br>
header, footer, nav, article, section, aside, hgroup</p>
</section>
</article>
<aside class="banner">
여기는 배너가 들어가는 자리입니다.
</aside>
</div>
<footer>
<p>현재 웹 페이지에 대한 권리는 독자 모두에게 공개되었습니다. (footer 입니다.)</p>
</footer>
</div>
</body>
</html>
@charset "utf-8";
body {
font-family: 'Nanum Gothic Coding', monospace;
}
.container {
width: 1080px;
position: absolute;
margin: 0px auto;
}
article, section, footer, aside {
display: inline-block;
}
header {
background-color: skyblue;
margin-bottom: 5px;
padding: 10px;
line-height: 0;
border: 1px solid;
border-radius: 10px;
}
.nav {
background-color: pink;
border: 1px solid;
border-radius: 10px;
margin-bottom: 10px;
}
.nav ul li a {
text-decoration: none;
color: black;
margin-right: 40px;
}
.nav ul li a:hover {
color: blue;
text-decoration: underline;
}
.nav ul {
padding: 10px;
}
.nav ul li {
list-style: none;
display: inline;
}
.sidebar {
float: left;
height: 300px;
background-color:rgb(95, 144, 251);
padding-right: 10px;
margin-right: 5px;
}
.sidebar ul {
margin: 0px;
padding: 20px;
line-height: 2em;
}
.sidebar ul li {
list-style-type: none;
}
.sidebar ul li a {
text-decoration: none;
color: black;
}
.sidebar ul li a:hover {
color: blue;
text-decoration: underline;
}
article {
border: 1px solid;
width: 700px;
margin-left: 15px;
margin-bottom: 15px;
line-height: 120%;
background-color: yellow;
padding: 10px;
}
.content {
width: 300px;
border: 1px solid;
background-color: white;
padding: 10px;
margin-left: 10px;
margin-bottom: 10px;
}
.content h3 {
color:red;
}
.banner {
width: 150px;
height: 300px;
float: right;
background-color: orange;
padding: 10px;
}
footer {
border: 1px solid;
width: 1070px;
padding: 5px;
background-color: green;
clear: both;
}
footer p {
margin: 10px;
}
728x90
반응형
'HTML > HTML 실습' 카테고리의 다른 글
| [HTML] 간단하게 페이지 작성하기 - 2 (0) | 2020.07.29 |
|---|---|
| [HTML] 간단하게 페이지 작성하기 - 1 (0) | 2020.07.29 |
