프런트엔드-CSS

CSS 스타일링

강사: 최퍼블리셔 · 작성자: 이종춘 · 작성일: 2026-04-14 21:41:25 · 조회수: 15

스타일시트 요리엔 세션2 완료 설명
목록으로
<!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;
}

ul,li{
list-style: none;
}

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

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

body{
font-family: Arial, "맑은 고딕", sans-serif;
color: #333;
}

.cf:after{
content: "";
display: block;
clear: both;
}

/* =========================
메인 비주얼
========================= */
.main_visual{
width: 100%;
height: 980px;
background: url("main.jpg") no-repeat center / cover;
position: relative;
}

header{
width: 1800px;
position: absolute;
top: 40px;
left: 50%;
margin-left: -900px;
background-color: rgba(255,255,255,0.25);
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;
}

.menu_wrap li a:hover{
text-decoration: underline;
}

.side_menu{
float: right;
margin-top: 5px;
}

.side_menu a:hover{
text-decoration: underline;
}

.main_text{
position: absolute;
left: 180px;
bottom: 140px;
color: white;
}

.main_text h1{
font-size: 58px;
line-height: 1.3;
margin-bottom: 20px;
}

.main_text p{
font-size: 20px;
line-height: 1.8;
}

/* =========================
첫 번째 섹션
========================= */
.section_1{
padding: 120px 0;
background-color: #fff;
}

.inner{
width: 1705px;
margin: 0 auto;
}

.title_wrap_1{
margin-bottom: 50px;
}

.title_wrap_1 h2{
font-size: 40px;
margin-bottom: 12px;
}

.title_wrap_1 p{
color: #666;
line-height: 1.7;
}

.con_1{
width: 411.25px;
float: left;
margin-right: 20px;
background-color: #fff;
border-radius: 15px;
overflow: hidden;
border: 1px solid #ddd;
padding: 22px;
}

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

.con_1:hover{
background-color: #fff;
border: 1px solid #bbb;
}

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

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

.more_btn{
float: right;
width: 35px;
height: 35px;
background-color: #f1f1f1;
border-radius: 50%;
text-align: center;
line-height: 35px;
}

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

.con_title_1{
margin: 25px 0;
font-size: 24px;
color: #222;
}

.con_1 p{
color: #666;
line-height: 1.8;
}

/* =========================
두 번째 섹션
========================= */
.section_2{
background: #c8dbe7;
padding: 0;
}

.left_box{
width: 46%;
height: 1200px;
float: left;
background: url("water_drop.jpg") no-repeat center bottom / cover;
padding: 120px 90px;
}

.left_box h2{
font-size: 74px;
color: white;
line-height: 1.15;
margin-bottom: 40px;
}

.left_box p{
font-size: 22px;
color: white;
line-height: 1.7;
margin-bottom: 50px;
}

.left_btn{
display: inline-block;
padding: 20px 42px;
border: 1px solid #fff;
border-radius: 40px;
color: #fff;
font-size: 24px;
font-weight: bold;
}

.left_btn:hover{
background-color: #fff;
color: #222;
}

.right_box{
width: 54%;
float: right;
padding: 24px 24px 24px 0;
}

.news_card{
width: 100%;
height: 314px;
background-color: rgba(255,255,255,0.25);
border-radius: 26px;
padding: 24px;
margin-bottom: 28px;
}

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

.news_card:last-child{
margin-bottom: 0;
}

.news_img{
width: 42%;
height: 266px;
float: left;
border-radius: 18px;
overflow: hidden;
}

.news_info{
width: 52%;
float: right;
padding-top: 42px;
}

.news_info h3{
font-size: 30px;
line-height: 1.35;
margin-bottom: 24px;
color: #fff;
}

.news_info p{
font-size: 18px;
line-height: 1.8;
color: rgba(255,255,255,0.9);
margin-bottom: 34px;
}

.news_more{
display: inline-block;
padding: 14px 26px;
background-color: rgba(255,255,255,0.25);
border-radius: 30px;
color: #fff;
font-size: 17px;
font-weight: bold;
}

/* 카드 전체 hover 시 텍스트/버튼 색상 변경 */
.news_card:hover .news_info h3{
color: #222;
}

.news_card:hover .news_info p{
color: #666;
}

.news_card:hover .news_more{
background-color: #222;
color: #fff;
}
</style>
</head>
<body>

<section class="main_visual">

<header class="cf">
<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>

<div class="main_text">
<h1>
요리에 품격을 더하다.
</h1>
<p>
건강한 요리를 만드는 새로운 습관<br>
프리미엄 자연여과 정수기, 요리엔
</p>
</div>

</section>

<section class="section_1">
<div class="inner">

<div class="title_wrap_1">
<h2>Brand Story</h2>
<p>깨끗한 물과 건강한 식문화를 위한 요리엔의 가치</p>
</div>

<div class="con_wrap_1 cf">

<div class="con_1">
<a href="#">
<div class="sub_title_1 cf">
<h3>STEP 01 - Design</h3>
<div class="more_btn">&rarr;</div>
</div>

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

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

<div class="con_1">
<a href="#">
<div class="sub_title_1 cf">
<h3>STEP 02 - Materials</h3>
<div class="more_btn">&rarr;</div>
</div>

<div class="img_wrap_1">
<img src="https://yorien.com/img/main_step02.jpg" alt="content 2">
</div>

<h3 class="con_title_1">자연을 생각한 깐깐한 소재</h3>
<p>
제품의 시작은 좋은 소재에서부터 시작됩니다. 환경과 사람을 생각하는 마음으로, 지속 가능한 아름다움이라는 철학을 바탕으로 깐깐하게 선정하였습니다.
</p>
</a>
</div>

<div class="con_1">
<a href="#">
<div class="sub_title_1 cf">
<h3>STEP 03 - Craftmanship</h3>
<div class="more_btn">&rarr;</div>
</div>

<div class="img_wrap_1">
<img src="https://yorien.com/img/main_step03.jpg" alt="content 3">
</div>

<h3 class="con_title_1">장인들의 완벽한 기술력</h3>
<p>
국내 최고의 금형 및 사출 장인들이 모여 까다로운 형태를 오차 없이 구현하며 투명하고 맑은 요리엔의 본질을 완벽하게 보여줍니다.
</p>
</a>
</div>

<div class="con_1">
<a href="#">
<div class="sub_title_1 cf">
<h3>STEP 04 - Finish</h3>
<div class="more_btn">&rarr;</div>
</div>

<div class="img_wrap_1">
<img src="https://yorien.com/img/main_step04.jpg" alt="content 4">
</div>

<h3 class="con_title_1">최고를 위한 섬세한 마무리</h3>
<p>
직접 깎아 만든 북미산 오크나무와 최고급 독일산 원목 마감재인 아우로 오일을 사용하여 최상의 품질을 보장합니다.
</p>
</a>
</div>

</div>
</div>
</section>

<section class="section_2 cf">

<div class="left_box">
<h2>
Discover<br>
What’s New
</h2>
<p>
요리엔이 제안하는<br>
프로모션과 새로운 소식을 확인하세요.
</p>
<a href="#" class="left_btn">자세히 보기 →</a>
</div>

<div class="right_box">

<div class="news_card cf">
<div class="news_img">
<img src="https://yorien.com/data/file/promotion/thumb-9df7d8f6a8ed83e94730c787371ce6aa_0JvF8VaS_8d70be995c7c9bf86a86b45618dee2ecfb574503_1000x500.jpg" alt="봄 컬러 소개">
</div>
<div class="news_info">
<h3>봄에 찾아온 요리엔의 새로운 설렘</h3>
<p>만개하는 꽃의 설렘을 담은 요리엔의 새로운 컬러를 소개합니다.</p>
<a href="#" class="news_more">자세히 보기</a>
</div>
</div>

<div class="news_card cf">
<div class="news_img">
<img src="https://yorien.com/data/file/promotion/thumb-9df7d8f6a8ed83e94730c787371ce6aa_vgJZK9MP_2051ed40ba45776dd2645aed7d8cd6b37273936e_1000x500.jpg" alt="새로운 요리엔">
</div>
<div class="news_info">
<h3>새로운 요리엔을 만날 시간</h3>
<p>더 편안한 사용을 위한 디테일의 변화, 정교하게 통일된 다채로운 컬러까지.</p>
<a href="#" class="news_more">자세히 보기</a>
</div>
</div>

<div class="news_card cf">
<div class="news_img">
<img src="https://yorien.com/data/file/promotion/thumb-9df7d8f6a8ed83e94730c787371ce6aa_2BK9yvxp_2e4ef6b10b7de16fefa07f916b28cdfe125074e9_1000x500.jpg" alt="공식몰 리뉴얼">
</div>
<div class="news_info">
<h3>요리엔 공식몰 리뉴얼 오픈</h3>
<p>새로운 요리엔 공식몰에서 주방의 품격을 높여보세요.</p>
<a href="#" class="news_more">자세히 보기</a>
</div>
</div>

</div>
</section>

</body>
</html>
#스타일시트 요리엔 세션3 (선생님 코드 AI)완료

첨부 파일

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

댓글 / 답글

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