정리글 보기 | 강의 정리

<!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:#fff;}
a{text-decoration:none;color:inherit;}
.wrap{max-width:1200px;width:100%;margin:0 auto;padding:0 20px;}

.header{height:80px;background:#fff;border-bottom:1px solid #eee;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:#0b6b3a;}
.menu{display:flex;gap:40px;}
.menu a{font-weight:700;}
.ham{display:none;background:none;border:0;font-size:28px;cursor:pointer;}

.visual{height:560px;}
.swiper-slide{height:560px;color:white;}
.slide1{
background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),
url("https://images.unsplash.com/photo-1535131749006-b7f58c99034b") no-repeat center/cover;
}
.slide2{
background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),
url("https://images.unsplash.com/photo-1587174486073-ae5e5cff23aa") no-repeat center/cover;
}
.visual .wrap{height:100%;display:flex;align-items:center;}
.visual_text{max-width:680px;}
.visual_text span{color:#b9f5c8;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:#0b6b3a;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:#666;}

.tab_menu{display:flex;justify-content:center;gap:15px;margin-bottom:40px;}
.tab_btn{padding:14px 28px;border:1px solid #0b6b3a;background:white;color:#0b6b3a;border-radius:30px;font-weight:900;cursor:pointer;}
.tab_btn.active{background:#0b6b3a;color:white;}

.course_wrap{display:none;gap:30px;}
.course_wrap.active{display:flex;}

.course_card{width:calc(100%/3);border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 12px 30px rgba(0,0,0,.08);transition:.3s;}
.course_card:hover{transform:translateY(-10px);}
.course_img{height:250px;}
.course_img img{width:100%;height:100%;object-fit:cover;display:block;}
.course_text{padding:30px;}
.course_text h3{font-size:25px;color:#0b6b3a;margin-bottom:12px;}
.course_text p{color:#666;line-height:1.7;}

.reserve{background:#f2f8f4;padding:90px 0;}
.reserve_box{background:white;border-radius:28px;padding:50px;display:flex;justify-content:space-between;align-items:center;gap:40px;box-shadow:0 15px 35px rgba(0,0,0,.08);}
.reserve_box h2{font-size:36px;margin-bottom:15px;}
.reserve_box p{color:#666;line-height:1.7;}

.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,.55);display:none;align-items:center;justify-content:center;z-index:50;}
.modal_wrap.active{display:flex;}
.modal{width:380px;background:white;border-radius:20px;padding:35px;text-align:center;}
.modal h3{font-size:26px;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:white;flex-direction:column;gap:0;border-bottom:1px solid #eee;}
.menu.active{display:flex;}
.menu a{padding:18px 20px;border-top:1px solid #eee;}

.visual,.swiper-slide{height:500px;}
.visual_text h1{font-size:38px;}
.visual_text p{font-size:16px;}

.course_wrap.active{flex-direction:column;}
.course_card{width:100%;}

.reserve_box{flex-direction:column;align-items:flex-start;padding:35px;}
.reserve_box h2{font-size:30px;}
}
</style>
</head>

<body>

<header class="header">
<div class="wrap">
<div class="logo">GREEN CC</div>

<nav class="menu">
<a href="#">Club</a>
<a href="#">Course</a>
<a href="#">Reservation</a>
<a href="#">Contact</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 GOLF CLUB</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>COURSE 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>Course Guide</h2>
<p>코스별 특징을 확인하고 원하는 라운딩을 선택하세요.</p>
</div>

<div class="tab_menu">
<button class="tab_btn active">East</button>
<button class="tab_btn">West</button>
<button class="tab_btn">Valley</button>
</div>

<div class="course_wrap active">
<div class="course_card">
<div class="course_img">
<img src="https://images.unsplash.com/photo-1587174486073-ae5e5cff23aa" alt="">
</div>
<div class="course_text">
<h3>East 1 Hole</h3>
<p>넓은 페어웨이와 안정적인 플레이가 가능한 코스입니다.</p>
</div>
</div>

<div class="course_card">
<div class="course_img">
<img src="https://images.unsplash.com/photo-1593111774240-d529f12cf4bb" alt="">
</div>
<div class="course_text">
<h3>East 2 Hole</h3>
<p>자연 풍경과 함께 여유로운 라운딩을 즐길 수 있습니다.</p>
</div>
</div>

<div class="course_card">
<div class="course_img">
<img src="https://images.unsplash.com/photo-1535131749006-b7f58c99034b" alt="">
</div>
<div class="course_text">
<h3>East 3 Hole</h3>
<p>초보자도 편안하게 도전할 수 있는 코스입니다.</p>
</div>
</div>
</div>

<div class="course_wrap">
<div class="course_card">
<div class="course_img">
<img src="https://images.unsplash.com/photo-1535131749006-b7f58c99034b" alt="">
</div>
<div class="course_text">
<h3>West 1 Hole</h3>
<p>전략적인 샷이 필요한 도전적인 코스입니다.</p>
</div>
</div>

<div class="course_card">
<div class="course_img">
<img src="https://images.unsplash.com/photo-1587174486073-ae5e5cff23aa" alt="">
</div>
<div class="course_text">
<h3>West 2 Hole</h3>
<p>언덕과 바람을 고려한 플레이가 필요합니다.</p>
</div>
</div>

<div class="course_card">
<div class="course_img">
<img src="https://images.unsplash.com/photo-1593111774240-d529f12cf4bb" alt="">
</div>
<div class="course_text">
<h3>West 3 Hole</h3>
<p>숙련자에게 적합한 코스 구성을 제공합니다.</p>
</div>
</div>
</div>

<div class="course_wrap">
<div class="course_card">
<div class="course_img">
<img src="https://images.unsplash.com/photo-1593111774240-d529f12cf4bb" alt="">
</div>
<div class="course_text">
<h3>Valley 1 Hole</h3>
<p>계곡형 지형을 살린 아름다운 코스입니다.</p>
</div>
</div>

<div class="course_card">
<div class="course_img">
<img src="https://images.unsplash.com/photo-1535131749006-b7f58c99034b" alt="">
</div>
<div class="course_text">
<h3>Valley 2 Hole</h3>
<p>자연과 조화를 이루는 감성적인 라운딩 코스입니다.</p>
</div>
</div>

<div class="course_card">
<div class="course_img">
<img src="https://images.unsplash.com/photo-1587174486073-ae5e5cff23aa" alt="">
</div>
<div class="course_text">
<h3>Valley 3 Hole</h3>
<p>정교한 방향성과 집중력이 필요한 코스입니다.</p>
</div>
</div>
</div>

</div>
</section>

<section class="reserve">
<div class="wrap">
<div class="reserve_box">
<div>
<h2>빠르고 간편한 예약 서비스</h2>
<p>원하는 날짜와 시간을 선택해 편리하게 라운딩을 예약할 수 있습니다.</p>
</div>

<a class="btn open_btn">예약 바로가기</a>
</div>
</div>
</section>

<footer class="footer">
COPYRIGHT 2026. GREEN CC. 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="희망 날짜">
<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 tabBtns = document.querySelectorAll('.tab_btn');
const courseWraps = document.querySelectorAll('.course_wrap');

for(let i = 0; i < tabBtns.length; i++){
tabBtns[i].addEventListener('click', () => {

for(let j = 0; j < tabBtns.length; j++){
tabBtns[j].classList.remove('active');
courseWraps[j].classList.remove('active');
}

tabBtns[i].classList.add('active');
courseWraps[i].classList.add('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>

#실무형 2번 = 골프 예약 / 골프장 사이트 완성형

HTML 구조 설계

첨부 파일

댓글 / 답글