section

by rootjang

HTML

<!DOCTYPE html>
<html lang="ko-KR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div class="container">
      <header>
          <h1>Joandora</h1>
          <h2>가장 제주다운 수산리집</h2>
      </header>
      <nav class="navi">
        <ul>
          <li><a href="#">이용 안내</a></li>
          <li><a href="#">객실 소개</a></li>
          <li><a href="#">예약 방법</a></li>
          <li><a href="#">예약하기</a></li>
        </ul>
      </nav>
      <article>
        <section class="content">
          <h2>요안도라</h2>
          <h3>요안도라는 게스트 하우스 형식의 농어촌 민박입니다.</h3>
          <p>성산의 날씨는 다음주 내내 높은 구름에 햇살 가득이라고 합니다. 목요일이면 섭씨 27도까지 오른다고 하지만, 늘 부는 바람이 쾌적한 균형을 잡아 마당에 마당에 나가 앉아 있는 시간이 많아질듯 합니다.</p>
					<p>오늘은 사진에 보이는 긴 돌담을 따라 들어오는 요안도레 올레 입구에 특곤색의 대문을 달았습니다.</p>
					<p>
							내일은 두달 여동안 밖거리에 만든 데스트 하우스에 연백색의 황토 페인트를 칠할 예정입니다. <br>
							그리고 이것저것 사소한 저이를 마치고 나면, 나이 드시고 젊고 한 미지의 새식구들을 설렘으로 만나고 함께하고, 도시의 바븐 생활로 소원해진 오래된 친구와의 우정을 이 제주에서 새롭게 열어나가기 위해 요안도라를 세상에 알리려고 합니다.
					</p>
        </section>
      </article>
      <aside class="sidebar">
        <h3>알립니다.</h3>
        <p>게스트하우스 예약은 전화 070-###-#### 로 직접 통화하시는게 가장 정확하고 빠릅니다.
						인터넷 전화이므로 시외 전화 요금이 부과되지 않습니다. </p>
      </aside>
  </div>
</body>
</html>

CSS

@charset "utf-8";

body {
	font: 14px 맑은 고딕;
}
.container {
	position:absolute;
	width: 960px;
	margin : 0 auto;
	background-color:#fff;
	border:1px solid #E7E7E7
}
header {
	position:relative;
	height: 280px;
	background-image: url('../images/bg.png');
	background-repeat: no-repeat;
	background-position: left top;
}
header h1{
	position:absolute;
	right:20px;
	bottom:70px;
	font-size:3em;		
	color:#FFC;	
	text-shadow:1px 2px 2px #000;		
}
header h2{
	position:absolute;
	right:20px;
	bottom:30px;
	font-size:2em;
	color:#FF0;	
	text-shadow:0px 1px 1px #000;	
}
.navi{
	position:relative;
	background:#271717;
	margin-top:-15px;
	width:960px;
	height:60px;
}

.navi ul{
	list-style: none; 
	height:40px;
	padding-top:10px;
	padding-bottom:5px;
}
.navi ul li {
	display:inline;
	float:left;
	font-size:15px;
}
.navi a, .navi a:visited {
	padding: 10px 5px 5px 35px;
	display: block;
	color:#fff;
	width: 150px; 
	text-decoration: none;

}
.navi a:hover, .navi a:active, .navi a:focus {
		text-shadow:0px 2px 2px #000;
		color:#FC0;
}

.sidebar {
	float: right;
	width: 200px;
	height:550px;
	background-color:#DFD;
	padding-top:20px;
	padding-left:10px;
	padding-right:10px;
}

.sidebar img {
	margin-bottom: 5px;
	border: 1px solid #ccc;
	text-align:center;
}

.content {
	background-color: #FFFFFF;	
	padding-top:5px;
	padding-left:10px;
	width: 720px;
	float: left;
}

header, section, footer, aside, article, figure {
	display: block;
}

.banner {
	margin: 0 10px 15px 10px;
	padding:0;	
}