✅ 레퍼런스 웹사이트 구조 선정 후, 클론 코딩하기
레퍼런스 웹사이트 : https://www.sulwhasoo.com/kr/ko/index.html
(1) 레퍼런스 웹사이트 레이아웃 구조 살펴보기(블록화 하기)
(2) 레퍼런스 웹사이트 클론 코딩 하기
화면 기록 2025-05-20 오후 6.23.13.mov
17.67MB
[index.html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>설화수 클론 코딩</title>
</head>
<body>
<div class="wrap">
<header>
<div class="selectlag"><span style="padding-right:8px;">한국/한국어</span>
<img src="https://www.sulwhasoo.com/kr/ko/resource/img/mainnew/newsulwhasoo_hd_white_arr_b_220902.png" alt="화살표">
</div>
<span class="logo"><img src="https://www.sulwhasoo.com/kr/ko/resource/img/mainnew/sulwhasoo_white_logo_220902.png" alt="로고"></span>
<ul class="link">
<li><a href="#">매장찾기</a></li>
<li><a href="#">구매하기</a></li>
<li><a href="#"><img src="https://www.sulwhasoo.com/kr/ko/resource/img/mainnew/newsulwhasoo_hd_white_search_220902.png" alt="돋보기"></a></li>
</ul>
</header>
<div class="navi">
<ul>
<li><a href="$"><span>윤조</span></a></li>
<li><a href="$"><span>자음생</span></a></li>
<li><a href="$"><span>기프트</span></a></li>
<li><a href="$"><span>베스트셀러</span></a></li>
<li><a href="$"><span>제품</span></a></li>
<li><a href="$"><span>스파</span></a></li>
<li><a href="$"><span>플래그십 스토어</span></a></li>
<li><a href="$"><span>ABOUT 설화수</span></a></li>
</ul>
</div>
<section class="mainimg">
<img src="http://sulwhasoo.com/kr/ko/layout/cont-main/keyvisual-new/__icsFiles/afieldfile/2025/03/17/250312_final_KR_the-ultimate-s-cream-rich_main_KV_pc.jpg" alt="메인이미지">
<div class="text">
<p class="renew1">리모델링 한 듯 되살아난 피부</p>
<p class="renew2">NEW 진설크림리치</p>
</div>
<div class="pagination">
<div></div>
<img src="https://www.sulwhasoo.com/kr/ko/resource/img/mainnew/sulwhasoo_main_stop_220902.png" alt="pagination">
</div>
<button class="prev"></button>
<button class="next"></button>
</section>
</div>
<section class="recomand">
<div class="recomandwrap">
<h2>설화수 추천</h2>
<div class="card1">
<div class="prd1">
<div class="imgwrap">
<img src="https://www.sulwhasoo.com/kr/ko/layout/cont-main/recommend-new/__icsFiles/afieldfile/2025/03/12/230803_final_TUS_Cream_pdp_thumb_640x640_60ml.jpg" alt="제품1">
<button class="prev"></button>
</div>
<div>
<p class="prdName">진설크림</p>
<p class="prdNameEng">The Ultimate S Cream</p>
<p class="price">520,000원</p>
</div>
</div>
<div class="prd2">
<img src="https://www.sulwhasoo.com/kr/ko/layout/cont-main/recommend-new/__icsFiles/afieldfile/2025/03/12/230228_final_Clarifying-Mask-120ml_thumbnail(640x640)_1.jpg" alt="제품1">
<div>
<p class="prdName">옥용팩</p>
<p class="prdNameEng">Clarifying Mask</p>
<p class="price">53,000원</p>
</div>
</div>
<div class="prd3">
<div class="imgwrap">
<img src="https://www.sulwhasoo.com/kr/ko/layout/cont-main/recommend-new/__icsFiles/afieldfile/2025/03/12/230228_final_Gentle-Cleasing-Foam-200ml_thumbnail(640x640)_1.jpg" alt="제품1">
<button class="next"></button>
</div>
<div>
<p class="prdName">순행클렌징폼</p>
<p class="prdNameEng">Gentle Cleaning Form</p>
<p class="price">42,000원</p>
</div>
</div>
</div>
</div>
</section>
<section class="best">
<div class="bestwrap">
<img src="https://www.sulwhasoo.com/kr/ko/resource/img/mainnew/sulwhasoo_main_bestseller_pc_kr_250218.jpg" alt="베스트셀러">
<div class="bestText">
<h2>베스트셀러</h2>
<p>건강하게 빛나고 힘 있게 채우는<br> 설화수의 시그니처 케어</p>
<span>자세히 보기</span>
</div>
</div>
</section>
<section class="season">
<div class="seasonwrap">
<h2>설화수 시즌추천</h2>
<div class="seaCard">
<div class="seaPrd1">
<img src="https://www.sulwhasoo.com/kr/ko/layout/cont-main/suggestion/__icsFiles/afieldfile/2025/03/12/250304_final_KR_FCAS-6th-Generation_thumbnail_Product_640.png" alt="시즌이미지1">
<div class="seaSub">
<p class="seaPrdName">윤조에센스 6세대</p>
<p class="seaPrdNameEng">First Care<br>Activating Serum VI</p>
<p class="seaPrice">520,000원</p>
</div>
</div>
<div class="seaPrd2">
<img src="https://www.sulwhasoo.com/kr/ko/layout/cont-main/suggestion/__icsFiles/afieldfile/2025/05/02/250430_final_KR_main_season_PC.jpg" alt="시즌이미지2">
<div class="seaMain">
<p class="seaTitle">건강한 피부 바탕위에</p>
<p class="seaText">자생력으로 차올린 고밀도 피부</p>
</div>
</div>
<div class="seaPrd3">
<img src="https://www.sulwhasoo.com/kr/ko/layout/cont-main/suggestion/__icsFiles/afieldfile/2025/03/12/240812_final_SWS_KR_CGR-Cream-Rich-50ml_thumbnail_Product_640.png" alt="시즌이미지3">
<div class="seaSub">
<p class="seaPrdName">자음생크림 리치</p>
<p class="seaPrdNameEng">Concentrated Ginseng<br>Rejuvenating Cream Rich</p>
<p class="seaPrice">270,000원</p>
</div>
</div>
</div>
</div>
</section>
<section class="store">
<div class="storewrap">
<div class="storeCard">
<div>
<img src="https://www.sulwhasoo.com/kr/ko/layout/cont-main/collection/__icsFiles/afieldfile/2025/03/12/220901_bukchon_708x600.jpg" alt="스토어1">
<div class="storeText">
<h3>설화수 북촌 플래그십 스토어</h3>
<span>자세히 보기</span>
</div>
</div>
<div>
<img src="https://www.sulwhasoo.com/kr/ko/layout/cont-main/collection/__icsFiles/afieldfile/2025/03/12/230516_final_Sulwhasoo-Dosan-Flagship-Store.jpg" alt="스토어2">
<div class="storeText">
<h3>설화수 도산 플래그십 스토어</h3>
<span>자세히 보기</span>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="bottom">
<div class="links">
<ul>
<li><a href="#">회사소개</a></li>
<li><a href="#">서비스 이용약관</a></li>
<li><a href="#">개인정보처리방침</a></li>
<li><a href="#">영샹정보처리방침</a></li>
<li><a href="#">사이트맵</a></li>
<li><a href="#">로그인</a></li>
</ul>
</div>
<div class="copy">
<p>고객서비스센터(수신자요금부담) : 080-023-5454 (월~금: AM 09:00~PM 06:00)</p>
<span>© AMOREPACIFIC CORPORATION. All rights reserved.</span>
</div>
</div>
</footer>
</body>
</html>
[style.css]
@charset "utf-8";
@font-face {
font-family: arita;
src: url("../font/AritaDotumKR-Thin.ttf");
font-weight: light;
}
*{margin: 0; padding:0; box-sizing: border-box;}
li{list-style: none;}
a{text-decoration: none; display: block; color:inherit;}
body{background: #ffffff; color:#000000; font-size: 14px; font-family: "arita", sans-serif;}
.wrap{position: relative; height: 626.352px;}
/* header */
header{margin: 0 auto; width: 1100px; height: 78px;
display: flex; font-size: 15px; color:#ffffff; padding-top:20px; position: relative; z-index:100;}
.link{display: flex; position: absolute; right: 0;}
.link li{padding: 0 15px; border-right: 1px solid #ffffff;}
.link li:last-child{border-right: none;}
.logo{position: absolute; top: 50%; left:50%; transform: translate(-50%,-50%);}
.logo img{width:166px; height: 32px;}
.navi{margin: 0 auto; width: 1100px; position: relative; z-index:100;}
.navi>ul{margin:0 164px; width:772px; height: 37px; padding-top:6px; padding-bottom:1px; display: flex; font-size: 16px; color:#ffffff;}
.navi>ul>li{padding: 10px 15px 0; flex-grow: 1;}
.navi>ul>li>a{padding-bottom: 12px; text-align: center;}
/* 메인 이미지 */
.mainimg{position: absolute; top:0; left:0; margin: 0 auto; width: 100%; height: 626.352px;}
.mainimg img{width: 100%; height: 626.352px;}
.text{position: absolute; bottom:173.25px; left:169.5px;}
.renew1{font-size: 18px; color: #222222; height: 27px;}
.renew2{font-family:"맑은 고딕"; font-weight: bold; font-size:36px; padding-top:13px;}
.pagination{position: absolute; padding-left:169.5px; bottom:89.391px; width: 100%; display: flex; align-items: center;}
.pagination div{margin-right:8px; width: 420px; height: 4px; border:1px solid #ffffff; background-color: #ffffff;}
.pagination img{width: 9px; height: 11px;}
.prev{top:50%; left:0;position:absolute; background: url(https://www.sulwhasoo.com/kr/ko/resource/img/mainnew/20210324-main-kv-arr-l.png); width: 68px; height: 68px;
background-color: rgba(255,255,255,.4); border:none; transform: translateY(-50%);}
.next{top:50%; right:-32px; position:absolute; background: url(https://www.sulwhasoo.com/kr/ko/resource/img/mainnew/20210324-main-kv-arr-r.png); width: 68px; height: 68px;
background-color: rgba(255,255,255,.4); border:none; transform: translateX(-50%);}
/* 추천 상품 */
.recomand{margin-top:120px; width: 100%; height: 706px; padding:0 24px;}
.recomandwrap{margin: 0 auto; width: 1440px;}
.recomand h2{color:#000000; font-family: "맑은 고딕"; font-size: 28px; padding-bottom: 20px;}
.card1{width:1440px; height: 644px; font-family: "나눔 고딕"; display:flex;}
.card1 div{width: 464px; height: 581px; margin-right:24px;}
.card1 div .imgwrap{position: relative; width: 464px; height: 464px;}
.card1 div img{width: 464px; height: 464px;}
.card1 div div{width: 454px; height: 122px; text-align: center;}
.prdName{height: 30px; margin-top:23px; font-size: 20px; font-weight: 700;}
.prdNameEng{height: 24px; margin:2px; margin-bottom:14px; font-size: 16px; font-weight: 400; font-size:16px; letter-spacing: -.025em; color:#888;}
.price{height: 24px; font-weight: 500; font-size: 16px; letter-spacing: -.025em;}
/* 베스트 셀러 상품 */
.best{margin-top:120px; width: 100%; height: 540px; padding:0 24px; font-family: Theinhardt,NotoSans,"Malgun Gothic","맑은 고딕","Nanum Gothic","나눔 고딕","돋움",dotum,sans-serif;}
.bestwrap{margin: 0 auto; width: 1440px; position: relative;}
.bestText{position: absolute; left:170px; bottom:90px;}
.bestText h2{color:#222222; font-size:32px; height: 48px; padding:0;}
.bestText p{padding-top: 7px; height: 61px; font-size:18px; color:#666666; line-height: 1.5; font-weight: 400; letter-spacing: -.025em;}
.bestText span{display:block; width: 120px; height: 38px; margin-top:26px; font-size:14px; font-weight: 500; border:1px solid #000; padding:8px 23px;}
/* 시즌 추천 */
.season{margin-top:120px; width: 100%; height: 675px; padding:0 24px; font-family: Theinhardt,NotoSans,"Malgun Gothic","맑은 고딕","Nanum Gothic","나눔 고딕","돋움",dotum,sans-serif;}
.seasonwrap{margin: 0 auto; width: 1440px;}
.season h2{color:#000000; font-family: "맑은 고딕"; font-size: 28px; padding-bottom: 20px;}
.seaCard{display: flex; align-items: center; width: 100%;}
.seaCard>div {width: 342px; height: 546px; padding-bottom:50px; background:#ededed; text-align: center; margin-right:27px;}
.seaCard div img{width: 342px; height: 342px;}
.seaCard .seaPrd2{width: 708px; height: 546px; position: relative; text-align: left; }
.seaCard .seaPrd2 img{width: 708px; height: 546px;}
.seaCard .seaPrd3{margin-right: 0;}
.seaCard>div>div{margin-top:24px; width: 342px; height: 120px;}
.seaPrdName{height: 30px; padding-bottom:3px; font-size:20px; font-weight: 700;}
.seaPrdNameEng{font-weight: 400; font-size: 16px; color:#888; padding:0 6.055px 15px; line-height: 1.5; letter-spacing: -.025em;}
.seaPrice{font-weight: 500; font-size:16px; letter-spacing: -.025em; height: 24px; word-spacing: 1.5;}
.seaMain{position: absolute; bottom:0; height: 118.734px; color:#fff;}
.seaTitle{padding-left:62px; padding-bottom: 3px; font-weight: 700; font-size: 24px; letter-spacing: .025em;}
.seaText{padding: 7.531px 48.203px 12.531px 62px;font-weight: 400; font-size: 16px; letter-spacing: .025em; }
/* 스토어 */
.store{margin-top:120px; width: 100%; height: 718.555px; padding:0 24px; font-family: Theinhardt,NotoSans,"Malgun Gothic","맑은 고딕","Nanum Gothic","나눔 고딕","돋움",dotum,sans-serif;}
.storewrap{margin: 0 auto; width: 1440px; height: 718.555px;}
.storeCard{display: flex;}
.storeCard>div:first-child{margin-right:26px;}
.storeCard img{width: 707px; height: 599.148px;}
.storeText{width: 707px; height: 119.406px; text-align: center;}
.storeText h3{height: 78px; padding-top:22px; padding-bottom:14px; font-size: 28px; font-weight: 700; letter-spacing: -.025em;}
.storeText span{display: inline-block; font-weight: 500; font-size: 14px; border: 1px solid #000; padding:9.203px 33.141px; letter-spacing: -.025em;}
/* footer */
footer{margin-top: 80px; padding-bottom: 37px; width: 100%; height: 155px;}
footer .links{border-top:1px solid #eee; border-bottom: 1px solid #eee;}
.links ul{display: flex; margin-left:346px; width: 820px; height: 55px; align-items: center;}
.links ul li a{margin-left:14px; padding: 3px 21px 3px 0; font-size:15px; color:#555; border-right: 1px solid #eee;}
.links ul li:first-child a{margin-left:0;}
.links ul li:last-child a{border-right:none;}
.copy{margin-left:346px; margin-top:7px;}
.copy p{padding: 3px 0; font-size:15px; color:#555; height:43px; display: flex; align-items: center;}
.copy span{font-size:13px; height: 20px;;}