정리글 보기 | 강의 정리

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>쇼핑몰 사이트 샘플</title>

<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 */
.header{
height:80px;
background:#fff;
border-bottom:1px solid #eee;
}

.header .wrap{
height:80px;
display:flex;
justify-content:space-between;
align-items:center;
}

.logo{
font-size:26px;
font-weight:800;
color:#ff4f7b;
}

.menu{
display:flex;
gap:40px;
}

.menu a{
font-size:16px;
font-weight:700;
}

/* Hero */
.hero{
background:#fff0f4;
padding:100px 0;
}

.hero .wrap{
display:flex;
justify-content:space-between;
align-items:center;
gap:50px;
}

.hero_text{
width:50%;
}

.hero_text span{
display:inline-block;
margin-bottom:20px;
color:#ff4f7b;
font-weight:800;
}

.hero_text h1{
font-size:54px;
line-height:1.2;
margin-bottom:25px;
}

.hero_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:800;
}

.hero_img{
width:50%;
height:400px;
background:
url("https://images.unsplash.com/photo-1441986300917-64674bd600d8")
no-repeat center / cover;
border-radius:30px;
}

/* Section */
.section{
padding:90px 0;
}

.section_title{
text-align:center;
margin-bottom:50px;
}

.section_title h2{
font-size:38px;
margin-bottom:15px;
}

.section_title p{
font-size:17px;
color:#666;
}

/* Product */
.product_wrap{
display:flex;
gap:30px;
}

.product_card{
width:calc(100% / 3);
border:1px solid #eee;
border-radius:24px;
overflow:hidden;
background:white;
transition:.3s;
}

.product_card:hover{
transform:translateY(-10px);
box-shadow:0 15px 30px rgba(0,0,0,.1);
}

.product_img{
height:270px;
background:#eee;
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:800;
}

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

/* Review */
.review{
background:#111;
color:white;
padding:90px 0;
}

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

.review .section_title p{
color:#aaa;
}

/* Footer */
.footer{
height:100px;
background:#f5f5f5;
color:#777;
display:flex;
justify-content:center;
align-items:center;
}

/* Mobile */
@media(max-width:768px){

.header{
height:auto;
padding:20px 0;
}

.header .wrap{
height:auto;
flex-direction:column;
gap:20px;
}

.menu{
gap:20px;
flex-wrap:wrap;
justify-content:center;
}

.hero{
padding:70px 0;
}

.hero .wrap{
flex-direction:column;
}

.hero_text,
.hero_img{
width:100%;
}

.hero_text h1{
font-size:36px;
}

.hero_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>

</div>
</header>

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

<div class="hero_text">
<span>NEW SEASON COLLECTION</span>

<h1>
일상을 빛내는<br>
감각적인 라이프스타일
</h1>

<p>
트렌디한 디자인과 실용성을 담은 제품으로
매일의 순간을 특별하게 만들어보세요.
</p>

<a href="#" class="btn">쇼핑하러 가기</a>
</div>

<div class="hero_img"></div>

</div>
</section>

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

<div class="section_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="상품1">
<span class="badge">BEST</span>
</div>

<div class="product_text">
<h3>Minimal Watch</h3>
<p>
깔끔한 디자인과 실용성을 담은
데일리 패션 아이템입니다.
</p>
<div class="price">₩89,000</div>
</div>
</div>

<div class="product_card">
<div class="product_img">
<img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff" alt="상품2">
<span class="badge">NEW</span>
</div>

<div class="product_text">
<h3>Daily Sneakers</h3>
<p>
편안한 착용감과 감각적인 컬러가 돋보이는
데일리 스니커즈입니다.
</p>
<div class="price">₩129,000</div>
</div>
</div>

<div class="product_card">
<div class="product_img">
<img src="https://images.unsplash.com/photo-1543163521-1bf539c55dd2" alt="상품3">
<span class="badge">SALE</span>
</div>

<div class="product_text">
<h3>Modern Shoes</h3>
<p>
심플한 라인과 고급스러운 무드로
스타일을 완성하는 슈즈입니다.
</p>
<div class="price">₩99,000</div>
</div>
</div>

</div>

</div>
</section>

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

<div class="section_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>

</body>
</html>

#샘플9 = 쇼핑몰 / 제품 판매 사이트형

HTML 구조 설계

첨부 파일

댓글 / 답글