html html file <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>철길마을</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-1.12.3.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div class="wrap">
<main id="main" class="flx j_center">
<header id="header">
<h1 class="logo"><a href="#"><img src="images/logo.png" alt="로고"></a></h1>
<nav class="gnb">
<ul>
<li><a href="#" class="dep1">철길마을</a>
<ul class="sub_menu">
<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="#" class="dep1">주변맛집</a>
<ul class="sub_menu">
<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="#" class="dep1">주변여행지</a>
<ul class="sub_menu">
<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="#" class="dep1">도움마당</a>
<ul class="sub_menu">
<li><a href="#">교통정보</a></li>
<li><a href="#">주변 주차장</a></li>
<li><a href="#">자료실</a></li>
<li><a href="#">자료마당</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<section class="conts">
<div class="banner flx flx_col a_center J_center">
<p class="banner_tit">아름다운 철길마을 지금 여행해보세요</p>
<button type="button">에약하기</button>
</div>
<div class="notice">
<h2>공지사항</h2>
<ul>
<li><a href="#" class="flx j_spc_btw a_center"><span>철길마을 공지사항1 입니다.</span><span>2024-06-06</span></a></li>
<li><a href="#" class="flx j_spc_btw a_center"><span>철길마을 공지사항2 입니다.</span><span>2024-06-06</span></a></li>
<li><a href="#" class="flx j_spc_btw a_center"><span>철길마을 공지사항3 입니다.</span><span>2024-06-06</span></a></li>
<li><a href="#" class="flx j_spc_btw a_center"><span>철길마을 공지사항4 입니다.</span><span>2024-06-06</span></a></li>
</ul>
</div>
<div class="gallery">
<h2>갤러리</h2>
<ul class="flx j_spc_btw">
<li><a href="#"><img src="images/gallery_1.png" alt="갤러리이미지1"></a><p class="gallery_txt">철길마을 전경1</p></li>
<li><a href="#"><img src="images/gallery_2.png" alt="갤러리이미지2"></a><p class="gallery_txt">철길마을 전경2</p></li>
</ul>
</div>
<ul class="link flx j_spc_btw">
<li><a href="#" class="flx flx_col a_center"><img src="images/link_1.png" alt="바로가기1"><span>전화하기</span></a></li>
<li><a href="#" class="flx flx_col a_center"><img src="images/link_2.png" alt="바로가기2"><span>문의하기</span></a></li>
<li><a href="#" class="flx flx_col a_center"><img src="images/link_3.png" alt="바로가기3"><span>에약하기</span></a></li>
<li><a href="#" class="flx flx_col a_center"><img src="images/link_4.png" alt="바로가기4"><span>분실물</span></a></li>
</ul>
</section>
<div class="slide">
<ul class="slide_wrap flx">
<li><a href="#"><img id="iw1" src="images/slide_1.png" alt="슬라이드이미지1"><span>철길마을 이미지1</span></a></li>
<li><a href="#"><img id="iw2" src="images/slide_2.png" alt="슬라이드이미지2"><span>철길마을 이미지2</span></a></li>
<li><a href="#"><img src="images/slide_3.png" alt="슬라이드이미지3"><span>철길마을 이미지3</span></a></li>
</ul>
</div>
</main>
<footer id="footer" class="flx j_spc_btw a_center">
<h3 class="f_logo"><a href="#"><img src="images/f_logo.png" alt="footer로고"></a></h3>
<div class="f_m">
<ul class="f_menu flx j_spc_btw a_center">
<li><a href="#">footer1</a></li>
<li><a href="#">footer2</a></li>
<li><a href="#">footer3</a></li>
<li><a href="#">footer4</a></li>
<li><a href="#">footer5</a></li>
</ul>
<div class="copy flx a_center">COPYRIGHTⓒ by WEBDESIGN. ALL RIGHTS RESERVED</div>
</div>
<select class="family_site">
<option>패밀리사이트1</option>
<option>패밀리사이트2</option>
<option>패밀리사이트3</option>
<option>패밀리사이트4</option>
<option>패밀리사이트5</option>
</select>
</footer>
<div class="modal_bg">
<div class="modal">
<p class="modal_tit">철길마을 이벤트</p>
<p class="moadl_txt">동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세.
무궁화 삼천리 화려강 대한 사람 대한으로 길이 보전하세.
남산 위에 저 소나무, 철갑을 두른 듯 바람서리 불변함은 우리 기상일세.</p>
<button type="button" class="close">닫기</button>
</div>
</div>
</div>
</body>
</html>