<!doctype html><htmllang="ko"><head><metacharset="utf-8"><title>요안도라</title><linkhref="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><divclass="container"><header><h1>Joandora</h1><h2>가장 제주다운 수산리집</h2></header><navclass="navi"><ul><li><ahref="#">이용 안내</a></li><li><ahref="#">객실 소개</a></li><li><ahref="#">예약 방법</a></li><li><ahref="#">예약 하기</a></li></ul></nav><sectionclass="content"><h2>요안도라 소개</h2><h3>¤ 요안도라는 게스트 하우스(Guest House) 형식의 농어촌 민박입니다</h3><p>성산의 날씨는 다음주 내내 높은 구름에 햇살 가득이라고 합니다. 목요일이면 섭씨 27도까지 오른다고 하지만, 늘 부는 바람이 쾌적한 균형을 잡아 마당에 마당에 나가 앉아 있는 시간이 많아질듯 합니다.</p><p>오늘은 사진에 보이는 긴 돌담을 따라 들어오는 요안도레 올레 입구에 특곤색의 대문을 달았습니다.</p><p>내일은 두달 여동안 밖거리에 만든 데스트 하우스에 연백색의 황토 페인트를 칠할 예정입니다.<br>
그리고 이것저것 사소한 저이를 마치고 나면, 나이 드시고 젊고 한 미지의 새식구들을 설렘으로 만나고 함께하고, 도시의 바븐 생활로 소원해진 오래된 친구와의 우정을 이 제주에서 새롭게 열어나가기 위해 요안도라를 세상에 알리려고 합니다.</p><imgsrc="images/banner2.png"width="700"height="233"alt="요안도라"></section><asideclass="sidebar"><h3>¤ 알립니다</h3><p>게스트하우스 예약은 전화 070-###-#### 로 직접 통화하시는게 가장 정확하고 빠릅니다.
인터넷 전화이므로 시외 전화 요금이 부과되지 않습니다. </p><imgsrc="images/2.jpg"alt=""><imgsrc="images/1.jpg"alt=""><imgsrc="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>
<!DOCTYPE html><htmllang="ko"><head><metacharset="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;
}
headernav{
float: left;
width: 70%;
margin-top: 50px;
}
navul{
list-style-type: none;
}
navulli{
display: inline;
float: left;
font-weight: bold;
margin: 10px;
}
navullia{
color: white;
text-decoration: none;
}
a:hover{
color: yellow;
}
section{
float: left;
width: 580px;
padding: 5px;
}
sectionarticle{
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><ahref="#">애완견 종류</a></li><li><ahref="#">입양하기</a></li><li><ahref="#">건강돌보기</a></li><li><ahref="#">더불어살기</a></li></ul></nav></header><section><divid="con"></div><h2>강아지 용품 준비하기</h2><articleclass="at1"><h3>강아지 집 </h3><p>강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 강아지의 집은 강아지가 다 큰 후에도 계속 쓸 수 있는 집으로 구입하세요.집을 구입하실 때는 박음질이 잘 되어 있는지, 세탁이 간편한 제품인지 꼭 확인하시고 고르시는 것이 좋습니다.</p></article><articleclass="at2"><h3>강아지 먹이 </h3><p>강아지의 먹이는 꼭 어린 강아지용으로 나와있는 사료를 선택하세요. 강아지들은 사람에 비해 성장속도가 8배정도 빠르답니다. 따라서 강아지에게는 성장속도에 맞는 사료를 급여하셔야 합니다. 사람이 먹는 음식을 먹게 되면 양념과 향신료에 입맛이 익숙해지고, 비만이 될 가능성이 매우 높아집니다. 강아지용 사료는 생후 12개월까지 급여하셔야 합니다.</p></article><articleclass="at3"><h3>밥그릇, 물병 </h3><p>밥그릇은 쉽게 넘어지지 않도록 바닥이 넓은 것이 좋습니다.물병은 대롱이 달린 것으로 선택하세요. 밥그릇에 물을 주게 되면 입 주변에 털이 모두 젖기 때문에 비위생적이므로 대롱을 통해서 물을 먹을 수 있는 물병을 마련하시는 것이 좋습니다.</p></article><articleclass="at4"><h3>이름표, 목줄</h3><p>강아지를 잃어버릴 염려가 있으니 산책할 무렵이 되면 이름표를 꼭 목에 걸어주도록 하세요. 그리고 방울이 달린 목걸이를 하고자 하실 때는 신중하셔야 합니다. 움직일 때마다 방울이 딸랑 거리면 신경이 예민한 강아지들에게는 좋지 않은 영향을 끼칠 수 있기 때문입니다.</p></article></div></section><aside><imgsrc="images/1.png"alt="리트리버"><imgsrc="images/2.png"alt="코카"><imgsrc="images/3.png"alt="비글"></aside><footer><p>Copyright 2012 funnycon</p></footer></body></html>
<!DOCTYPE html><htmllang="ko"><head><metacharset="utf-8"><title>애완견 돌보기</title><linkrel="stylesheet"href="css/layout-result.css"type="text/css"></head><body><header><nav><ul><li><ahref="#">애완견 종류</a></li><li><ahref="#">입양하기</a></li><li><ahref="#">건강돌보기</a></li><li><ahref="#">더불어살기</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>
<!doctype html><htmllang="ko"><head><metacharset="utf-8"><title> 웹 폼</title><style>body {
background-color:#fff;
}
formfieldset{
margin-bottom:25px;
}
formlegend{
font-size:15px;
font-weight:600;
}
formlabel.reg {
font-size:14px;
color:#390;
font-weight:bold;
width:110px;
float:left;
text-align:right;
margin-right:10px;
}
formulli{
list-style:none;
margin: 15px0;
font-size:14px;
}
#member, #stuffs {
width:50px;
}
#pre {
margin-left:15px;
}
</style></head><body><form><fieldset><legend>신청 과목</legend><p>이 달에 신청할 과목을 선택하세요(1과목만 가능)</p><label><inputtype="radio"name="subject"value="spk">회화</label><label><inputtype="radio"name="subject"value="grm">문법</label><label><inputtype="radio"name="subject"value="wr">작문</label></fieldset><fieldset><legend>메일링</legend><p>메일로 받고 싶은 뉴스 주제를 선택하세요 (복수 선택 가능)</p><label><inputtype="checkbox"name="mailing1"value="news">해외 단신</label><label><inputtype="checkbox"name="mailing2"value="dialog">5분 회화</label><label><inputtype="checkbox"name="mailing3"value="pops">모닝팝스</label></fieldset></form></body></html>
<!doctype html><htmllang="ko"><head><metacharset="utf-8"><title> 웹 폼</title></head><body><form><fieldset><legend>과 티셔츠 설문</legend><p>올해 과 티(T)를 만들려고 합니다. 원하는 색상을 추천해주세요</p><label>선호색상<inputtype="color"value="#00FF00"></label></fieldset></form></body></html>
<!DOCTYPE html><htmllang="ko"><head><metacharset="utf-8"><title>date</title></head><body><form><fieldset><legend><h3>조회기간 선택</h3></legend><label>시작: <inputtype="date"id="start"value="2020-07-01"></label><label>끝: <inputtype="date"id="end"value="2020-12-31"></label></fieldset><fieldset><legend><h3>대관시간 선택(오늘)</h3></legend><label>시작 시간 <inputtype="time"value="09:00"id="start"></label><label>종료 시간 <inputtype="time"value="18:00"id="end"></label></fieldset><fieldset><legend><h3>대관시간 선택(다른날짜)</h3></legend><label>시작 시간<inputtype="datetime-local"value="2020-07-01T09:00"></label><label>종료 시간<inputtype="datetime-local"value="2020-12-31T09:00"></label></fieldset></form></body></html>
<a href="#"> 이용. 이동하고자 하는 단락에 id를 부여하고 하이퍼링크 주소에는 id를 뜻하는 #을 앞에 붙여줌
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>링크 만들기</title>
</head>
<body>
<h1>앵커 만들기</h1>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<ul id="menu">
<li><a href="#content1"> 메뉴 1</a></li>
<li><a href="#content2"> 메뉴 2</a></li>
<li><a href="#content3"> 메뉴 3</a></li>
</ul>
<h2 id="content1">내용1</h2>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p><a href="#menu">[홈으로]</a></p>
<h2 id="content2">내용2</h2>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p><a href="#menu">[홈으로]</a></p>
<h2 id="content3">내용3</h2>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p><a href="#menu">[홈으로]</a></p>
</body>
</html>
<!DOCTYPE html><htmllang="ko"><head><metacharset="utf-8"><title>표 만들기</title><style>table, th, td {
border:1px solid #ccc;
}
td, th {
padding:10px; /* 셀 테두리와 내용 사이의 간격(패딩) */
}
</style></head><body><table><caption><strong>Modern Browser</strong><p>국내에서 자주 사용하는 모던 브라우저</p></caption><tr><th>브라우저</th><th>제조업체</th><th>다운로드</th></tr><tr><th>크롬(Chrome)</th><td>Google</td><td>https://www.google.com/chrome/</td></tr><tr><th>파이어폭스(Firefox)</th><td>Mozilla</td><td>https://mozilla.org/ko/firefox</td></tr><tr><th>엣지(Edge)</th><td>Microsoft</td><td>https://www.microsoft.com/ko-kr/windows/microsoft-edge</td></tr></table></body></html>
<!DOCTYPE html><htmllang="ko"><head><metacharset="utf-8"><title>표 만들기</title><style>table, th, td {
border:1px solid #ccc;
}
td, th {
padding:10px; /* 셀 테두리와 내용 사이의 간격(패딩) */
}
</style></head><body><figure><figcaption><p>국내에서 자주 사용하는 <b>모던브라우저</b></p></figcaption><table><tr><th>브라우저</th><th>제조업체</th><th>다운로드</th></tr><tr><th>크롬(Chrome)</th><td>Google</td><td>https://www.google.com/chrome/</td></tr><tr><th>파이어폭스(Firefox)</th><td>Mozilla</td><td>https://mozilla.org/ko/firefox</td></tr><tr><th>엣지(Edge)</th><td>Microsoft</td><td>https://www.microsoft.com/ko-kr/windows/microsoft-edge</td></tr></table></figure></body></html>
표 구조 정의하기: <thead>, <tbody>, <tfoot>
<!DOCTYPE html><htmllang="ko"><head><metacharset="utf-8"><title>표 만들기</title><style>table, th, td {
border:1px solid #ccc;
}
th, td {
width:80px; /* 셀의 너비 */padding:10px; /* 셀 테두리와 내용 사이의 간격(패딩) */
}
thead, tfoot {
background : #eeeeee; /* thead와 tfoot의 배경 색 */
}
</style></head><body><table><caption>제주특별자치도 학교현황(2015.4.1 기준)</caption><thead><tr><th>구분</th><th>학교수</th><th>학급수</th><th>학생수</th><th>교원수</th></tr></thead><tbody><tr><th>유치원</th><td>117</td><td>252</td><td>5,547</td><td>474</td></tr><tr><th>초등학교</th><td>111</td><td>1,720</td><td>37,686</td><td>2,632</td></tr><tr><th>중학교</th><td>44</td><td>699</td><td>21,274</td><td>1,412</td></tr><tr><th>고등학교</th><td>29</td><td>676</td><td>22,019</td><td>1,433</td></tr><tr><th>특수학교</th><td>3</td><td>90</td><td>428</td><td>160</td></tr></tbody><tfoot><tr><th>합계</th><td>300</td><td>3,437</td><td>86,954</td><td>6,111</td></tr></tfoot></table></body></html>
열끼리 묶어 스타일 지정: <col>, <colgroup>
<!DOCTYPE html><htmllang="ko"><head><metacharset="utf-8"><title>표 만들기</title><style>table, th, td {
border:1px solid #ccc;
}
td {
width:100px; /* 셀 너비 */height:30px; /* 셀 높이 */
}
</style></head><body><tableborder="1"><caption>colgroup 연습</caption><colgroup><col><colspan="2"style="background-color: blue;"><colstyle="background-color: yellow;"></colgroup><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr></table></body></html>
<!DOCTYPE html><htmllang="ko"><head><metacharset="utf-8"><title>1박 2일 가족 여행 코스</title></head><body><ul><li>1일차</li><oltype="a"><li>해녀박물관</li><li>낚시체험</li></ol><li>2일차</li><oltype="a"start="3"><li>용눈이오름</li><li>만장굴</li><li>카약체험</li></ol></ul></body></html>
<!DOCTYPE html><htmllang="ko"><head><metacharset="utf-8"><title>1박 2일 가족 여행 코스</title></head><body><h1>관광 안내 전화</h1><p>한국관광공사에서는 전국의 관광안내소와 공동으로 여러분의 여행편의를 위해 관광안내전화 1330 서비스를 연중무휴 실시하고 있습니다.
</p><p>
1330에는 해당 지역의 지도와 관광 가이드북, 관광안내소를 대신할 수 있을 정도의 다양한 정보가 있습니다. 원하는 관광지는 물론이며 숙박, 교통, 음식점 등의 자세한 정보를 한국어를 비롯한 영어, 중국어, 일어의 3개 국어로도 이용 가능합니다.
<ul><li>일반전화: (국번없이) 1330</li><li>휴대전화: 064-1330</li></ul></p></body></html>
