가운데 내용 부분에 들어갈 곳을 article 태그로 정의 한다
그 중에 넓은 부분을 section, 좁은 부븐을 aside로 지정해본다.
(앞에서 했던 내용에 추가한다.)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제주다운 Joandaro</title>
<link href="../css/style2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<header>
<hgroup>
<h1>Joandora</h1>
<h2>가장 제주다운 수산리집</h2>
</hgroup>
</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>
<p style="font-weight: bold; font-size: 16px;">
- 요안드라는 게스트 하우스(Guest house) 형식의 농어촌 민박입니다.
</p>
<p>
성산의 날씨는 다음주 내내 높은 구름에 햇살 가득이라고 합니다. 목요일이면 섭씨 27도까지 오른다고 하지만, 늘 부는 바람이 쾌적한 균형을 잡아 밖에 나가 앉아 있는 시간이
많아질듯 합니다.
</p>
<p>
오늘은 사진에 보이는 긴 돌담을 따라 들어오는 요안도레 올레 입구에 특곤색의 대문을 닮았습니다.
</p>
<p>
내일은 두달 여 동안 밖거리에 만든 데스트 하우스에 연백색의 황토 페인트를 칠할 예정입니다.<br>
그리고 이것저것 사소한 저이를 마치고 나면, 나이 드시고 젊고 한 미지의 새식들을 설렘으로 만나고 함께하고, 도시의 바쁜 생활로 소원해진 오래된 친구와의 우정을 이 제주에서 새롭게
열어나가기 위해 요안도라를 세상에 알리려고 합니다.
</p>
<img src="../images/banner2.png" width="700" height="233" class="banner">
</section>
</article>
<aside class="sidebar">
<h3>- 알립니다</h3>
<p>
게스트하우스 전화 070-###-####로 직접 통화하시는게 가장 정확하고 빠릅니다. 인터넷 전화이므로 시외 전화 요금이 부과되지 않습니다.
</p>
<img src="../images/2.jpg" alt="민박 전경1">
<img src="../images/1.jpg" alt="민박 전경2">
<img src="../images/4.jpg" alt="민박 전경3">
</aside>
</div>
</body>
</html>
@charset "utf-8";
body {
font: 14px "맑은 고딕";
/*
font-size: 14px;
font-family: "맑은 고딕";
*/
}
.container {
position: absolute;
width: 960px;
margin: 0 auto;
background-color: white;
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: 1px 1px 1px #000;
}
.navi {
position: relative;
background-color: rgb(226, 226, 137);
margin-top: 15px;
width: 960px;
height: 60px;
}
.navi ul {
padding-top: 10px;
padding-bottom: 5px;
list-style: none;
height: 40px;
}
.navi ul li {
display: inline-block;
font-size: 15px;
}
.navi a {
padding: 10px 5px 5px 35px;
color: white;
text-decoration: none;
}
.navi a:hover, .navi a:active, .navi a:focus {
text-shadow: 2px 2px 2px #000;
color: #FC0;
}
.banner {
margin: 0 10px 15px 10px;
padding: 0;
}
.content {
background-color: white;
padding-top: 5px;
padding-left: 10px;
width: 720px;
float: left;
}
header, section, aside, article, footer {
display: block;
}
.sidebar {
float: right;
width: 200px;
height: 550px;
background-color: rgb(203, 253, 215);
padding-top: 20px;
padding-left: 10px;
padding-right: 10px;
}
.sidebar img {
margin-bottom: 5px;
border: 1px solid #ccc;
text-align: center;
}
728x90
반응형
'HTML > HTML 기초' 카테고리의 다른 글
| [HTML] footer, address 사용해보기 (0) | 2020.07.29 |
|---|---|
| [HTML] iframe 사용해보기 (0) | 2020.07.29 |
| [HTML] header부분 (0) | 2020.07.29 |
| [HTML] input 기타 type 알아보기 (0) | 2020.07.28 |
| [HTML] select 사용해보기 (2) | 2020.07.28 |
