<!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;}
button{font-family: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:#ff4f7b;}
.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;background:#fff0f4;}
.visual .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:50px;}
.visual_text{width:50%;}
.visual_text span{color:#ff4f7b;font-weight:900;}
.visual_text h1{font-size:56px;line-height:1.2;margin:20px 0;}
.visual_text p{font-size:18px;line-height:1.7;color:#555;margin-bottom:35px;}
.btn{display:inline-block;padding:16px 34px;background:#ff4f7b;color:white;border-radius:8px;font-weight:900;cursor:pointer;}
.visual_img{width:45%;height:380px;border-radius:30px;background:url("https://images.unsplash.com/photo-1441986300917-64674bd600d8") no-repeat center/cover;}
.section{padding:90px 0;}
.title{text-align:center;margin-bottom:50px;}
.title h2{font-size:38px;margin-bottom:15px;}
.title p{color:#666;}
.product_wrap{display:flex;gap:30px;}
.product_card{width:calc(100%/3);border:1px solid #eee;border-radius:24px;overflow:hidden;background:#fff;transition:.3s;}
.product_card:hover{transform:translateY(-10px);box-shadow:0 15px 35px rgba(0,0,0,.1);}
.product_img{height:270px;position:relative;}
.product_img img{width:100%;height:100%;object-fit:cover;display:block;}
.badge{position:absolute;top:18px;left:18px;padding:7px 13px;background:#ff4f7b;color:white;border-radius:30px;font-size:13px;font-weight:900;}
.product_text{padding:30px;}
.product_text h3{font-size:24px;margin-bottom:12px;}
.product_text p{font-size:15px;line-height:1.7;color:#666;margin-bottom:20px;}
.price{font-size:24px;color:#ff4f7b;font-weight:900;margin-bottom:20px;}
.buy_btn{width:100%;height:48px;border:0;border-radius:8px;background:#111;color:white;font-weight:900;cursor:pointer;}
.review{background:#111;color:white;padding:90px 0;}
.review .title p{color:#aaa;}
.review_wrap{display:flex;gap:30px;}
.review_card{width:calc(100%/3);background:#222;border-radius:24px;padding:35px;}
.review_card h3{font-size:22px;color:#ff9ab3;margin-bottom:15px;}
.review_card p{color:#ddd;line-height:1.7;font-size:15px;}
.footer{height:100px;background:#f5f5f5;color:#777;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:#ff4f7b;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:auto;}
.visual .wrap{flex-direction:column;padding:70px 20px;}
.visual_text,.visual_img{width:100%;}
.visual_text h1{font-size:36px;}
.visual_img{height:300px;}
.product_wrap,.review_wrap{flex-direction:column;}
.product_card,.review_card{width:100%;}
}
</style>
</head>
<body>
<header class="header">
<div class="wrap">
<div class="logo">SHOP NOW</div>
<nav class="menu">
<a href="#">New</a>
<a href="#">Best</a>
<a href="#">Sale</a>
<a href="#">Review</a>
</nav>
<button class="ham">☰</button>
</div>
</header>
<div class="visual swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="wrap">
<div class="visual_text">
<span>NEW SEASON COLLECTION</span>
<h1>일상을 빛내는<br>감각적인 라이프스타일</h1>
<p>트렌디한 디자인과 실용성을 담은 제품으로 매일의 순간을 특별하게 만들어보세요.</p>
<a class="btn open_btn">쇼핑하러 가기</a>
</div>
<div class="visual_img"></div>
</div>
</div>
<div class="swiper-slide">
<div class="wrap">
<div class="visual_text">
<span>BEST ITEM SALE</span>
<h1>지금 가장 인기 있는<br>베스트 상품 모음</h1>
<p>고객들이 선택한 인기 제품을 특별한 가격으로 만나보세요.</p>
<a class="btn open_btn">구매 문의하기</a>
</div>
<div class="visual_img"></div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<section class="section">
<div class="wrap">
<div class="title">
<h2>Best Products</h2>
<p>지금 가장 사랑받는 인기 상품입니다.</p>
</div>
<div class="product_wrap">
<div class="product_card">
<div class="product_img">
<img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30" alt="">
<span class="badge">BEST</span>
</div>
<div class="product_text">
<h3>Minimal Watch</h3>
<p>깔끔한 디자인과 실용성을 담은 데일리 패션 아이템입니다.</p>
<div class="price">₩89,000</div>
<button class="buy_btn open_btn">구매하기</button>
</div>
</div>
<div class="product_card">
<div class="product_img">
<img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff" alt="">
<span class="badge">NEW</span>
</div>
<div class="product_text">
<h3>Daily Sneakers</h3>
<p>편안한 착용감과 감각적인 컬러가 돋보이는 데일리 스니커즈입니다.</p>
<div class="price">₩129,000</div>
<button class="buy_btn open_btn">구매하기</button>
</div>
</div>
<div class="product_card">
<div class="product_img">
<img src="https://images.unsplash.com/photo-1543163521-1bf539c55dd2" alt="">
<span class="badge">SALE</span>
</div>
<div class="product_text">
<h3>Modern Shoes</h3>
<p>심플한 라인과 고급스러운 무드로 스타일을 완성하는 슈즈입니다.</p>
<div class="price">₩99,000</div>
<button class="buy_btn open_btn">구매하기</button>
</div>
</div>
</div>
</div>
</section>
<section class="review">
<div class="wrap">
<div class="title">
<h2>Customer Review</h2>
<p>실제 고객들이 남긴 만족 후기입니다.</p>
</div>
<div class="review_wrap">
<div class="review_card">
<h3>“디자인이 정말 예뻐요.”</h3>
<p>심플한 디자인이라 어떤 스타일에도 잘 어울리고 매일 사용하기 좋습니다.</p>
</div>
<div class="review_card">
<h3>“배송도 빠르고 만족합니다.”</h3>
<p>상품 퀄리티도 좋고 포장도 깔끔해서 재구매 의사가 있습니다.</p>
</div>
<div class="review_card">
<h3>“실물이 더 고급스러워요.”</h3>
<p>사진보다 실제 제품이 더 마음에 들었고 선물용으로도 좋을 것 같습니다.</p>
</div>
</div>
</div>
</section>
<footer class="footer">
COPYRIGHT 2026. SHOP NOW. 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 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:#fff;}
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:#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:#ff4f7b;}
.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;background:#fff0f4;}
.visual .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:50px;}
.visual_text{width:50%;}
.visual_text span{color:#ff4f7b;font-weight:900;}
.visual_text h1{font-size:56px;line-height:1.2;margin:20px 0;}
.visual_text p{font-size:18px;line-height:1.7;color:#555;margin-bottom:35px;}
.btn{display:inline-block;padding:16px 34px;background:#ff4f7b;color:white;border-radius:8px;font-weight:900;cursor:pointer;}
.visual_img{width:45%;height:380px;border-radius:30px;background:url("https://images.unsplash.com/photo-1441986300917-64674bd600d8") no-repeat center/cover;}
.section{padding:90px 0;}
.title{text-align:center;margin-bottom:50px;}
.title h2{font-size:38px;margin-bottom:15px;}
.title p{color:#666;}
.product_wrap{display:flex;gap:30px;}
.product_card{width:calc(100%/3);border:1px solid #eee;border-radius:24px;overflow:hidden;background:#fff;transition:.3s;}
.product_card:hover{transform:translateY(-10px);box-shadow:0 15px 35px rgba(0,0,0,.1);}
.product_img{height:270px;position:relative;}
.product_img img{width:100%;height:100%;object-fit:cover;display:block;}
.badge{position:absolute;top:18px;left:18px;padding:7px 13px;background:#ff4f7b;color:white;border-radius:30px;font-size:13px;font-weight:900;}
.product_text{padding:30px;}
.product_text h3{font-size:24px;margin-bottom:12px;}
.product_text p{font-size:15px;line-height:1.7;color:#666;margin-bottom:20px;}
.price{font-size:24px;color:#ff4f7b;font-weight:900;margin-bottom:20px;}
.buy_btn{width:100%;height:48px;border:0;border-radius:8px;background:#111;color:white;font-weight:900;cursor:pointer;}
.review{background:#111;color:white;padding:90px 0;}
.review .title p{color:#aaa;}
.review_wrap{display:flex;gap:30px;}
.review_card{width:calc(100%/3);background:#222;border-radius:24px;padding:35px;}
.review_card h3{font-size:22px;color:#ff9ab3;margin-bottom:15px;}
.review_card p{color:#ddd;line-height:1.7;font-size:15px;}
.footer{height:100px;background:#f5f5f5;color:#777;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:#ff4f7b;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:auto;}
.visual .wrap{flex-direction:column;padding:70px 20px;}
.visual_text,.visual_img{width:100%;}
.visual_text h1{font-size:36px;}
.visual_img{height:300px;}
.product_wrap,.review_wrap{flex-direction:column;}
.product_card,.review_card{width:100%;}
}
</style>
</head>
<body>
<header class="header">
<div class="wrap">
<div class="logo">SHOP NOW</div>
<nav class="menu">
<a href="#">New</a>
<a href="#">Best</a>
<a href="#">Sale</a>
<a href="#">Review</a>
</nav>
<button class="ham">☰</button>
</div>
</header>
<div class="visual swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="wrap">
<div class="visual_text">
<span>NEW SEASON COLLECTION</span>
<h1>일상을 빛내는<br>감각적인 라이프스타일</h1>
<p>트렌디한 디자인과 실용성을 담은 제품으로 매일의 순간을 특별하게 만들어보세요.</p>
<a class="btn open_btn">쇼핑하러 가기</a>
</div>
<div class="visual_img"></div>
</div>
</div>
<div class="swiper-slide">
<div class="wrap">
<div class="visual_text">
<span>BEST ITEM SALE</span>
<h1>지금 가장 인기 있는<br>베스트 상품 모음</h1>
<p>고객들이 선택한 인기 제품을 특별한 가격으로 만나보세요.</p>
<a class="btn open_btn">구매 문의하기</a>
</div>
<div class="visual_img"></div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<section class="section">
<div class="wrap">
<div class="title">
<h2>Best Products</h2>
<p>지금 가장 사랑받는 인기 상품입니다.</p>
</div>
<div class="product_wrap">
<div class="product_card">
<div class="product_img">
<img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30" alt="">
<span class="badge">BEST</span>
</div>
<div class="product_text">
<h3>Minimal Watch</h3>
<p>깔끔한 디자인과 실용성을 담은 데일리 패션 아이템입니다.</p>
<div class="price">₩89,000</div>
<button class="buy_btn open_btn">구매하기</button>
</div>
</div>
<div class="product_card">
<div class="product_img">
<img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff" alt="">
<span class="badge">NEW</span>
</div>
<div class="product_text">
<h3>Daily Sneakers</h3>
<p>편안한 착용감과 감각적인 컬러가 돋보이는 데일리 스니커즈입니다.</p>
<div class="price">₩129,000</div>
<button class="buy_btn open_btn">구매하기</button>
</div>
</div>
<div class="product_card">
<div class="product_img">
<img src="https://images.unsplash.com/photo-1543163521-1bf539c55dd2" alt="">
<span class="badge">SALE</span>
</div>
<div class="product_text">
<h3>Modern Shoes</h3>
<p>심플한 라인과 고급스러운 무드로 스타일을 완성하는 슈즈입니다.</p>
<div class="price">₩99,000</div>
<button class="buy_btn open_btn">구매하기</button>
</div>
</div>
</div>
</div>
</section>
<section class="review">
<div class="wrap">
<div class="title">
<h2>Customer Review</h2>
<p>실제 고객들이 남긴 만족 후기입니다.</p>
</div>
<div class="review_wrap">
<div class="review_card">
<h3>“디자인이 정말 예뻐요.”</h3>
<p>심플한 디자인이라 어떤 스타일에도 잘 어울리고 매일 사용하기 좋습니다.</p>
</div>
<div class="review_card">
<h3>“배송도 빠르고 만족합니다.”</h3>
<p>상품 퀄리티도 좋고 포장도 깔끔해서 재구매 의사가 있습니다.</p>
</div>
<div class="review_card">
<h3>“실물이 더 고급스러워요.”</h3>
<p>사진보다 실제 제품이 더 마음에 들었고 선물용으로도 좋을 것 같습니다.</p>
</div>
</div>
</div>
</section>
<footer class="footer">
COPYRIGHT 2026. SHOP NOW. 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 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>
#실무형 9번 = 쇼핑몰 / 제품 판매 사이트 완성형