<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>공지사항 - DDONGFONE</title>
<link rel="stylesheet" href="style.css">
</head>
<body id="posts">
<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>
<section>
<h1>공지사항</h1>
<article>
<a href="news01.html">
<img src="K-7-thumb.png" alt="">
<h1>추석</h1>
<time datetime="2016-09-13T11:00">9월 13일 11:00am</time>
<p>추석 연휴 공지사항입니다</p>
</a>
</article>
<article>
<a href="news02.html">
<img src="shaomi2-thumb.jpg" alt="">
<h1>샤오미 보조배터리</h1>
<time datetime="2016-12-24T13:30">12월 24일 13:30pm</time>
<p>샤오미 보조배터리2입니다</p>
</a>
</article>
<article>
<a href="news03.html">
<img src="note1-thumb.jpg" alt="">
<h1>특가판매!</h1>
<time datetime="2016-12-24T13:30">12월 24일 13:30pm</time>
<p>노트1, 노트3네오등 특가판매입니다</p>
</a>
</article>
</section>
<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}
/* 기사 일람 페이지 */
#posts article img {float: left;
margin-right: 20px}
#posts article h1 {font-size: 24px}
#posts section{width: 900px;
margin-left: auto;
margin-right: auto}
#posts header {margin-bottom: 20px}
#posts time {font-size: 12px;
color: #ffffff;
background-color: #bdbc8f;
border-radius: 10px;
padding: 2px 20px 2px 20px}
#posts article a {color: #000000;
text-decoration: none;
display: block;
overflow: hidden;
padding: 20px}
#posts article a:hover {background-color: #ffe792}
#posts article {padding: 0}
'html,css' 카테고리의 다른 글
| mydevice.io (0) | 2021.11.10 |
|---|---|
| 메인 페이지 디자인 (0) | 2016.12.24 |
| 헤더와 어사이드에 링크 추가 (0) | 2016.12.23 |
| 이미지가 있는 페이지 작성 (0) | 2016.12.21 |
| CSS 수정 (0) | 2016.12.20 |
