정리글 보기 | 강의 정리

<!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:#2b211b;background:#fffaf3;}
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:#fffaf3;border-bottom:1px solid #eadccc;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:#7a4a25;}
.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:#f4e5d3;}
.visual .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:50px;}
.visual_text{width:50%;}
.visual_text span{color:#9b5b2e;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.8;color:#6d5a4a;margin-bottom:35px;}
.btn{display:inline-block;padding:16px 34px;background:#7a4a25;color:white;border-radius:8px;font-weight:900;cursor:pointer;}
.visual_img{width:45%;height:390px;border-radius:34px;background:url("https://images.unsplash.com/photo-1495474472287-4d71bcdd2085") 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:#7a6a5b;}

.menu_wrap{display:flex;gap:30px;}
.menu_card{width:calc(100%/3);background:white;border-radius:24px;overflow:hidden;box-shadow:0 12px 30px rgba(80,45,20,.1);transition:.3s;}
.menu_card:hover{transform:translateY(-10px);}
.menu_img{height:260px;}
.menu_img img{width:100%;height:100%;object-fit:cover;display:block;}
.menu_text{padding:30px;}
.menu_text h3{font-size:24px;margin-bottom:12px;color:#7a4a25;}
.menu_text p{font-size:15px;line-height:1.7;color:#6d5a4a;margin-bottom:20px;}
.price{font-size:22px;font-weight:900;color:#9b5b2e;margin-bottom:18px;}
.order_btn{width:100%;height:48px;border:0;border-radius:8px;background:#2b211b;color:white;font-weight:900;cursor:pointer;}

.gallery{background:#2b211b;color:white;padding:90px 0;}
.gallery .title p{color:#d7c4b2;}
.gallery_wrap{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px;}
.gallery_item{height:260px;border-radius:22px;overflow:hidden;}
.gallery_item.big{height:540px;grid-row:span 2;}
.gallery_item img{width:100%;height:100%;object-fit:cover;display:block;transition:.4s;}
.gallery_item:hover img{transform:scale(1.08);}

.footer{height:100px;background:#fffaf3;color:#7a6a5b;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;color:#2b211b;}
.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:#fffaf3;flex-direction:column;gap:0;border-bottom:1px solid #eadccc;}
.menu.active{display:flex;}
.menu a{padding:18px 20px;border-top:1px solid #eadccc;}

.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;}

.menu_wrap{flex-direction:column;}
.menu_card{width:100%;}

.gallery_wrap{display:flex;flex-direction:column;}
.gallery_item,.gallery_item.big{height:260px;}
}
</style>
</head>

<body>

<header class="header">
<div class="wrap">
<div class="logo">MOOD CAFE</div>

<nav class="menu">
<a href="#">Brand</a>
<a href="#">Menu</a>
<a href="#">Gallery</a>
<a href="#">Store</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>SPECIALTY COFFEE BRAND</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>COZY CAFE EXPERIENCE</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>Signature Menu</h2>
<p>무드카페에서 가장 사랑받는 대표 메뉴입니다.</p>
</div>

<div class="menu_wrap">

<div class="menu_card">
<div class="menu_img">
<img src="https://images.unsplash.com/photo-1509042239860-f550ce710b93" alt="">
</div>
<div class="menu_text">
<h3>Deep Americano</h3>
<p>진한 원두 향과 깔끔한 끝맛이 매력적인 대표 커피입니다.</p>
<div class="price">₩4,500</div>
<button class="order_btn open_btn">주문하기</button>
</div>
</div>

<div class="menu_card">
<div class="menu_img">
<img src="https://images.unsplash.com/photo-1461023058943-07fcbe16d735" alt="">
</div>
<div class="menu_text">
<h3>Soft Latte</h3>
<p>부드러운 우유와 에스프레소가 어우러진 감성 라떼입니다.</p>
<div class="price">₩5,000</div>
<button class="order_btn open_btn">주문하기</button>
</div>
</div>

<div class="menu_card">
<div class="menu_img">
<img src="https://images.unsplash.com/photo-1551024506-0bccd828d307" alt="">
</div>
<div class="menu_text">
<h3>Sweet Dessert</h3>
<p>커피와 잘 어울리는 달콤한 디저트로 특별한 시간을 완성합니다.</p>
<div class="price">₩6,500</div>
<button class="order_btn open_btn">주문하기</button>
</div>
</div>

</div>

</div>
</section>

<section class="gallery">
<div class="wrap">

<div class="title">
<h2>Cafe Gallery</h2>
<p>따뜻한 공간과 감성적인 분위기를 만나보세요.</p>
</div>

<div class="gallery_wrap">
<div class="gallery_item big">
<img src="https://images.unsplash.com/photo-1554118811-1e0d58224f24" alt="">
</div>
<div class="gallery_item">
<img src="https://images.unsplash.com/photo-1501339847302-ac426a4a7cbb" alt="">
</div>
<div class="gallery_item">
<img src="https://images.unsplash.com/photo-1498804103079-a6351b050096" alt="">
</div>
<div class="gallery_item">
<img src="https://images.unsplash.com/photo-1511920170033-f8396924c3483" alt="">
</div>
<div class="gallery_item">
<img src="https://images.unsplash.com/photo-1495474472287-4d71bcdd2085" alt="">
</div>
</div>

</div>
</section>

<footer class="footer">
COPYRIGHT 2026. MOOD CAFE. 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>

#실무형 5번 = 카페 / 브랜드 사이트 완성형

HTML 구조 설계

첨부 파일

댓글 / 답글