sub 페이지를 다 만든 후 main 페이지까지 모두 완성되어 각자의 html, css, script를 취합했다.
우선 header와 footer를 php형식이 아닌 html로 넣기로 정하고 추가를 해주었다.
1) head
<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">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css">
<link rel="shortcut icon" href="images/header/fabi/favicon.ico">
<link rel="manifest" href="images/header/fabi/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="images/header/fabi/ms-icon-144x144.png">
<meta name="msapplication-TileImage" content="images/logo/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<title>이젠제주투어</title>
</head>
2) header
<header id="header">
<div class="top-menu-bg">
<div class="container">
<ul class="top-menu">
<li><a href="index.html">홈</a></li>
<li><a href="login.html">로그인</a></li>
<li><a href="join.html">회원가입</a></li>
<li><a href="#">고객문의</a></li>
</ul>
</div>
</div>
<div class="container">
<div class="logo">
<a href="index.html"><img src="images/header/logo.png" alt=""></a>
</div>
<ul class="gnb">
<li><a href="package.html">여행패키지</a></li>
<li><a href="airport.html">특가 예약</a></li>
<li><a href="active.html">관광지</a></li>
<li><a href="promotion.html">프로모션</a></li>
<li><a href="notice.html">고객센터</a></li>
</ul>
<div class="more-menu">
<li><i class="xi-search"></i><span>검색</span></li>
<li><i class="xi-group"></i><span>단체</span></li>
<li><i class="xi-network-company"></i><span>기업체</span></li>
<li><i class="xi-market"></i><span>상품몰</span></li>
</div>
</div>
<div class="openDiv">
<div class="openDivInner">
<div class="openingHours">
<span class="date">날짜칸</span>
<p>고객센터</p>
<strong>운영시간</strong><br><br>
<strong>시간</strong>
</div>
<ul class="sub-menu">
<a href="package.html">
<li>여행패키지<i class="xi-angle-right"></i></li>
</a>
</ul>
<ul class="sub-menu">
<a href="airport.html">
<li>항공권<i class="xi-angle-right"></i></li>
</a>
<a href="hotel.html">
<li>호텔<i class="xi-angle-right"></i></li>
</a>
<a href="rent.html">
<li>렌터카<i class="xi-angle-right"></i></li>
</a>
</ul>
<ul class="sub-menu">
<a href="active.html">
<li>레저/잠수함<i class="xi-angle-right"></i></li>
</a>
<a href="museum.html">
<li>공원/전시/박물관<i class="xi-angle-right"></i></li>
</a>
<a href="food.html">
<li>Restaurant<i class="xi-angle-right"></i></li>
</a>
</ul>
<ul class="sub-menu">
<a href="promotion.html">
<li>Event<i class="xi-angle-right"></i></li>
</a>
<a href="promotion.html">
<li>제휴/멤버십<i class="xi-angle-right"></i></li>
</a>
</ul>
<ul class="sub-menu">
<a href="notice.html">
<li>공지사항<i class="xi-angle-right"></i></li>
</a>
<a href="qna.html">
<li>자주 묻는 질문<i class="xi-angle-right"></i></li>
</a>
</ul>
<a href="#">
<div class="openDivBanner">
<strong><em>앱 다운로드</em>로<br>더 스마트하고<br>편리하게!</strong>
<img src="images/header/169_generated.png" alt="googleplay">
</div>
</a>
</div>
</div>
</header>
3) footer
<footer id="footer">
<div class="footerInner">
<div class="info">
<div class="infoText">
<span><a href="#">회사소개</a></span>
<span><a href="#">이용약관</a></span>
<span><a href="#">여행약관개인정보처리방침</a></span>
<span><a href="#">해외여행자보험</a></span>
<span><a href="#">마케팅제휴</a></span>
<span><a href="#">공식인증예약센터 검색</a></span><br>
<span><strong>(주)이젠제주투어</strong></span>
<span><strong>대표</strong> 김하진</span>
<span><strong>주소</strong> (00000) 인천광역시 부평구 청천동 0길 00</span><br>
<span><strong>사업자등록번호</strong> 102-81-00000</span>
<span><strong>통신판매업신고번호</strong> 부평01-1806호</span>
<span><strong>관광사업자 등록번호</strong> 제1993-000006호</span><br>
<span><strong>개인정보 보호책임자</strong> 전준형</span>
<span><strong>가입팩스</strong> 02-734-0392</span>
<span><strong>이메일</strong> ezenacd@jeju.com</span><br>
<span><strong>고객센터</strong> 1577-0000</span>
<span><strong>항공권문의</strong> 1899-0000</span><br><br>
<span><strong>※ 부득이한 사정에 의해 여행일정이 변경되는 경우 사전 동의를 받습니다.</strong></span><br><br>
<span><strong>※ 이젠제주투어는 개별 항공권, 단품 및 일부 여행상품에 대하여 통신판매중개자로서 통신판매의 당사자가 아니며 해당상품의 거래정보 및 거래등에 대해
책임을 지지
않습니다.</strong></span><br><br>
<span><strong>COPYRIGHTⓒ EZENJEJUTOUR SERVICE INC. ALL RIGHTS RESERVED</strong></span>
</div>
<div class="infoSns">
<div class="infoSnsItem">
<a href="#"><img src="images/footer/icon/instagram.png" alt=""></a>
<a href="#"><img src="images/footer/icon/facebook.png" alt=""></a>
<a href="#"><img src="images/footer/icon/naverblog.png" alt=""></a>
<a href="#"><img src="images/footer/icon/youtube.png" alt=""></a>
</div>
</div>
</div>
</div>
</footer>
이후 css를 병합해 주었는데, 중복되지 않도록 각각 html 파일명을 맨 앞에 두었다.
스크립트의 경우 addEventListener가 현재 페이지에 없을 경우 오류가 발생해 이후 아래 코드는 읽지 않았다.
따라서 각각의 스크립트를 함수로 만든 후 현재 html 파일명을 대조하여 같을 경우 해당 스크립트 함수가 실행되도록 했다.
* 실무에선 어떤 방식으로 하는지 아직 모르지만, 현재 배운 내용으론 최선이였다. 프로젝트가 끝나면 알아보려고 한다.
function mainInit() {
header();
if(location.pathname.split('/').pop()=='index.html'){
index();
}
if(location.pathname.split('/').pop()=='rent.html'){
rent();
}
if(location.pathname.split('/').pop()=='notice.html'){
notice();
}
if(location.pathname.split('/').pop()=='qna.html'){
qna();
}
if(location.pathname.split('/').pop()=='hotel.html'){
hotel();
}
if (location.pathname.split('/').pop()=="join.html") {
join();
}
if(location.pathname.split('/').pop()=='airport.html'){
air();
}
if (location.pathname.split('/').pop()=="promotion.html"){
prom();
}
if (location.pathname.split("/").pop() == "package.html"){
pack();
}
if (
location.pathname.split("/").pop() == "museum.html" ||
location.pathname.split("/").pop() == "active.html" ||
location.pathname.split("/").pop() == "food.html"
) {
tour();
}
}
(오류 수정 진행중...)