진행 상황
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tour Web</title> <!-- 페이지 제목 -->
<!-- 반응형 : 뷰포트 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 사용자 정의 : css -->
<link href = "/jsp/css/index.css" rel = "stylesheet">
<!-- 부트스트랩 : css -->
<link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet">
<!-- 헤더에서 사용되는 경로 : 절대 경로 [ 페이지 마다 헤더를 사용하는데 페이지마다 상대 경로 다르다. -->
<!--
href, src 에서 경로 주의!
서버경로 :
1. <https://localhost:8000/프로젝트명/파일명>
2. <http://192.168.17.54:8080/프로젝트명/파일명>
서버경로 절대 경로 -> 상대 경로 표현 [ip주소, port 생략]
1. /프로젝트명[root: 최상위 경로]/파일명
-->
</head>
<body>
<!-- <div style = "border : 1px solid red ;" class = "container">
컨테이너
</div> -->
<!-- 상단 메뉴 / sticky-top : 반응형 상단 고정-->
<div class = "navbar navbar-expand-lg bg-light sticky-top bg-white header-top"> <!-- 네비게이션 [메뉴], bg : 배경색 -->
<div class = "container"> <!-- 구역 -->
<div class = "collapse navbar-collapse"> <!-- 감추기 -->
<ul class = "navbar-nav header-topMenu"> <!-- 메뉴 목록 -->
<li class = "nav-item"><a class = "nav-link" href = "/jsp/member/login.html">로그인</a></li> <!-- 메뉴항목 -->
<li class = "nav-item"><a class = "nav-link" href = "/jsp/member/login.html">회원가입</a></li> <!-- 메뉴항목 -->
<li class = "nav-item"><a class = "nav-link" href = "#">장바구니</a></li> <!-- 메뉴항목 -->
<li class = "nav-item"><a class = "nav-link" href = "#">마이페이지</a></li><!-- 메뉴항목 -->
<li class = "nav-item"><a class = "nav-link" href = "/jsp/board/list.html">커뮤니티</a></li><!-- 메뉴항목 -->
<li class = "nav-item"><a class = "nav-link" href = "#">문의사항</a></li><!-- 메뉴항목 -->
<li class = "nav-item"><a class = "nav-link" href = "#">리뷰</a></li><!-- 메뉴항목 -->
</ul>
</div>
</div>
</div>
<!-- 로고 -->
<div class = "container logoBox">
<a class = "title" href = "/jsp/index.html"><img style = "width : 15%" src = "/jsp/img/logo.png"></a>
</div>
<!-- 하단 메뉴 -->
<div class = "navbar navbar-expand-lg bg-light sticky-top bg-white header-bottom"> <!-- 네비게이션 -->
<div class = "container"> <!-- 구역 -->
<!-- 콜랩스 버튼 : 메뉴가 콜랩스 되었을 때 보이는 버튼-->
<button class = "navbar-toggler" type = "button" data-bs-toggle = "collapse" data-bs-target = "#navContent">
<span class = "navbar-toggler-icon"></span>
</button>
<!-- 콜랩스 적용되는 메누 목록 -->
<div class = " collapse navbar-collapse" id = "navContent"> <!-- 부모 크기보다 작아지면 자동으로 숨기기 -->
<ul class = "navbar-nav header-bottomMenu"> <!-- 메뉴목록 -->
<li class = "nav-item"><a class = "nav-link" href = "#">해외패키지</a></li> <!-- 메뉴항목 -->
<li class = "nav-item"><a class = "nav-link" href = "#">테마여행</a></li> <!-- 메뉴항목 -->
<li class = "nav-item"><a class = "nav-link" href = "#">개별여행</a></li> <!-- 메뉴항목 -->
<li class = "nav-item"><a class = "nav-link" href = "#">국내여행</a></li> <!-- 메뉴항목 -->
<li class = "nav-item"><a class = "nav-link" href = "#">항공</a></li> <!-- 메뉴항목 -->
<li class = "nav-item"><a class = "nav-link" href = "#">호텔</a></li> <!-- 메뉴항목 -->
</ul>
</div>
</div>
</div>
<!-- 이미지 슬라이드 : 캐러셀 --> <!-- data-bs-ride = "carousel" : 자동 슬라이드 -->
<div id = "mainCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval = "3000"> <!-- 캐러셀 구역 data-bs-interval : 넘어가는 시간[밀리초] : 1000 = 1초-->
<div class = "carousel-inner"> <!-- 캐러셀 내용물-사진들 -->
<div class = "carousel-item active"> <!-- 1개의 사진 [active : 활성화 -> 이미지가 바뀔때마다 active가 바뀜] -->
<img class="d-block w-100" src = "img/slide1.jpg"> <!-- w-100 : 100사이즈 / d-block : display : block -->
</div>
<div class = "carousel-item"> <!-- 1개의 사진 -->
<img class="d-block w-100" src = "img/slide2.jpg">
</div>
<div class = "carousel-item"> <!-- 1개의 사진 -->
<img class="d-block w-100" src = "img/slide3.jpg">
</div>
<div class = "carousel-item"> <!-- 1개의 사진 -->
<img class="d-block w-100" src = "img/slide4.jpg">
</div>
</div>
<div> <!-- 이미지 슬라이드 컨트롤[왼쪽/오른쪽 이동 버튼] -->
<button class = "carousel-control-prev" type = "button" data-bs-slide = "prev" data-bs-target = "#mainCarousel">
<span class = "carousel-control-prev-icon"></span>
</button>
<button class = "carousel-control-next" type = "button" data-bs-slide = "next" data-bs-target = "#mainCarousel">
<span class = "carousel-control-next-icon"></span>
</button>
</div>
</div> <!-- 이미지 캐러셀 끝나는 부분 -->
<div class = "container"> <!-- 구역 생성 -->
<h3 class = "box_title">Best 여행지</h3> <!-- 구역 제목 -->
<div class = "itembox"> <!-- 제품 출력되는 구역 -->
</div>
</div>
<!-- 사용자 정의 js -->
<script src = "js/index.js" type="text/javascript"></script>
<!-- 부트스트랩 : js 무조건 body내 최하단 작성!-->
<script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js>"></script>
</body>
</html>
login.html, signup.html, list.html
- 헤더는 공통적으로 사용하기 때문에 이 부분은 그대로 복사/붙여넣기
**<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tour Web</title> <!-- 페이지 제목 -->
<!-- 반응형 : 뷰포트 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 사용자 정의 : css -->
<link href = "/jsp/css/index.css" rel = "stylesheet">
<!-- 부트스트랩 : css -->
<link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet">
<!-- 헤더에서 사용되는 경로 : 절대 경로 [ 페이지 마다 헤더를 사용하는데 페이지마다 상대 경로 다르다. -->
<!--
서버경로 :
1. <https://localhost:8000/프로젝트명/파일명>
2. <http://192.168.17.54:8080/프로젝트명/파일명>
서버경로 절대 경로 표현 [ip주소, port 생략]
1. /프로젝트명/파일명
-->
</head>
<body>
<!-- <div style = "border : 1px solid red ;" class = "container">
컨테이너
</div> -->
<!-- 상단 메뉴 / sticky-top : 반응형 상단 고정-->
<div class = "navbar navbar-expand-lg bg-light sticky-top bg-white header-top"> <!-- 네비게이션 [메뉴], bg : 배경색 -->
<div class = "container"> <!-- 구역 -->
<div class = "collapse navbar-collapse"> <!-- 감추기 -->
<ul class = "navbar-nav header-topMenu"> <!-- 메뉴 목록 -->
<li class = "nav-item"><a class = "nav-link" href = "/jsp/member/login.html">로그인</a></li> <!-- 메뉴항목 -->
<li class = "nav-item"><a class = "nav-link" href = "/jsp/member/login.html">회원가입</a></li> <!-- 메뉴항목 -->
<li class = "nav-item"><a class = "nav-link" href = "#">장바구니</a></li> <!-- 메뉴항목 -->
<li class = "nav-item"><a class = "nav-link" href = "#">마이페이지</a></li><!-- 메뉴항목 -->
<li class = "nav-item"><a class = "nav-link" href = "/jsp/board/list.html">커뮤니티</a></li><!-- 메뉴항목 -->
<li class = "nav-item"><a class = "nav-link" href = "#">문의사항</a></li><!-- 메뉴항목 -->
<li class = "nav-item"><a class = "nav-link" href = "#">리뷰</a></li><!-- 메뉴항목 -->
</ul>
</div>
</div>
</div>
<!-- 로고 -->
<div class = "container logoBox">
<a class = "title" href = "/jsp/index.html"><img style = "width : 15%" src = "/jsp/img/logo.png"></a>
</div>
<!-- 하단 메뉴 -->
<div class = "navbar navbar-expand-lg bg-light sticky-top bg-white header-bottom"> <!-- 네비게이션 -->
<div class = "container"> <!-- 구역 -->
<!-- 콜랩스 버튼 : 메뉴가 콜랩스 되었을 때 보이는 버튼-->
<button class = "navbar-toggler" type = "button" data-bs-toggle = "collapse" data-bs-target = "#navContent">
<span class = "navbar-toggler-icon"></span>
</button>
<!-- 콜랩스 적용되는 메누 목록 -->
<div class = " collapse navbar-collapse" id = "navContent"> <!-- 부모 크기보다 작아지면 자동으로 숨기기 -->
<ul class = "navbar-nav header-bottomMenu"> <!-- 메뉴목록 -->
<li class = "nav-item"><a class = "nav-link" href = "#">해외패키지</a></li> <!-- 메뉴항목 -->
<li class = "nav-item"><a class = "nav-link" href = "#">테마여행</a></li> <!-- 메뉴항목 -->
<li class = "nav-item"><a class = "nav-link" href = "#">개별여행</a></li> <!-- 메뉴항목 -->
<li class = "nav-item"><a class = "nav-link" href = "#">국내여행</a></li> <!-- 메뉴항목 -->
<li class = "nav-item"><a class = "nav-link" href = "#">항공</a></li> <!-- 메뉴항목 -->
<li class = "nav-item"><a class = "nav-link" href = "#">호텔</a></li> <!-- 메뉴항목 -->
</ul>
</div>
</div>
</div>
<!-- 부트스트랩 : js -->
<script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js>"></script>
</body>
</html>**
index.css
@charset "UTF-8";
/*외부 폰트*/
@font-face {
font-family: 'SANGJUGyeongcheonIsland';
src: url('<https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/SANGJUGyeongcheonIsland.woff>') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'KyoboHandwriting2021sjy';
src: url('<https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/KyoboHandwriting2021sjy.woff2>') format('woff2');
font-weight: normal;
font-style: normal;
}
/*기본값.*/
*{
font-family: 'KyoboHandwriting2021sjy';
color : black;
margin : 0px; padding : 0px;
}
/*로고 구역*/
.logoBox{
text-align: center;
}
/*로고 제목*/
.title{
font-family: 'SANGJUGyeongcheonIsland' !important;
color : black;
font-size: 40px;
}
/*하단 메뉴*/
.header-bottom{
top : 35px !important;
}
/*부트스트랩 class의 속성 수정*/
.nav-link{
color : black !important;
}
/*상단 메뉴 : 오른쪽 배치*/
.header-topMenu{
width : 100%;
display: flex;
justify-content: flex-end;
}
.header-topMenu li{
font-size: 13px;
}
/*하단 메뉴 : 가로 수평 정렬*/
.header-bottomMenu{
width: 100%;
display: flex;
justify-content: space-between;
}
/*-----------------------index.html에 있는 본문[제품]---------------------*/
.box_title{
text-align: center;
font-family: 'SANGJUGyeongcheonIsland';
border-bottom: 2px solid #999999;
width: 20%; /*박스 가로 길이*/
margin: 0 auto; /*박스권 가운데 정렬*/
padding-top: 7%;
padding-bottom: 1%
}
.itembox{
display: flex;
flex-wrap: wrap;
}
/*서로 다른 px[디바이스] 마다 css 다르게 설정 -> 미디어쿼리*/
/* @media(조건){ 참일 경우 css} */
@media( max-width : 1000px){ /*1000px아래로 떨어지면[최대 가로사이즈가 1000px 아래면]*/
.item{
width : 45% !important;
margin: 2% !important;
}
}
@media(max-width : 500px){
.item{
width : 90% !important;
margin: 2% !important;
}
}
/*pc[1200px 이상] 기준*/
.item{width : 20%; margin : 2%; padding-top: 10px;}
.item img{
width: 100%; /*상위 요소의 크기 백분율*/
border-radius: 20px; /*둥근 모서리*/
}
.item :hover{ /*해당 요소의 마우스를 올렸을 때*/
opacity: 0.8;
}
.item_title{
font-size: 13px;
margin: 7% 0%; /*위아래 , 왼오*/
height : 40px;
}
.item_day{
font-size: 15px;
color : #8080c0;
border-bottom: 1px solid #999999;
padding-bottom: 3%;
}
.item_price{
text-decoration: line-through; /*취소선*/
font-size: 14px;
color : #999999;
margin-top: 3%;
}
.item_sales{
font-family: SANGJUGyeongcheonIsland;
font-size: 17px;
}
.item_discount{
font-family: SANGJUGyeongcheonIsland;
margin-left : 5px;
color : red;
font-size: 17px;
}
.item_bottom{
margin-top : 5%;
display: flex;
justify-content: space-between; /*가로 배치*/
align-items: center; /*세로 정렬*/
}
.item_review{
font-size: 12px;
color : #999999;
text-align: right;
}
index.js [→ index.html]
- index.html에 판매 제품 출력하는 코드 추가
let productList = [
{img : '두바이.jpg', title: '[친구끼리 추천!] 두바이 / 아부다비 퍼펙트 일주', date : '6박 7일', price : 1399000, discount : 0.1, like :1000, review : 10939 },
{img : '타이페이.jpg', title : '[모녀 여행 추천!] 타이페이/단수이/야류/지우펀/스펀 (4성호텔/단수이관광/천등날리기/특식3회)', date : '3박 4일', price : 629000, discount : 0.15, like :629, review : 5134 },
{img : '방콕.jpg', title : '[나태주와 고모들도 갔다!] 방콕+파타야', date : '5박 6일', price : 499000, discount : 0.05, like :342, review : 4560 },
{img : '캐나다.jpg', title : '캐나다 로키 일주 [시애틀/밴쿠버/캐네디언로키/밴프]', date : '7박 8일', price : 2199000, discount : 0.2, like :1389, review : 14092 },
{img : '라오스.jpg', title : '[가족 여행 추천!] 라오스 비엔티엔/방비엥 전 일정 4성호텔', date : '3박 4일', price : 639000, discount : 0.08, like :349, review : 3278 },
{img : '후쿠오카.jpg', title : '[후쿠오카 자유여행] 비즈니스호텔 세미더블/조식불포함', date : '3박 4일', price : 349000, discount : 0.02, like :795, review : 8392 },
]
printProduct();
function printProduct(){
let html =``
productList.forEach((o, i)=>{
html += `<div class = "item"> <!-- 제품 1개 -->
<img src = "img/${o.img}"> <!-- 제품 이미지 -->
<div class = "item_info">
<div class = "item_title">${o.title}</div> <!-- 제품 명 -->
<div class = "item_day">${o.date}</div> <!-- 제품 몇박 며칠 -->
<div class = "item_price">${o.price}원</div> <!-- 원가 -->
<div>
<span class = "item_sales">${o.price - parseInt(o.price*o.discount)}원</span> <!-- 판매가 -->
<span class = "item_discount">${parseInt(o.discount*100)}%</span> <!-- 할인율 -->
</div>
</div>
<div class = "item_bottom"> <!-- 제품정보 하단 구역 -->
<div>
<span class = "badge rounded-pill text-bg-danger">문의폭주</span> <!-- 배찌 -->
<span class = "badge rounded-pill text-bg-warning">별점4개이상</span> <!-- 배찌 -->
</div>
<div class = "item_review"> 찜 ${o.like} 리뷰수 ${o.review}</div>
</div>
</div>`
})
document.querySelector('.itembox').innerHTML = html
}
화면
