노력이 좋아서
<step33>'울산관광 웹시안 및 구현'
zoaseo
2022. 5. 4. 16:11
http://gmlwo2854.dothome.co.kr/Ulsan/
Document
여행지 마우스를 대보세요 자연 자연 자연을 찾아 떠나보자! 울산의 여러 자연을 찾아서 떠나보게 될 기회입니다!!! 레져 레져 레져를 해보자! 등산 등 다양한 레져 활동을 해보세요!! 체험 체험
gmlwo2854.dothome.co.kr
1) index.html
<!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>Document</title>
<link rel="stylesheet" href="./style.css">
<script defer src="./main.js"></script>
</head>
<body>
<div id="wrap">
<header>
<div class="header_wrap">
<div id="top_header">
<div><a href="#"><img src="./img/top_logo.png" alt=""></a></div>
<p><input type="text"></p>
<div><a href="#"><img src="./img/icon_search_on.png" alt=""></a></div>
<ul>
<li><a href="#">로그인</a></li>
<li><a href="#">회원가입</a></li>
<li id="langli"><a href="#">LANGUAGE</a><ul id="lang">
<li><a href="#">kor</a></li>
<li><a href="#">eng</a></li>
<li><a href="#">chi</a></li>
</ul></li>
</ul>
<div><a href="#"><img src="./img/go_ulsan.png" alt=""></a></div>
</div>
<div id="bottom_header">
<div id="snstop"><img src="./img/sns_ir.png" alt=""></div>
<ul>
<li><a href="#">추천</a><ul>
<li><a href="#">월별추천</a></li>
<li><a href="#">일정코스</a></li>
<li><a href="#">네티즌 추천</a></li>
<li><a href="#">울산12경</a></li>
<li><a href="#">영남알프스</a></li>
<li><a href="#">축제행사</a></li>
</ul></li>
<li><a href="#">여행지</a><ul>
<li><a href="#">자연</a></li>
<li><a href="#">레져</a></li>
<li><a href="#">체험</a></li>
<li><a href="#">문화/유적</a></li>
<li><a href="#">먹거리</a></li>
<li><a href="#">숙박</a></li>
<li><a href="#">쇼핑</a></li>
</ul></li>
<li><a href="#">여행정보</a><ul>
<li><a href="#">관광가이드북</a></li>
<li><a href="#">관광안내도</a></li>
<li><a href="#">관광안내서비스</a></li>
<li><a href="#">응급의료서비스</a></li>
<li><a href="#">문화관광해설사</a></li>
</ul></li>
<li><a href="#">여행이야기</a><ul>
<li><a href="#">나만의 여행일정</a></li>
<li><a href="#">내주변</a></li>
<li><a href="#">여행영상</a></li>
<li><a href="#">여행사진</a></li>
<li><a href="#">관련사이트</a></li>
</ul></li>
</ul>
<a href="#"><div id="sitemap">
<span></span>
<span></span>
<span></span>
<ul class="siteul">
<li><a href="#">추천</a><ul>
<a href="#">
<li>월별추천</li>
</a><a href="#">
<li>일정코스</li>
</a><a href="#">
<li>네티즌 추천</li>
</a><a href="#">
<li>울산12경</li>
</a><a href="#">
<li>영남알프스</li>
</a><a href="#">
<li>축제행사</li>
</a>
</ul></li>
<li><a href="#">여행지</a><ul>
<a href="#">
<li>자연</li>
</a><a href="#">
<li>레져</li>
</a><a href="#">
<li>체험</li>
</a><a href="#">
<li>문화/유적</li>
</a><a href="#">
<li>먹거리</li>
</a><a href="#">
<li>숙박</li>
</a><a href="#">
<li>쇼핑</li>
</a>
</ul></li>
<li><a href="#">여행정보</a><ul>
<a href="#">
<li></li>
</a><a href="#">
<li>관광가이드북</li>
</a><a href="#">
<li>관광책자신청</li>
</a><a href="#">
<li>관광안내서비스</li>
</a><a href="#">
<li>응급의료서비스</li>
</a><a href="#">
<li>문화관광해설사</li>
</a>
</ul></li>
<li><a href="#">여행이야기</a><ul>
<a href="#">
<li>나만의 여행일정</li>
</a><a href="#">
<li>내주변</li>
</a><a href="#">
<li>여행영상</li>
</a><a href="#">
<li>여행사진</li>
</a><a href="#">
<li>관련사이트</li>
</a>
</ul></li>
</ul>
</div></a>
</div>
<!-- </div> -->
</header>
<div id="visual">
<div><img src="./img/main_img04.jpg" alt=""></div>
</div>
<div id="content">
<div class="inner_wrap">
<div id="con1" class="conbox">
<div class="first main1">
<div><h1>추천</h1></div>
<ul class="ulul">
<p class="mouse">마우스를 대보세요</p>
<a href="#"><li class="li1">월별추천</a><ul id="textbox">
<li class="li2">
<h2>월별추천</h2>
<h3>울산대교 전망대</h3>
<p>울산대교의 개통으로 울산광역시 남구와 동구 간 이동하는데 약 40분 걸리던 것에서 20분 수준으로 ...</p>
</li>
</ul></li>
<a href="#"><li class="li1">일정코스</a><ul id="textbox">
<li>
<h2>일정코스</h2>
<h3>슬도</h3>
<p>슬도는 방어진 항으로 들어오는 거센 파도를 막아주는 바위섬으로 '갯바람과 파도가 바위에 부딪칠 때...</p>
</li>
</ul></li>
<a href="#"><li class="li1">네티즌 추천</a><ul id="textbox">
<li>
<h2>네티즌 추천</h2>
<h3>선암호수공원</h3>
<p>선암호수공원을 "도심 속 물의 정원"이라 부르곤 하며 울산시민은 물론 관광객들고 즐겨 찾는 울산의 대표... </p>
</li>
</ul></li>
<a href="#"><li class="li1">울산12경</a><ul id="textbox">
<li>
<h2>울산12경</h2>
<h3>태화강 국가정원과 십리대숲</h3>
<p>태화강의 수질개선과 더불어 태화강 둔치의 환경개선을 병행하면서 방치되어 있던 십리대숲을 정비하고, 비닐하우스와... </p>
</li>
</ul></li>
<a href="#"><li class="li1">영남알프스</a><ul id="textbox">
<li>
<h2>영남알프스</h2>
<h3>영남알프스 9봉 완등</h3>
<p>대한민국 100대 명산 및 한국 관광 100선에 지정된 영남 알프스의 9개봉 우리를 모두 등방해 주십시오. 방대한 지역에 걸쳐... </p>
</li>
</ul></li>
<a href="#"><li class="li1">축제행사</a><ul id="textbox">
<li>
<h2>축제행사</h2>
<h3>간절곶 해맞이 축제</h3>
<p>'간절곶에 해가 떠야 한반도에 새벽이 온다'라는 말이 있을 정도로 울산 울주군 서생면 간절곶은 동북아시아에서 가장 먼저...'</p>
</li>
</ul></li>
</ul>
<div id="bg1" class="bgbg"></div>
</div>
</div>
<div id="con2" class="conbox">
<div class="first main2">
<div><h1>여행지</h1></div>
<ul class="ulul">
<p class="mouse">마우스를 대보세요</p>
<a href="#"><li class="li1">자연</a><ul id="textbox">
<li class="li2">
<h2>자연</h2>
<h3>자연을 찾아 떠나보자!</h3>
<p>울산의 여러 자연을 찾아서 떠나보게 될 기회입니다!!!</p>
</li>
</ul></li>
<a href="#"><li class="li1">레져</a><ul id="textbox">
<li>
<h2>레져</h2>
<h3>레져를 해보자!</h3>
<p>등산 등 다양한 레져 활동을 해보세요!! </p>
</li>
</ul></li>
<a href="#"><li class="li1">체험</a><ul id="textbox">
<li>
<h2>체험</h2>
<h3>다양한 체험을 해보자!</h3>
<p>여러가지 못했던 체험들을 울산에 와서 해볼 수 있는 기회입니다!!</p>
</li>
</ul></li>
<a href="#"><li class="li1">문화/유적</a><ul id="textbox">
<li>
<h2>문화/유적</h2>
<h3>문화/유적 탐방기!</h3>
<p>문화/유적에 관심이 있다면 지금 당장 떠나보세요!!</p>
</li>
</ul></li>
<a href="#"><li class="li1">먹거리</a><ul id="textbox">
<li>
<h2>먹거리</h2>
<h3>먹거리를 알아보고 먹어보자!</h3>
<p>울산에서만 맛볼 수 있는 다양한 먹거리를 한번 경험해보세요!! </p>
</li>
</ul></li>
<a href="#"><li class="li1">숙박</a><ul id="textbox">
<li>
<h2>숙박</h2>
<h3>숙박도 완벽한 울산!</h3>
<p>어디서 자야할지 모른다면 지금 당장 눌러 보세요!! </p>
</li>
</ul></li>
</ul>
<div id="bg2" class="bgbg"></div>
</div>
<div class="second"></div>
</div>
<div id="con3" class="conbox">
<div class="first">
<div><h1>여행정보</h1></div>
<ul class="ulul">
<p class="mouse">마우스를 대보세요</p>
<a href="#"><li class="li1">관광가이드북</a><ul id="textbox">
<li class="li2">
<h2>관광가이드북</h2>
<p>국내 최고의 도심 속 자연 생태공원인 울산 대공원등등 다양한 곳에 대한 설명이 있습니다</p>
</li>
</ul></li>
<a href="#"><li class="li1">관광안내도</a><ul id="textbox">
<li>
<h2>관광안내도</h2>
<p>다양한 테마 산책로와 야생 꽃단지, 생태습지원, 선암호수 공원 등등 위치를 알려주고 있습니다</p>
</li>
</ul></li>
<a href="#"><li class="li1">관광책자신청</a><ul id="textbox">
<li>
<h2>관광책자신청</h2>
<p>함월루, 어련당, 서덕출 공원 등 위치와 가이드란이 필요하다면 책자로 신청해보세요!</p>
</li>
</ul></li>
<a href="#"><li class="li1">관광안내서비스</a><ul id="textbox">
<li>
<h2>관광안내서비스</h2>
<p>어떻게 가야할지 어디로 가야할지 모른다면 당장 안내 서비스를 이용해보세요!</p>
</li>
</ul></li>
<a href="#"><li class="li1">응급의료서비스</a><ul id="textbox">
<li>
<h2>응급의료서비스</h2>
<p>안전한 여행을 위한 의료서비스를 이용해보세요!!</p>
</li>
</ul></li>
<a href="#"><li class="li1">문화관광해설사</a><ul id="textbox">
<li>
<h2>문화관광해설사</h2>
<p>여러 문화 관광에 대한 해설이 듣고 싶으시다면 문화관광해설사를 찾아보세요!</p>
</li>
</ul></li>
</ul>
<div id="bg3" class="bgbg"></div>
</div>
<div class="second"></div>
</div>
<div id="con4" class="conbox">
<div class="first">
<div><h1>여행이야기</h1></div>
<ul class="ulul">
<p class="mouse">마우스를 대보세요</p>
<a href="#"><li class="li1">나만의 여행일정</a><ul id="textbox">
<li class="li2">
<h2>나만의 여행일정</h2>
<p>나만의 특별한 여행을 일자별로 알차게 계획하고 친구들과 공유하거나 인쇄할 수 있습니다.</p>
</li>
</ul></li>
<a href="#"><li class="li1">내주변</a><ul id="textbox">
<li>
<h2>내주변</h2>
<p>나의 현 위치 기반, 다양한 울산의 여행지 정보를 체계적으로 제공합니다. </p>
</li>
</ul></li>
<a href="#"><li class="li1">여행영상</a><ul id="textbox">
<li>
<h2>여행영상</h2>
<p>울산의 다양한 여행지 영상 서비스를 유튜브 채널을 통해 제공합니다.</p>
</li>
</ul></li>
<a href="#"><li class="li1">여행사진</a><ul id="textbox">
<li>
<h2>여행사진</h2>
<p>울산의 멋진 여행 사진을 감상하고 다운로드받을 수 있습니다.</p>
</li>
</ul></li>
<a href="#"><li class="li1">관련사이트</a><ul id="textbox">
<li>
<h2>관련사이트</h2>
<p>울산의 여행정보 및 홍보채널을 비롯, 타시도 여행정보까지 한눈에 확인하실 수 있습니다.</p>
</li>
</ul></li>
</ul>
<div id="bg4" class="bgbg"></div>
</div>
<div class="second"></div>
</div>
</div>
</div>
<footer>
<div class="inner_wrap" id="footerflex">
<div><a href="#"><img src="./img/top_logo.png" alt=""></a></div>
<div>
<ul>
<li>개인정보처리방침</li>
<li>저작권정책</li>
<li>뷰어다운로드</li>
</ul>
<div>
<p>(44675) 울산광역시 남구 중앙로 201 (신정동)</p>
<p>Copyright ⓒ Ulsan Metropolitan City. All rights reserved.</p>
<p>본 사이트의 모든 내용들은 울산광역시의 허락없이 무단복제가 불가하며, 게시된 전자우편주소는 개인정보보호법 및 정보통신망법에 따라 무단 수집을 거부합니다.</p>
</div>
</div>
<div id="sns"><a href="#"><img src="./img/bottom_sns.png" alt=""></a></div>
</div>
</footer>
</div>
</body>
</html>2) style.css
@charset "UTF-8";
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
a {
text-decoration: none;
color: inherit;
}
img {
vertical-align: top;
border: none;
}
table {
border-collapse: collapse;
}
li {
list-style: none;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
address, em {
font-style: normal;
}
input, select {
outline: none;
}
img {
vertical-align: top;
}
#wrap {
width: 100%;
height: 100vh;
margin: 0 auto;
}
.header_wrap {
width: 1300px;
margin: 0 auto;
}
.inner_wrap {
width: 1300px;
margin: 0 auto;
}
header {
width: 100%;
}
header #top_header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
padding: 30px 0;
border-bottom: 1px solid #ccc;
}
header #top_header input {
padding: 10px 100px;
background: #eee;
}
header #top_header > div:nth-child(1) {
width: 20%;
}
header #top_header > div:nth-child(1) img {
width: 90%;
}
header #top_header p {
width: 30%;
padding: 20px 100px;
}
header #top_header > div:nth-child(2) {
width: 10%;
}
header #top_header ul > li:nth-child(3) {
position: relative;
}
#langli #lang {
position: absolute;
top: 0;
right: 0;
opacity: 0;
-webkit-transition: 0.5s;
transition: 0.5s;
}
#langli.on #lang {
opacity: 1;
top: 20px;
}
#langli.on #lang li {
color: #2a8cf9;
}
header #bottom_header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 80px;
}
header #bottom_header > div:nth-child(1) {
width: 170px;
height: 28px;
position: relative;
overflow: hidden;
}
#snstop img {
position: absolute;
top: 0;
-webkit-transition: 0.5s;
transition: 0.5s;
}
#snstop.on img {
top: -28px;
}
header #bottom_header > ul {
margin-left: 80px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
header #bottom_header > ul > li {
font-size: 20px;
padding: 0 40px;
position: relative;
}
header #bottom_header > ul > li:not(:last-child) {
border-right: 1px solid #111;
}
header #bottom_header > ul > li > ul {
position: absolute;
top: 0;
left: -7px;
-webkit-transition: 0.5s;
transition: 0.5s;
width: 160px;
opacity: 0;
background: #eef4f9;
border-radius: 10px;
}
header #bottom_header > ul > li > ul li {
text-align: center;
font-size: 18px;
width: 150px;
padding: 8px;
-webkit-transition: 0.5s;
transition: 0.5s;
}
header #bottom_header > ul > li > ul li:hover {
color: #2a8cf9;
}
header #bottom_header > ul > li:hover > ul {
top: 50px;
opacity: 1;
}
header #bottom_header #sitemap {
position: relative;
width: 50px;
height: 50px;
background: #ccc;
padding: 8px 0;
}
header #bottom_header #sitemap span {
margin-left: 10px;
margin-top: 11px;
display: block;
width: 30px;
height: 2px;
background: #fff;
}
header #bottom_header #sitemap span:nth-child(1) {
margin-top: 3px;
}
header #bottom_header #sitemap.on .siteul {
opacity: 1;
right: 50px;
}
header #bottom_header .siteul {
opacity: 0;
-webkit-transition: 0.5s;
transition: 0.5s;
width: 250px;
position: absolute;
top: 0;
right: -250px;
background: #eef4f9;
border-radius: 10px;
padding: 20px;
}
header #bottom_header .siteul > li {
font-size: 24px;
padding: 5px 0;
}
header #bottom_header .siteul > li > ul li {
font-size: 17px;
-webkit-transition: 0.5s;
transition: 0.5s;
padding: 2px 0;
padding-left: 10px;
}
header #bottom_header .siteul > li > ul li:hover {
color: #2a8cf9;
}
#visual {
width: 100%;
}
#visual img {
width: 100%;
}
#content {
width: 100%;
padding: 80px 0;
height: 1700px;
background: #eef4f9;
}
#content .conbox {
width: 100%;
height: 400px;
position: relative;
}
#content .conbox .first {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#content .conbox .first > div:nth-child(1) {
width: 250px;
}
#content .conbox .first > div:nth-child(1) h1 {
font-size: 28px;
position: relative;
}
#content .conbox .first > div:nth-child(1) h1::after {
position: absolute;
opacity: 0.5;
bottom: 3px;
left: 0;
content: "";
display: block;
width: 150px;
height: 10px;
background: #2a8cf9;
}
#content .conbox .first ul {
width: 230px;
margin: 20px;
background: #fff;
padding: 30px;
border-radius: 10px;
position: absolute;
left: 150px;
top: 5px;
}
#content .conbox .first ul li {
padding: 10px 0;
-webkit-transition: 0.5s;
transition: 0.5s;
}
#content .conbox .first ul li:hover {
color: #2a8cf9;
}
#content .conbox .first ul li:hover #textbox li:nth-child(1) {
top: 20px;
}
#content .conbox .first ul li #textbox {
width: 500px;
height: 200px;
background: #fff;
border-radius: 10px;
padding: 50px 20px;
position: absolute;
left: 730px;
top: 0;
overflow: hidden;
}
#content .conbox .first ul li #textbox li {
position: absolute;
top: -130px;
left: 10px;
z-index: 1;
width: 400px;
}
#content .conbox .first ul li #textbox li h2 {
font-size: 24px;
padding-bottom: 10px;
}
#content .conbox .first ul li #textbox li h3 {
font-size: 18px;
padding-bottom: 10px;
}
#content .conbox .first ul li #textbox li p {
font-size: 14px;
}
#content .conbox .first ul li #textbox::after {
content: "자세히보기";
display: block;
width: 120px;
height: 50px;
position: absolute;
bottom: 0;
right: 0;
background: #71bff8;
color: #fff;
text-align: center;
line-height: 50px;
border-radius: 10px;
}
#content #bg1 {
width: 500px;
height: 250px;
background: url(./img/recommend_img05.jpg) center center/cover no-repeat;
}
#content #bg2 {
width: 500px;
height: 250px;
background: url(./img/food1.jpg) center center/cover no-repeat;
}
#content #bg3 {
width: 500px;
height: 250px;
background: url(./img/info_img04.jpg) center center/cover no-repeat;
}
#content #bg4 {
width: 500px;
height: 250px;
background: url(./img/story_img02.jpg) center center/cover no-repeat;
}
#content .bgbg {
position: absolute;
left: 410px;
top: 40px;
}
footer {
background: #999696;
padding: 30px 0;
}
footer #footerflex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
footer #footerflex ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-bottom: 10px;
}
footer #footerflex ul li:not(:last-child) {
border-right: 1px solid #111;
padding-right: 10px;
}
footer #footerflex ul li:not(:first-child) {
padding-left: 10px;
}
footer #footerflex p {
width: 800px;
padding-bottom: 6px;
}
footer #footerflex #sns {
background: #111;
}
.mouse {
width: 100px;
padding: 5px;
text-align: center;
font-size: 10px;
color: #fff;
border-radius: 10px;
background: #2a8cf9;
}3) main.js
let move = document.querySelector('#langli');
move.addEventListener('click',function(){
move.classList.toggle('on');
})
let move1 = document.querySelector('#snstop');
move1.addEventListener('click',function(){
move1.classList.toggle('on');
})
let move2 = document.querySelector('#sitemap');
move2.addEventListener('click',function(){
move2.classList.toggle('on');
})