프런트엔드-CSS

CSS 스타일링

강사: 최퍼블리셔 · 작성자: 이종춘 · 작성일: 2026-04-16 13:03:11 · 조회수: 10

스타일시트 요리엔(강사선생님) 완료 설명
목록으로
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

a{
text-decoration: none;
color: black;
}

ul,li{
list-style: none;
}

img{
width: 100%;
display: block;
}

/* reset end */

.btn{
width: 180px;
padding: 12px 25px;
background-color: rgba(0, 0, 0, 0.15);
border-radius: 50px;
}

.btn span:nth-child(1){
margin-right: 30px;
}
/* common end */


header{
width: 1800px;
position: absolute;
top: 40px;
left: 50%;
margin-left: -900px;
background-color: rgba(255, 255, 255, 0.7);
border-radius: 20px;
padding: 30px;
z-index: 10;
}

header a{
color: white;
}

.logo{
width: 100px;
float: left;
}

.menu_wrap{
width: 280px;
height: 20px;
position: absolute;
top: 48%;
left: 50%;
margin-left: -140px;
margin-top: -10px;
}

.menu_wrap li{
font-size: 18px;
float: left;
margin-right: 60px;
}

.menu_wrap li:last-child{
margin-right: 0;
}

.side_menu{
float: right;
margin-top: 5px;
}
/* header end */


.section_1{
height: 980px;
/* background-image: url(https://yorien.com/data/file/promotion/thumb-9df7d8f6a8ed83e94730c787371ce6aa_vgJZK9MP_2051ed40ba45776dd2645aed7d8cd6b37273936e_1000x500.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center; */

/* *background 축약
=>background: 색상 경로 반복 위치 / 크기; */
background: url(https://yorien.com/data/file/promotion/thumb-9df7d8f6a8ed83e94730c787371ce6aa_vgJZK9MP_2051ed40ba45776dd2645aed7d8cd6b37273936e_1000x500.jpg) no-repeat center / cover;
position: relative;
}

.section_1 h1{
position: absolute;
bottom: 140px;
left: 180px;
font-size: 50px;
color: white;
}

/* section_1 end */

.section_2{
height: 980px;
background: url(https://yorien.com/img/main_step_bg.jpg) no-repeat center / cover;
padding: 150px 100px;
}

.title_wrap_2{
margin: 0 auto;
color: white;
text-align: center;
}

.title_wrap_2 h3{
font-size: 40px;
}

.title_wrap_2 p{
opacity: 0.7;
margin-top: 10px;
}

.con_wrap_2{
width: 1705px;
}

.con_2{
width: 411.25px;
background-color: rgba(255, 255, 255, 0.4);
border: 1px solid white;
border-radius: 15px;
padding: 22px;
float: left;
margin-right: 20px;
}

.con_2:last-child{
margin-right: 0;
}

.con_2:hover{
background-color: #fff;
}

.sub_title_2 {
margin-bottom: 30px;
height: 30px;
}

.sub_title_2 h3{
float: left;
font-size: 18px;
color: #555;
}

.more_btn{
float: right;
width: 35px;
height: 35px;
background-color: #fff;
border-radius: 50%;
}

.img_wrap_2{
border-radius: 15px;
overflow: hidden;
}

.con_title_2{
margin: 25px 0;
}
/* section_2 end */


.section_3{
background-color: lightblue;
padding: 150px 100px;
height: 1200px;
}

.section_3,
.section_3 a{
color: white;
}

.title_wrap_3{
float: left;
}

.title_wrap_3 h3{
font-size: 42px;
}

.title_wrap_3 p{
opacity: 0.8;
margin: 20px 0;
}


.con_wrap_3{
width: 55%;
float: right;
}

.con_3{
height: 240px;
background-color: rgba(255, 255, 255, 0.4);
border-radius: 15px;
padding: 22px;
margin-bottom: 30px;
}

.img_wrap_3{
width: 45%;
border-radius: 15px;
overflow: hidden;
float: left;
}

.text_wrap{
float: left;
padding: 30px 0 30px 30px;
}

.text_wrap h3{
font-size: 26px;
}

.text_wrap p{
opacity: 0.8;
margin: 15px 0 30px 0;
}

.con_btn{
width: 100px;
padding: 8px;
background-color: rgba(255, 255, 255, 0.4);
border-radius: 50px;
}

.con_3:hover{
background-color: white;
}

.con_3:hover h3{
color: #000;
}

.con_3:hover p{
color: #000;
}

.con_3:hover .con_btn{
background-color: aquamarine;
}
/* section_3 end */


.section_4{
padding: 150px 0;
background-color: rgb(182 162 129);
height: 950px;
}

.title_wrap_4{
text-align: center;
}

.title_wrap_4 h3{
font-size: 40px;
}

.more_btn_4{
margin: 30px auto;
}

.con_wrap_4{
width: 1400px;
margin: 0 auto;
}

.con_4{
width: 453.33333px;
border-radius: 15px;
background-color: rgba(255, 255, 255, 0.2);
padding: 22px;
float: left;
margin-right: 20px;
}

.con_4:last-child{
margin-right: 0;
}

.img_wrap_4{
border-radius: 15px;
overflow: hidden;
}

.con_4 h3,
.con_4 p{
font-size: 24px;
font-weight: 500;
}

.con_4 h3{
margin: 20px 0 10px 0;
}

.buy_btn{
height: 50px;
background-color: darkturquoise;
border-radius: 15px;
color: white;
text-align: center;
line-height: 50px;
margin-top: 50px;
}

</style>
</head>
<body>

<div class="wrap">

<header>

<div class="logo">
<a href="#">
<img src="https://yorien.com/img/logo.svg" alt="logo">
</a>
</div>

<ul class="menu_wrap">
<li><a href="#">About</a></li>
<li><a href="#">Chablis</a></li>
<li><a href="#">Shop</a></li>
</ul>

<div class="side_menu">
<a href="#">고객상담센터</a>
</div>

</header>
<!-- header end -->

<section class="section_1">

<h1>
봄을 여는 설렘,<br>
blossom pink
</h1>

</section>
<!-- section_1 end -->


<section class="section_2">

<div class="title_wrap_2">
<h3>
간편한 정수의 시작, <br>
요리엔
</h3>
<p>
요리엔은 누구나 손쉽게 깨끗한 물을 사용할 수 있도록, <br>
물을 넣고 따르는 모든 순간을 디자인하였습니다.
</p>
</div>

<div class="con_wrap_2">

<div class="con_2">
<a href="#">
<div class="sub_title_2">
<h3>STEP 01 - Design</h3>
<div class="more_btn"> &rarr; </div>
</div>

<div class="img_wrap_2">
<img src="https://yorien.com/img/main_step01.jpg" alt="content 1">
</div>

<h3 class="con_title_2">
자연을 담은 예술의 경지
</h3>
<p>
수백 개의 시안에서 탄생한 요리엔의 독창적인 곡선과 형태는 자연의 맑고 투명한 모습을 그대로 담고있으며, 레드닷 디자인 어워드 수상으로 그 가치를 인정받았습니다.
</p>
</a>
</div>

<div class="con_2">
<a href="#">
<div class="sub_title_2">
<h3>STEP 01 - Design</h3>
<div class="more_btn"> &rarr; </div>
</div>

<div class="img_wrap_2">
<img src="https://yorien.com/img/main_step01.jpg" alt="content 1">
</div>

<h3 class="con_title_2">
자연을 담은 예술의 경지
</h3>
<p>
수백 개의 시안에서 탄생한 요리엔의 독창적인 곡선과 형태는 자연의 맑고 투명한 모습을 그대로 담고있으며, 레드닷 디자인 어워드 수상으로 그 가치를 인정받았습니다.
</p>
</a>
</div>

<div class="con_2">
<a href="#">
<div class="sub_title_2">
<h3>STEP 01 - Design</h3>
<div class="more_btn"> &rarr; </div>
</div>

<div class="img_wrap_2">
<img src="https://yorien.com/img/main_step01.jpg" alt="content 1">
</div>

<h3 class="con_title_2">
자연을 담은 예술의 경지
</h3>
<p>
수백 개의 시안에서 탄생한 요리엔의 독창적인 곡선과 형태는 자연의 맑고 투명한 모습을 그대로 담고있으며, 레드닷 디자인 어워드 수상으로 그 가치를 인정받았습니다.
</p>
</a>
</div>

<div class="con_2">
<a href="#">
<div class="sub_title_2">
<h3>STEP 01 - Design</h3>
<div class="more_btn"> &rarr; </div>
</div>

<div class="img_wrap_2">
<img src="https://yorien.com/img/main_step01.jpg" alt="content 1">
</div>

<h3 class="con_title_2">
자연을 담은 예술의 경지
</h3>
<p>
수백 개의 시안에서 탄생한 요리엔의 독창적인 곡선과 형태는 자연의 맑고 투명한 모습을 그대로 담고있으며, 레드닷 디자인 어워드 수상으로 그 가치를 인정받았습니다.
</p>
</a>
</div>

</div>

</section>
<!-- section_2 end -->


<section class="section_3">

<div class="title_wrap_3">
<h3>
Discover <br>
What’s New
</h3>
<p>
요리엔이 제안하는 <br>
프로모션과 새로운 소식을 확인하세요.
</p>
<div class="btn more_btn_3">
<a href="#">
<span>자세히 보기</span>
<span>&rarr;</span>
</a>
</div>
</div>

<div class="con_wrap_3">

<div class="con_3">
<a href="#">

<div class="img_wrap_3">
<img src="https://yorien.com/data/file/promotion/thumb-9df7d8f6a8ed83e94730c787371ce6aa_O71nKPe3_1e15e32f90bafcf4fbb612a6c01f32db493a36e4_1000x500.jpg" alt="">
</div>

<div class="text_wrap">
<h3>손종원 셰프, 요리엔을 만나다.</h3>
<p>요리엔의 첫 모델, 손종원 셰프를 소개합니다. </p>
<div class="con_btn">자세히 보기</div>
</div>

</a>
</div>

<div class="con_3">
<a href="#">

<div class="img_wrap_3">
<img src="https://yorien.com/data/file/promotion/thumb-9df7d8f6a8ed83e94730c787371ce6aa_O71nKPe3_1e15e32f90bafcf4fbb612a6c01f32db493a36e4_1000x500.jpg" alt="">
</div>

<div class="text_wrap">
<h3>손종원 셰프, 요리엔을 만나다.</h3>
<p>요리엔의 첫 모델, 손종원 셰프를 소개합니다. </p>
<div class="con_btn">자세히 보기</div>
</div>

</a>
</div>

<div class="con_3">
<a href="#">

<div class="img_wrap_3">
<img src="https://yorien.com/data/file/promotion/thumb-9df7d8f6a8ed83e94730c787371ce6aa_O71nKPe3_1e15e32f90bafcf4fbb612a6c01f32db493a36e4_1000x500.jpg" alt="">
</div>

<div class="text_wrap">
<h3>손종원 셰프, 요리엔을 만나다.</h3>
<p>요리엔의 첫 모델, 손종원 셰프를 소개합니다. </p>
<div class="con_btn">자세히 보기</div>
</div>

</a>
</div>

</div>

</section>
<!-- section_3 end -->


<section class="section_4">

<div class="title_wrap_4">
<h3>건강한 요리를 위한 새로운 습관</h3>
<div class="btn more_btn_4">
<a href="#">
<span>자세히 보기</span>
<span>&rarr;</span>
</a>
</div>
</div>

<div class="con_wrap_4">

<div class="con_4">
<a href="#">
<div class="img_wrap_4">
<img src="https://yorien.com/data/item/1771839139/2026.04.144YSL4YWt4YSF4YW14YSL4YWm4Yar4YSJ4YWj4YSH4YWz4Yav4YSF4YW14YSS4YWq4YSL4YW14YSQ4YWz4YSG4YWu4Yav4YSS4YWh4Ya44YSJ4YWl4Ya8.jpg" alt="">
</div>

<h3>
요리엔 샤블리 스노우 화이트
</h3>
<p>155,000원</p>

<div class="buy_btn">
구입하기
</div>
</a>
</div>

<div class="con_4">
<a href="#">
<div class="img_wrap_4">
<img src="https://yorien.com/data/item/1771839139/2026.04.144YSL4YWt4YSF4YW14YSL4YWm4Yar4YSJ4YWj4YSH4YWz4Yav4YSF4YW14YSS4YWq4YSL4YW14YSQ4YWz4YSG4YWu4Yav4YSS4YWh4Ya44YSJ4YWl4Ya8.jpg" alt="">
</div>

<h3>
요리엔 샤블리 스노우 화이트
</h3>
<p>155,000원</p>

<div class="buy_btn">
구입하기
</div>
</a>
</div>

<div class="con_4">
<a href="#">
<div class="img_wrap_4">
<img src="https://yorien.com/data/item/1771839139/2026.04.144YSL4YWt4YSF4YW14YSL4YWm4Yar4YSJ4YWj4YSH4YWz4Yav4YSF4YW14YSS4YWq4YSL4YW14YSQ4YWz4YSG4YWu4Yav4YSS4YWh4Ya44YSJ4YWl4Ya8.jpg" alt="">
</div>

<h3>
요리엔 샤블리 스노우 화이트
</h3>
<p>155,000원</p>

<div class="buy_btn">
구입하기
</div>
</a>
</div>

</div>


<img src="logo.svg" alt="">

</section>


</div>

</body>
</html>
#스타일시트 요리엔(강사선생님) 완료

첨부 파일

0개
첨부된 파일이 없습니다.

댓글 / 답글

0개
댓글을 작성하려면 로그인하세요.
아직 댓글이 없습니다.