<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>호텔 리조트 실무 샘플</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css">
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:Arial,sans-serif;color:#111;background:#faf8f3;}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;}
.wrap{max-width:1200px;width:100%;margin:0 auto;padding:0 20px;}
.header{height:80px;background:#faf8f3;border-bottom:1px solid #e6dfd2;position:relative;z-index:20;}
.header .wrap{height:80px;display:flex;justify-content:space-between;align-items:center;}
.logo{font-size:26px;font-weight:900;color:#8a6a3f;}
.menu{display:flex;gap:40px;}
.menu a{font-weight:700;}
.ham{display:none;background:none;border:0;font-size:28px;cursor:pointer;}
.visual{height:580px;}
.swiper-slide{height:580px;color:white;}
.slide1{
background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),
url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee")
no-repeat center/cover;
}
.slide2{
background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),
url("https://images.unsplash.com/photo-1566073771259-6a8506099945")
no-repeat center/cover;
}
.visual .wrap{height:100%;display:flex;align-items:center;}
.visual_text{max-width:680px;}
.visual_text span{color:#f1d7a0;font-weight:900;}
.visual_text h1{font-size:58px;line-height:1.2;margin:20px 0;}
.visual_text p{font-size:19px;line-height:1.8;color:#eee;margin-bottom:35px;}
.btn{display:inline-block;padding:16px 34px;background:#8a6a3f;color:white;border-radius:8px;font-weight:900;cursor:pointer;}
.section{padding:90px 0;}
.title{text-align:center;margin-bottom:50px;}
.title h2{font-size:38px;margin-bottom:15px;}
.title p{color:#777;}
.room_wrap{display:flex;gap:30px;}
.room_card{width:calc(100%/3);background:white;border-radius:26px;overflow:hidden;box-shadow:0 12px 30px rgba(100,70,30,.1);transition:.3s;}
.room_card:hover{transform:translateY(-10px);}
.room_img{height:260px;}
.room_img img{width:100%;height:100%;object-fit:cover;display:block;}
.room_text{padding:30px;}
.room_text h3{font-size:25px;color:#8a6a3f;margin-bottom:12px;}
.room_text p{font-size:15px;color:#666;line-height:1.7;margin-bottom:20px;}
.price{font-size:22px;font-weight:900;color:#8a6a3f;margin-bottom:20px;}
.reserve_btn{width:100%;height:48px;border:0;border-radius:8px;background:#1d1a16;color:white;font-weight:900;cursor:pointer;}
.service{background:#1d1a16;color:white;padding:90px 0;}
.service_box{display:flex;justify-content:space-between;align-items:center;gap:50px;}
.service_text{width:45%;}
.service_text span{color:#f1d7a0;font-weight:900;}
.service_text h2{font-size:40px;line-height:1.3;margin:20px 0;}
.service_text p{color:#d8d0c3;line-height:1.8;}
.service_list{width:55%;display:flex;gap:20px;}
.service_item{width:calc(100%/3);background:#2a261f;border-radius:22px;padding:35px 20px;text-align:center;}
.service_item h3{font-size:24px;color:#f1d7a0;margin-bottom:12px;}
.service_item p{color:#d8d0c3;font-size:14px;line-height:1.6;}
.cta{padding:90px 0;}
.cta_box{background:white;border-radius:30px;padding:50px;display:flex;justify-content:space-between;align-items:center;gap:40px;box-shadow:0 15px 35px rgba(100,70,30,.1);}
.cta_box h2{font-size:34px;color:#8a6a3f;margin-bottom:12px;}
.cta_box p{color:#666;}
.footer{height:100px;background:#111;color:white;display:flex;align-items:center;justify-content:center;}
.modal_wrap{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:50;}
.modal_wrap.active{display:flex;}
.modal{width:390px;background:white;border-radius:22px;padding:35px;text-align:center;}
.modal h3{font-size:26px;color:#8a6a3f;margin-bottom:20px;}
.modal input{width:100%;height:48px;margin-bottom:12px;padding:0 15px;border:1px solid #ddd;}
.close_btn{width:100%;height:48px;background:#111;color:white;border:0;border-radius:8px;cursor:pointer;margin-top:10px;}
@media(max-width:768px){
.header,.header .wrap{height:70px;}
.ham{display:block;}
.menu{display:none;position:absolute;top:70px;left:0;width:100%;background:#faf8f3;flex-direction:column;gap:0;border-bottom:1px solid #e6dfd2;}
.menu.active{display:flex;}
.menu a{padding:18px 20px;border-top:1px solid #e6dfd2;}
.visual,.swiper-slide{height:520px;}
.visual_text h1{font-size:38px;}
.visual_text p{font-size:16px;}
.room_wrap{flex-direction:column;}
.room_card{width:100%;}
.service_box{flex-direction:column;}
.service_text,.service_list{width:100%;}
.service_list{flex-direction:column;}
.service_item{width:100%;}
.cta_box{flex-direction:column;align-items:flex-start;padding:35px;}
.cta_box h2{font-size:28px;}
}
</style>
</head>
<body>
<header class="header">
<div class="wrap">
<div class="logo">LUX RESORT</div>
<nav class="menu">
<a href="#">About</a>
<a href="#">Rooms</a>
<a href="#">Service</a>
<a href="#">Reservation</a>
</nav>
<button class="ham">☰</button>
</div>
</header>
<div class="visual swiper">
<div class="swiper-wrapper">
<div class="swiper-slide slide1">
<div class="wrap">
<div class="visual_text">
<span>PREMIUM HOTEL & RESORT</span>
<h1>일상에서 벗어나<br>완벽한 휴식을 경험하세요</h1>
<p>자연과 품격이 어우러진 공간에서 특별한 하루와 여유로운 휴식을 제공합니다.</p>
<a class="btn open_btn">객실 예약하기</a>
</div>
</div>
</div>
<div class="swiper-slide slide2">
<div class="wrap">
<div class="visual_text">
<span>LUXURY STAY EXPERIENCE</span>
<h1>머무는 순간마다<br>특별한 경험</h1>
<p>객실, 다이닝, 스파까지 프리미엄 서비스를 한 공간에서 만나보세요.</p>
<a class="btn open_btn">예약 문의하기</a>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<section class="section">
<div class="wrap">
<div class="title">
<h2>Rooms & Suites</h2>
<p>편안함과 품격을 담은 객실을 만나보세요.</p>
</div>
<div class="room_wrap">
<div class="room_card">
<div class="room_img">
<img src="https://images.unsplash.com/photo-1566073771259-6a8506099945" alt="">
</div>
<div class="room_text">
<h3>Standard Room</h3>
<p>실용적이고 편안한 공간으로 여유로운 휴식을 제공합니다.</p>
<div class="price">₩180,000~</div>
<button class="reserve_btn open_btn">예약하기</button>
</div>
</div>
<div class="room_card">
<div class="room_img">
<img src="https://images.unsplash.com/photo-1560448204-e02f11c3d0e2" alt="">
</div>
<div class="room_text">
<h3>Deluxe Room</h3>
<p>넓은 공간과 고급스러운 인테리어로 특별한 숙박 경험을 제공합니다.</p>
<div class="price">₩260,000~</div>
<button class="reserve_btn open_btn">예약하기</button>
</div>
</div>
<div class="room_card">
<div class="room_img">
<img src="https://images.unsplash.com/photo-1578683010236-d716f9a3f461" alt="">
</div>
<div class="room_text">
<h3>Suite Room</h3>
<p>프리미엄 서비스를 경험할 수 있는 최고급 스위트 객실입니다.</p>
<div class="price">₩420,000~</div>
<button class="reserve_btn open_btn">예약하기</button>
</div>
</div>
</div>
</div>
</section>
<section class="service">
<div class="wrap">
<div class="service_box">
<div class="service_text">
<span>SPECIAL SERVICE</span>
<h2>머무는 순간마다<br>특별한 경험</h2>
<p>다이닝, 스파, 라운지 서비스까지 고객의 휴식을 위한 다양한 프리미엄 서비스를 제공합니다.</p>
</div>
<div class="service_list">
<div class="service_item">
<h3>SPA</h3>
<p>몸과 마음을 편안하게 하는 스파 서비스</p>
</div>
<div class="service_item">
<h3>DINING</h3>
<p>품격 있는 레스토랑과 다이닝 경험</p>
</div>
<div class="service_item">
<h3>POOL</h3>
<p>여유롭게 즐기는 프리미엄 수영장</p>
</div>
</div>
</div>
</div>
</section>
<section class="cta">
<div class="wrap">
<div class="cta_box">
<div>
<h2>지금 바로 특별한 휴식을 예약하세요</h2>
<p>원하는 날짜와 객실을 선택해 간편하게 예약할 수 있습니다.</p>
</div>
<a class="btn open_btn">예약 바로가기</a>
</div>
</div>
</section>
<footer class="footer">
COPYRIGHT 2026. LUX RESORT. ALL RIGHTS RESERVED.
</footer>
<div class="modal_wrap">
<div class="modal">
<h3>객실 예약</h3>
<input type="text" placeholder="이름">
<input type="text" placeholder="연락처">
<input type="text" placeholder="희망 객실">
<input type="text" placeholder="희망 날짜">
<button class="close_btn">닫기</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper('.visual', {
loop:true,
autoplay:{
delay:3000,
disableOnInteraction:false,
},
pagination:{
el:'.swiper-pagination',
clickable:true,
}
});
const hamEl = document.querySelector('.ham');
const menuEl = document.querySelector('.menu');
hamEl.addEventListener('click', () => {
menuEl.classList.toggle('active');
});
const openBtns = document.querySelectorAll('.open_btn');
const modalWrap = document.querySelector('.modal_wrap');
const closeBtn = document.querySelector('.close_btn');
for(let i = 0; i < openBtns.length; i++){
openBtns[i].addEventListener('click', () => {
modalWrap.classList.add('active');
});
}
closeBtn.addEventListener('click', () => {
modalWrap.classList.remove('active');
});
</script>
</body>
</html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>호텔 리조트 실무 샘플</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css">
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:Arial,sans-serif;color:#111;background:#faf8f3;}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;}
.wrap{max-width:1200px;width:100%;margin:0 auto;padding:0 20px;}
.header{height:80px;background:#faf8f3;border-bottom:1px solid #e6dfd2;position:relative;z-index:20;}
.header .wrap{height:80px;display:flex;justify-content:space-between;align-items:center;}
.logo{font-size:26px;font-weight:900;color:#8a6a3f;}
.menu{display:flex;gap:40px;}
.menu a{font-weight:700;}
.ham{display:none;background:none;border:0;font-size:28px;cursor:pointer;}
.visual{height:580px;}
.swiper-slide{height:580px;color:white;}
.slide1{
background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),
url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee")
no-repeat center/cover;
}
.slide2{
background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),
url("https://images.unsplash.com/photo-1566073771259-6a8506099945")
no-repeat center/cover;
}
.visual .wrap{height:100%;display:flex;align-items:center;}
.visual_text{max-width:680px;}
.visual_text span{color:#f1d7a0;font-weight:900;}
.visual_text h1{font-size:58px;line-height:1.2;margin:20px 0;}
.visual_text p{font-size:19px;line-height:1.8;color:#eee;margin-bottom:35px;}
.btn{display:inline-block;padding:16px 34px;background:#8a6a3f;color:white;border-radius:8px;font-weight:900;cursor:pointer;}
.section{padding:90px 0;}
.title{text-align:center;margin-bottom:50px;}
.title h2{font-size:38px;margin-bottom:15px;}
.title p{color:#777;}
.room_wrap{display:flex;gap:30px;}
.room_card{width:calc(100%/3);background:white;border-radius:26px;overflow:hidden;box-shadow:0 12px 30px rgba(100,70,30,.1);transition:.3s;}
.room_card:hover{transform:translateY(-10px);}
.room_img{height:260px;}
.room_img img{width:100%;height:100%;object-fit:cover;display:block;}
.room_text{padding:30px;}
.room_text h3{font-size:25px;color:#8a6a3f;margin-bottom:12px;}
.room_text p{font-size:15px;color:#666;line-height:1.7;margin-bottom:20px;}
.price{font-size:22px;font-weight:900;color:#8a6a3f;margin-bottom:20px;}
.reserve_btn{width:100%;height:48px;border:0;border-radius:8px;background:#1d1a16;color:white;font-weight:900;cursor:pointer;}
.service{background:#1d1a16;color:white;padding:90px 0;}
.service_box{display:flex;justify-content:space-between;align-items:center;gap:50px;}
.service_text{width:45%;}
.service_text span{color:#f1d7a0;font-weight:900;}
.service_text h2{font-size:40px;line-height:1.3;margin:20px 0;}
.service_text p{color:#d8d0c3;line-height:1.8;}
.service_list{width:55%;display:flex;gap:20px;}
.service_item{width:calc(100%/3);background:#2a261f;border-radius:22px;padding:35px 20px;text-align:center;}
.service_item h3{font-size:24px;color:#f1d7a0;margin-bottom:12px;}
.service_item p{color:#d8d0c3;font-size:14px;line-height:1.6;}
.cta{padding:90px 0;}
.cta_box{background:white;border-radius:30px;padding:50px;display:flex;justify-content:space-between;align-items:center;gap:40px;box-shadow:0 15px 35px rgba(100,70,30,.1);}
.cta_box h2{font-size:34px;color:#8a6a3f;margin-bottom:12px;}
.cta_box p{color:#666;}
.footer{height:100px;background:#111;color:white;display:flex;align-items:center;justify-content:center;}
.modal_wrap{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:50;}
.modal_wrap.active{display:flex;}
.modal{width:390px;background:white;border-radius:22px;padding:35px;text-align:center;}
.modal h3{font-size:26px;color:#8a6a3f;margin-bottom:20px;}
.modal input{width:100%;height:48px;margin-bottom:12px;padding:0 15px;border:1px solid #ddd;}
.close_btn{width:100%;height:48px;background:#111;color:white;border:0;border-radius:8px;cursor:pointer;margin-top:10px;}
@media(max-width:768px){
.header,.header .wrap{height:70px;}
.ham{display:block;}
.menu{display:none;position:absolute;top:70px;left:0;width:100%;background:#faf8f3;flex-direction:column;gap:0;border-bottom:1px solid #e6dfd2;}
.menu.active{display:flex;}
.menu a{padding:18px 20px;border-top:1px solid #e6dfd2;}
.visual,.swiper-slide{height:520px;}
.visual_text h1{font-size:38px;}
.visual_text p{font-size:16px;}
.room_wrap{flex-direction:column;}
.room_card{width:100%;}
.service_box{flex-direction:column;}
.service_text,.service_list{width:100%;}
.service_list{flex-direction:column;}
.service_item{width:100%;}
.cta_box{flex-direction:column;align-items:flex-start;padding:35px;}
.cta_box h2{font-size:28px;}
}
</style>
</head>
<body>
<header class="header">
<div class="wrap">
<div class="logo">LUX RESORT</div>
<nav class="menu">
<a href="#">About</a>
<a href="#">Rooms</a>
<a href="#">Service</a>
<a href="#">Reservation</a>
</nav>
<button class="ham">☰</button>
</div>
</header>
<div class="visual swiper">
<div class="swiper-wrapper">
<div class="swiper-slide slide1">
<div class="wrap">
<div class="visual_text">
<span>PREMIUM HOTEL & RESORT</span>
<h1>일상에서 벗어나<br>완벽한 휴식을 경험하세요</h1>
<p>자연과 품격이 어우러진 공간에서 특별한 하루와 여유로운 휴식을 제공합니다.</p>
<a class="btn open_btn">객실 예약하기</a>
</div>
</div>
</div>
<div class="swiper-slide slide2">
<div class="wrap">
<div class="visual_text">
<span>LUXURY STAY EXPERIENCE</span>
<h1>머무는 순간마다<br>특별한 경험</h1>
<p>객실, 다이닝, 스파까지 프리미엄 서비스를 한 공간에서 만나보세요.</p>
<a class="btn open_btn">예약 문의하기</a>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<section class="section">
<div class="wrap">
<div class="title">
<h2>Rooms & Suites</h2>
<p>편안함과 품격을 담은 객실을 만나보세요.</p>
</div>
<div class="room_wrap">
<div class="room_card">
<div class="room_img">
<img src="https://images.unsplash.com/photo-1566073771259-6a8506099945" alt="">
</div>
<div class="room_text">
<h3>Standard Room</h3>
<p>실용적이고 편안한 공간으로 여유로운 휴식을 제공합니다.</p>
<div class="price">₩180,000~</div>
<button class="reserve_btn open_btn">예약하기</button>
</div>
</div>
<div class="room_card">
<div class="room_img">
<img src="https://images.unsplash.com/photo-1560448204-e02f11c3d0e2" alt="">
</div>
<div class="room_text">
<h3>Deluxe Room</h3>
<p>넓은 공간과 고급스러운 인테리어로 특별한 숙박 경험을 제공합니다.</p>
<div class="price">₩260,000~</div>
<button class="reserve_btn open_btn">예약하기</button>
</div>
</div>
<div class="room_card">
<div class="room_img">
<img src="https://images.unsplash.com/photo-1578683010236-d716f9a3f461" alt="">
</div>
<div class="room_text">
<h3>Suite Room</h3>
<p>프리미엄 서비스를 경험할 수 있는 최고급 스위트 객실입니다.</p>
<div class="price">₩420,000~</div>
<button class="reserve_btn open_btn">예약하기</button>
</div>
</div>
</div>
</div>
</section>
<section class="service">
<div class="wrap">
<div class="service_box">
<div class="service_text">
<span>SPECIAL SERVICE</span>
<h2>머무는 순간마다<br>특별한 경험</h2>
<p>다이닝, 스파, 라운지 서비스까지 고객의 휴식을 위한 다양한 프리미엄 서비스를 제공합니다.</p>
</div>
<div class="service_list">
<div class="service_item">
<h3>SPA</h3>
<p>몸과 마음을 편안하게 하는 스파 서비스</p>
</div>
<div class="service_item">
<h3>DINING</h3>
<p>품격 있는 레스토랑과 다이닝 경험</p>
</div>
<div class="service_item">
<h3>POOL</h3>
<p>여유롭게 즐기는 프리미엄 수영장</p>
</div>
</div>
</div>
</div>
</section>
<section class="cta">
<div class="wrap">
<div class="cta_box">
<div>
<h2>지금 바로 특별한 휴식을 예약하세요</h2>
<p>원하는 날짜와 객실을 선택해 간편하게 예약할 수 있습니다.</p>
</div>
<a class="btn open_btn">예약 바로가기</a>
</div>
</div>
</section>
<footer class="footer">
COPYRIGHT 2026. LUX RESORT. ALL RIGHTS RESERVED.
</footer>
<div class="modal_wrap">
<div class="modal">
<h3>객실 예약</h3>
<input type="text" placeholder="이름">
<input type="text" placeholder="연락처">
<input type="text" placeholder="희망 객실">
<input type="text" placeholder="희망 날짜">
<button class="close_btn">닫기</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper('.visual', {
loop:true,
autoplay:{
delay:3000,
disableOnInteraction:false,
},
pagination:{
el:'.swiper-pagination',
clickable:true,
}
});
const hamEl = document.querySelector('.ham');
const menuEl = document.querySelector('.menu');
hamEl.addEventListener('click', () => {
menuEl.classList.toggle('active');
});
const openBtns = document.querySelectorAll('.open_btn');
const modalWrap = document.querySelector('.modal_wrap');
const closeBtn = document.querySelector('.close_btn');
for(let i = 0; i < openBtns.length; i++){
openBtns[i].addEventListener('click', () => {
modalWrap.classList.add('active');
});
}
closeBtn.addEventListener('click', () => {
modalWrap.classList.remove('active');
});
</script>
</body>
</html>
#실무형 8번 = 호텔 / 리조트 예약 사이트 완성형