헤더와 어사이드에 링크 추가
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>폰값똥값 - DDONGFONE</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1><a href="index.html"><img src="logo.gif" alt="">ddongfone</a></h1>
<nav>
<ul>
<li><a href="index.html">홈</a></li>
<li><a href="news.html">공지사항</a></li>
<li><a href="about.html">폰값똥값에 관해</a></li>
<li><a href="contact.html">문의</a></li>
</ul>
</nav>
</header>
<article>
<h1>공지사항</h1>
<p>
<a href="https://ko.wikipedia.org/wiki/%EC%B6%94%EC%84%9D">추석</a> 연휴로 인해 택배사의 휴무로 9월 14일부터 9월 18일까지 택배가 배송이 되지 못하게 되었습니다.
조금 불편하시겠지만 조금만 기다려주시면 좋은 상품으로 배송해드리겠습니다^^
즐거운 추석 연휴 되시길 바라고 추석 후에 더 좋은 모습으로 찾아뵙겠습니다.
</p>
<figure class="photo-center">
<img src="K-7.png" alt="즐거운 추석 명절 되세요">
<figcaption>추석</figcaption>
</figure>
<p>특가 세일: Galaxy On7 2016 8,873원 와이드한 매력 그대로
30만원대 최신형 갤럭시</p>
<aside>
<h1>RELATED POSTS</h1>
<ul>
<li><a href="news02.html">보조배터리</a></li>
<li><a href="news03.html">중고폰 특가 리스트...</a></li>
</ul>
</aside>
</article>
<footer>
<small>Copyright © 폰값똥값, all rights reserved.</small>
</footer>
</body>
</html>
css
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
body {font-family: 돋움,Dotum,sans-serif;
background-color: #edede3;
background-image: url(back.png);
margin: 0;}
h1 {font-size:38px;
margin-top: 0;
margin-bottom: 0}
p {line-height: 1.5}
/* 헤더 */
header {background-color: #ffffff;
border-bottom: solid 1px #aaaaaa;
margin-bottom: 30px;
-webkit-box-shadow: 0 1px 7px #aaaaaa;
box-shadow: 0 1px 7px #aaaaaa;
padding: 5px;}
header h1 {font-family: 'Open Sans Condensed', sans-serif;
font-size: 24px;
width: 900px;
margin-left: auto;
margin-right: auto}
header h1 a {text-decoration: none;
color: #000000}
header h1 a:hover {color: #000000}
header h1 img {vertical-align: -10px;
margin-right: 5px}
/* 기사 */
article {background-color: #ffffff;
width: 900px;
margin-left: auto;
margin-right: auto;
border: solid 1px #aaaaaa;
padding: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 15px;
-webkit-box-shadow: 1px 1px 3px #aaaaaa;
box-shadow: 1px 1px 3px #aaaaaa;
border-radius: 20px;
overflow: hidden}
/* 풋터 */
footer {width: 900px;
margin-left: auto;
margin-right: auto;
clear: both}
/* 이미지를 중앙에 배치하는 레이아웃 */
figure.photo-center {text-align: center;
margin-top: 30px;
margin-bottom: 30px}
/* 이미지를 왼쪽에 배치하는 레이아웃 */
figure.photo-left {margin: 0;
margin-right: 20px;
float: left}
figure.photo-left img {width: 300px}
/* 이미지를 오른쪽에 배치하는 레이아웃 */
figure.photo-right {margin: 0;
margin-left: 20px;
float: right}
figure.photo-right img {width: 300px}
/* 소제목 */
h2 {clear:both;
border-bottom: solid 5px #c39f4a;
margin-top: 30px}
/* 링크 */
a {color: #b77d3c}
a:hover {color:#ff8800}
a img {border: none}
/* 관련 기사 링크 */
aside {border: solid 2px #d6c588;
border-radius: 5px;
padding: 10px;
background-color: #edede3;
margin-top: 40px}
aside h1 {font-family: 'Open Sans Condensed', sans-serif;
font-size: 18px;
color: #c39f4a;
border-bottom: dotted 1px #c39f4a}
aside ul {list-style-image: url(listmark.png)}
aside a{color: #000000;
text-decoration: none}
/* 내비게이션 */
nav ul {list-style-type: none;
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
font-size: 0}
nav li {
display: inline;
font-size: 12px;
border-right: solid 1px #aaaaaa;
padding-left: 10px;
padding-right: 10px;
}
nav li:first-child {border-left: solid 1px #aaaaaa}
nav {
width: 900px;
margin-left: auto;
margin-right: auto;
text-align: right;
margin-top: -27px;
margin-bottom: 10px;
}
nav a {color: #000000;
text-decoration: none}