-
<header>: 머리말
-
<nav>: 네비게이션 링크
-
<section>: 주제별 콘텐츠 영역
-
<article>: 콘텐츠 내용
-
<aside>: 본문 이외의 내용
-
<iframe>: 외부 문서 삽입
-
<footer>: 제작 정보와 저작권 정보
-
<address>: 제작자 정보와 연락처 정보
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>요안도라</title>
<link href="css/style3.css" rel="stylesheet" type="text/css"><!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</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>
<section class="content">
<h2>요안도라 소개</h2>
<h3>¤ 요안도라는 게스트 하우스(Guest House) 형식의 농어촌 민박입니다</h3>
<p>성산의 날씨는 다음주 내내 높은 구름에 햇살 가득이라고 합니다. 목요일이면 섭씨 27도까지 오른다고 하지만, 늘 부는 바람이 쾌적한 균형을 잡아 마당에 마당에 나가 앉아 있는 시간이 많아질듯 합니다.</p>
<p>오늘은 사진에 보이는 긴 돌담을 따라 들어오는 요안도레 올레 입구에 특곤색의 대문을 달았습니다.</p>
<p>내일은 두달 여동안 밖거리에 만든 데스트 하우스에 연백색의 황토 페인트를 칠할 예정입니다.<br>
그리고 이것저것 사소한 저이를 마치고 나면, 나이 드시고 젊고 한 미지의 새식구들을 설렘으로 만나고 함께하고, 도시의 바븐 생활로 소원해진 오래된 친구와의 우정을 이 제주에서 새롭게 열어나가기 위해 요안도라를 세상에 알리려고 합니다.</p>
<img src="images/banner2.png" width="700" height="233" alt="요안도라">
</section>
<aside class="sidebar">
<h3>¤ 알립니다</h3>
<p>게스트하우스 예약은 전화 070-###-#### 로 직접 통화하시는게 가장 정확하고 빠릅니다.
인터넷 전화이므로 시외 전화 요금이 부과되지 않습니다. </p>
<img src="images/2.jpg" alt="">
<img src="images/1.jpg" alt="">
<img src="images/4.jpg" alt="">
</aside>
<footer>
<address>
<p>제주특별자치도 남제주군 성산읍 수산리 000 번지 요안도라 </p>
<p>yoan##@naver.com</p>
</address>
<p> Copyright ⓒ. All rights reserved.</p>
</footer>
</div>
</body>
</html>
@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;
font-size:15px;
}
.navi a, .navi a:visited {
padding: 10px 5px 5px 35px;
display: inline;
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;
opacity:0.5;
text-align:center;
}
.sidebar img:hover{
border:1px solid #000;
opacity:1.0;
}
.content {
background-color: #FFFFFF;
padding-top:5px;
padding-left:10px;
width: 720px;
float: left;
}
footer {
padding: 10px 0;
background-color:#030;
color:#fff;
text-align:center;
clear: both;
}
header, section, footer, aside, article, figure {
display: block;
}
.banner {
margin: 0 10px 15px 10px;
padding:0;
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML5 레이아웃</title>
<style>
h1{font-size: 2em;}
h2{font-size: 1.5em;}
h3{font-size: 1.0em;}
p{
line-height: 20px;
font-size: 12px;
}
body{
font-family: "맑은 고딕", "고딕", "굴림";
}
#con{
width: 800px;
margin: 0 auto;
}
header{
width: 100%;
height: 150px;
background-color: #f46075;
background-image: url(images/nav2.png);
background-repeat: no-repeat;
background-position: right center;
}
header nav{
float: left;
width: 70%;
margin-top: 50px;
}
nav ul{
list-style-type: none;
}
nav ul li{
display: inline;
float: left;
font-weight: bold;
margin: 10px;
}
nav ul li a{
color: white;
text-decoration: none;
}
a:hover{
color: yellow;
}
section{
float: left;
width: 580px;
padding: 5px;
}
section article{
float: left;
height: 250px;
width: 220px;
margin: 5px;
padding: 15px;
border: 1px dotted #ccc;
}
aside{
float: right;
width: 250px;
height: auto;
border: 1px solid darkgreen;
text-align: center;
}
.at1, .at2, .at3, .at4{
transition: 2s;
-webkit-transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-ms-transition: 2s;
}
.at1:hover{
background-color: #cf9;
border:1px solid green;
}
.at2:hover{
background-color: #a2d0ff;
border:1px solid blue;
}
.at3:hover{
background-color: #ebcbfe;
border:1px solid purple;
}
.at4:hover{
background-color: #fc3;
border:1px solid red;
}
footer{
clear: both;
width: 800px;
margin-bottom: 0;
background-color: #333;
color: white;
text-align: center;
height: 50px;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">애완견 종류</a></li>
<li><a href="#">입양하기</a></li>
<li><a href="#">건강돌보기</a></li>
<li><a href="#">더불어살기</a></li>
</ul>
</nav>
</header>
<section>
<div id="con"></div>
<h2>강아지 용품 준비하기</h2>
<article class="at1">
<h3>강아지 집 </h3>
<p>강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 강아지의 집은 강아지가 다 큰 후에도 계속 쓸 수 있는 집으로 구입하세요.집을 구입하실 때는 박음질이 잘 되어 있는지, 세탁이 간편한 제품인지 꼭 확인하시고 고르시는 것이 좋습니다.</p>
</article>
<article class="at2">
<h3>강아지 먹이 </h3>
<p>강아지의 먹이는 꼭 어린 강아지용으로 나와있는 사료를 선택하세요. 강아지들은 사람에 비해 성장속도가 8배정도 빠르답니다. 따라서 강아지에게는 성장속도에 맞는 사료를 급여하셔야 합니다. 사람이 먹는 음식을 먹게 되면 양념과 향신료에 입맛이 익숙해지고, 비만이 될 가능성이 매우 높아집니다. 강아지용 사료는 생후 12개월까지 급여하셔야 합니다.</p>
</article>
<article class="at3">
<h3>밥그릇, 물병 </h3>
<p>밥그릇은 쉽게 넘어지지 않도록 바닥이 넓은 것이 좋습니다.물병은 대롱이 달린 것으로 선택하세요. 밥그릇에 물을 주게 되면 입 주변에 털이 모두 젖기 때문에 비위생적이므로 대롱을 통해서 물을 먹을 수 있는 물병을 마련하시는 것이 좋습니다.</p>
</article>
<article class="at4">
<h3>이름표, 목줄</h3>
<p>강아지를 잃어버릴 염려가 있으니 산책할 무렵이 되면 이름표를 꼭 목에 걸어주도록 하세요. 그리고 방울이 달린 목걸이를 하고자 하실 때는 신중하셔야 합니다. 움직일 때마다 방울이 딸랑 거리면 신경이 예민한 강아지들에게는 좋지 않은 영향을 끼칠 수 있기 때문입니다.</p>
</article>
</div>
</section>
<aside>
<img src="images/1.png" alt="리트리버">
<img src="images/2.png" alt="코카">
<img src="images/3.png" alt="비글">
</aside>
<footer>
<p>Copyright 2012 funnycon</p>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>애완견 돌보기</title>
<link rel="stylesheet" href="css/layout-result.css" type="text/css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">애완견 종류</a></li>
<li><a href="#">입양하기</a></li>
<li><a href="#">건강돌보기</a></li>
<li><a href="#">더불어살기</a></li>
</ul>
</nav>
</header>
<article>
<h2>애완견 종류</h2>
<section>
<h3>활달한 강아지</h3>
<dl>
<dt>요크셔 테리어</dt>
<dd>생기있고 활달한 성질을 가지고 있으며 자신보다 몸집이 큰 개나 집에 들어온 침입자를 겁내는 일이 없어 좋은 번견이고 우리나라 최고의의 가정견으로 자리 잡고 있다.</dd>
<dt>말티즈</dt>
<dd>애정이 많고, 충실하며 활발한 성격을 소유하고있다. 이 종은 1급 가정견으로 요크셔테리어와 함께 우리나라 최고의 가정견으로 자리잡고 있다.</dd>
<dt>포메 라이언</dt>
<dd>활기차고 명랑한 개로 유명하고, 걷는 모습이 우아하다.충실하고 우호적인 성격이 가장 먼저 거론된다. </dd>
<dt>골든 리트리버</dt>
<dd>이 견종은 충성심이 강하고 성격이 활달하여 어린아이나 여성이 상대하기에 적합한 견종이다.참을성 또한 강하여 현재는실내에서도 많이 길러지고 있다.</dd>
</dl>
</section>
<section>
<h3>온순한강아지</h3>
<dl>
<dt>쉬즈</dt>
<dd>얼굴에서 풍기는 모습처럼 온순, 쉽게 친숙해지고 우호적이며,어린아이나 여성들이 기르기에 적합한 견종이다.</dd>
<dt>퍼그</dt>
<dd>매우 사려가 깊고 사랑스러운 견종이며 그다지 손질이 필요하지 않고 식사량에 비해 많은 운동량이 필요하지 않다.</dd>
<dt>래브라도 리트리버</dt>
<dd>침착하고 영리하여 어린이들을 안심하고 맡길 수 있다. 사람을 즐겁게 해주려는 성질이 있다 공을 가지고 노는 것을 가장 좋아한다. 현재 맹인 안내견과 마약견으로 사용중이다. 온순한 강아지를 좋아하는 분에게는 적합한 견종이다.</dd>
</dl>
</section>
<section>
<h3>사납지만 복종적인 강아지</h3>
<dl>
<dt>미니어쳐핀셔</dt>
<dd>경계심이 강하고 영리하며 작은 몸집에 비해 매우 용감하다. 주인에게 매우 복종적이며 작은 몸집에 보디가드 역할을 충실히 수행한다.</dd>
<dt>푸들</dt>
<dd>사납진 않으나, 상당히 복종적이며, 지능지수가 애완견종 중 가장 뛰어나다.</dd>
<dt>폭스테리어</dt>
<dd>가정에서 키우기에 적합한 품종이다. 보호본능이 강하고 정이 많다. 하지만 사냥을 하던 본능이 조금은 남아있어 사나운 면이 있다. 이종을 좋은 품종으로 기르기 위해서는 어릴 때부터 엄한 훈련이 필요하기도 하다.</dd>
</dl>
</section>
</article>
<aside>
<h3>건강한 강아지는</h3>
<ul>
<li>코가 젖어있고 눈꼽이 없어야 합니다.</li>
<li>털에 윤기가 있는 것을 골라야 합니다.</li>
<li>입에서 고약한 냄새가 나면 병이 있다는 증거입니다.</li>
<li>가장 활발하게 움직이는 녀석을 고르는게 좋습니다.</li>
<li>강아지들 중에서 적당한 체구를 유지한 강아지가 좋습니다.</li>
</ul>
</aside>
<footer>
<p>Copyright 2012 funnycom</p>
</footer>
</body>
</html>
body{
font-family: "맑은 고딕", "고딕", "굴림";
}
header{
width: 80%;
margin-right: auto;
margin-left: auto;
background-color: #069;
padding: 10px;
text-align: center;
overflow: hidden; /*크기보다 내용이 많은 경우 넘쳐나는 부분을 감춤*/
}
header nav{
width: 60%;
margin-left: auto;
margin-right: auto;
}
nav ul{
list-style-type: none;
}
nav ul li{
display: inline;
margin: 15px;
}
nav ul li a{
color: white;
text-decoration: none;
}
article{
width: 80%;
margin-right: auto;
margin-left: auto;
border: 5px solid #333;
padding: 5px;
overflow: hidden;
}
article section{
width: 30%;
height: 650px;
float: left;
margin: 5px;
padding: 5px;
border: 1px dotted #333;
}
section h3{
background: url(../images/bg-note.png) no-repeat left center;
padding-left: 30px;
}
aside{
clear: both;
margin: 0 auto;
width: 80%;
height: auto;
padding: 10px;
background-color: #99cc33;
}
footer{
clear: both;
width: 80%;
margin-left: auto;
margin-right: auto;
padding: 10px;
background-color: #333;
color: white;
text-align: center;
}
'Learning > HTML&JavaScript' 카테고리의 다른 글
| CSS3 선택자 (0) | 2020.07.24 |
|---|---|
| HTML 멀티미디어 (0) | 2020.07.24 |
| CSS 레이아웃 (0) | 2020.07.21 |
| CSS와 박스 모델 (0) | 2020.07.21 |
| 스타일과 스타일시트 글꼴 (0) | 2020.07.17 |
