![[2021/12/23]국비지원 CSS3 5-(4) travelzoo 해외 사이트 클론](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FTjje1%2Fbtrr2YhYXai%2FAAAAAAAAAAAAAAAAAAAAAIGdTwXLeSO96UfUywMCSQYZhMq-yJ4HVgwEXMAw7YWa%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3D%252BzPdAJxEzMccFP1EVk5nQZU57T8%253D)
travelzoo 라는 해외사이트 main 클론
이 날은 하루 종일 수업 중 제출하는 과제들이었다.
수강생 오지게 바쁜 날이었음
원본
(체크박스 색 무시)
작업내용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Travelzoo</title>
<style type="text/css">
body,div,h1,h2,h3,p,form,fieldset,dl,dt,dd,ul,li,address{padding: 0;margin: 0;}
ul,li{list-style: none;}
body{font-size: 12px;font-family: Dotum, "돋움",sans-serif;}
img,fieldset{border:none;}
img,input{vertical-align:middle;}
a{text-decoration: none;}
a:hover{text-decoration: underline;}
#skipNavi, .blind{position:absolute;left:0;top:0;width:0;height:0;font-size:0;line-height:0;
visibility:hidden;text-indent: -9999px;overflow: hidden;}
hr{display:none;}
address{font-style:normal;}
/* */
#wrap{width:820px;border:1px solid red;margin:0 auto;}
#header:after{content: "";display: block;clear: both;}
#header{border-bottom :3px solid #00f;margin-bottom:10px;}
#header h1{margin:10px 0;}
#header p{font-style:italic}
#container{width:820px;padding:10px 0;clear:both;}
#container form{background:#eee;border:1px solid #ccc;padding:10px;margin-bottom:20px;}
.Asia_pacific{width: 250px;border:1px solid red;float:left;margin:0 30px 30px 0px;}
.Americas{width: 250px;border:1px solid red;float:left;}
.Europe{width: 250px;border:1px solid red;float:right;}
.Asia_pacific dd.img,.Americas dd.img,.Europe dd.img{float:left;}
.Asia_pacific dt,.Americas dt,.Europe dt{width:180px;float:right;}
.Asia_pacific dd.txt,.Americas dd.txt,.Europe dd.txt{width: 180px;float:right;}
.Asia_pacific dl,.Americas dl,.Europe dl{width: 250px; margin:10px 0}
.Asia_pacific dl::after,.Americas dl::after,.Europe dl::after{content: "";display:block;clear:both;}
.Asia{width:820px;border:1px solid red;clear:both;margin:10px 0px;}
#footer{position:relative;background:#eee;border-top:1px solid #ccc;padding:20px 5px;}
#footer::after{content: "";display: block;clear:both;}
#footer>address li{display:inline;}
#footer>p{width:200px;position:absolute; top: 15px; right:0;padding:5px 0;}
#footer>p>label {padding-left : 10px; }
</style>
</head>
<body>
<!-- 본문 바로가기 -->
<div id="skipNavi"><a href="#container">본문 바로가기</a></div>
<hr>
<!-- // 본문 바로가기 -->
<div id="wrap">
<!-- header -->
<div id="header">
<h1><img src="images/logo.gif" alt="Travelzoo"></h1>
<p>The Deal Experts. Over 21 million Subscribers Worldwide.</p>
</div>
<!-- //header -->
<!-- container -->
<div id="container">
<h2>Select Your Site</h2>
<form action="/" method="post">
<legend class="blind">select your site</legend>
<fieldset>
<input type="checkbox" id="select" name="slct"><label for="slct">this selection my default Travelzoo site and skip this page in the future.</label></input>
</fieldset>
</form>
<hr>
<div class="Asia_pacific">
<h3>Asia Pacific</h3>
<dl>
<dt>Australia</dt>
<dd class="img"><img src="images/a.jpg" alt="호주 국기"></dd>
<dd class="txt"><a href="#">www.travelzoo.com.au</a></dd>
</dl>
<dl>
<dt>中国</dt>
<dd class="img"><img src="images/ca.jpg" alt="오성홍기"></dd>
<dd class="txt"><a href="#">cn.travelzoo.com</a></dd>
</dl>
<dl>
<dt>香港特區</dt>
<dd class="img"><img src="images/hong.jpg" alt="홍콩 국기"></dd>
<dd class="txt"><a href="#">www.travelzoo.com.hk</a></dd>
</dl>
<dl>
<dt>日本</dt>
<dd class="img"><img src="images/j.jpg" alt="일장기"></dd>
<dd class="txt"><a href="#">www.travelzoo.co.jp</a></dd>
</dl>
</div>
<div class="Americas">
<h3>Americas</h3>
<dl>
<dt>Canada</dt>
<dd class="img"><img src="images/canada.jpg" alt="캐나다국기"></dd>
<dd class="txt"><a href="#">www.travelzoo.ca</a></dd>
</dl>
<dl>
<dt>U.S.A.</dt>
<dd class="img"><img src="images/usa.jpg" alt="성조기"></dd>
<dd class="txt"><a href="#">www.travelzoo.com</a></dd>
</dl>
</div>
<div class="Europe">
<h3>Europe</h3>
<dl>
<dt>Deutschland</dt>
<dd class="img"><img src="images/germany.jpg" alt="독일국기"></dd>
<dd class="txt"><a href="#">www.travelzoo.de</a></dd>
</dl>
<dl>
<dt>España</dt>
<dd class="img"><img src="images/spain.jpg" alt="스페인국기"></dd>
<dd class="txt"><a href="#">www.travelzoo.es</a></dd>
</dl>
<dl>
<dt>France</dt>
<dd class="img"><img src="images/fanace.jpg" alt="프랑스국기"></dd>
<dd class="txt"><a href="#">www.travelzoo.fr</a></dd>
</dl>
<dl>
<dt>United Kingdom</dt>
<dd class="img" class="img"><img src="images/unitied.jpg" alt="영연방기"></dd>
<dd class="txt"><a href="#">www.travelzoo.co.uk</a></dd>
</dl>
</div>
<hr>
<div class="Asia">
<dl>
<dt class="blind">taiwan</dt>
<dd>台灣</dd>
<dd><a href="#">www.travelzoo.com.tw</a></dd>
</dl>
<dl>
<dt class="blind">asia in english</dt>
<dd>Asia in English</dd>
<dd><a href="#">www.travelzoo.com/ap</a></dd>
</dl>
</div>
</div>
<!-- //container -->
<!-- footer -->
<div id="footer">
<address>
<ul>
<li>Follow Us : </li>
<li><img src="images/icon_facebook_12x12.gif" alt="facebook"> <a href="#">Facebook</a> </li>
<li><img src="images/icon_twitter_12x12.gif" alt="twitter"> <a href="#">Twitter</a> </li>
<li><a href="#">Twitter</a> | </li>
<li><a href="#">Privacy Policy</a> | </li>
<li><a href="#">Disclaimer</a> </li>
</ul>
<p>©2020 Travelzoo Inc. - All Rights Reserved.</p>
</address>
<p>
<input type="image" src="images/logo_fly_footer_compact.gif" alt="fly.com"><label for="find">Find cheap flights</label>
</p>
</div>
<!-- //footer -->
</div>
</body>
</html>
결과물
( 복붙 수준 지렸쥬? )