프런트엔드-CSS

CSS 스타일링

강사: 최퍼블리셔 · 작성자: 이종춘 · 작성일: 2026-05-07 16:19:55 · 조회수: 6

동서식품 전체 설명
목록으로
<!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;}
html{scroll-behavior:smooth;}
body{
font-family:'Pretendard','Noto Sans KR',sans-serif;
color:#fff;
background:#000;
overflow-x:hidden;
}
a{text-decoration:none;color:inherit;}
ul,li{list-style:none;}

.bg-video{
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
object-fit:cover;
z-index:-2;
background:url("https://www.dongsuh.co.kr/images/pages/02_brand/img_brand_visual.jpg") center/cover no-repeat;
}

.overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
background:linear-gradient(to top, rgba(0,0,0,0.82), rgba(0,0,0,0.28));
z-index:-1;
}

.wrap{
width:100%;
max-width:1400px;
margin:0 auto;
padding:0 30px;
}

/* HEADER */
.header{
height:110px;
position:fixed;
top:0;
left:0;
width:100%;
z-index:50;
border-bottom:1px solid rgba(255,255,255,0.12);
background:rgba(0,0,0,0.18);
backdrop-filter:blur(8px);
box-shadow:0 8px 30px rgba(0,0,0,0.3);
transition:0.35s;
}

.header.scrolled{
height:72px;
background:rgba(0,0,0,0.78);
}

.header .wrap{
height:110px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
transition:0.35s;
}

.header.scrolled .wrap{
height:72px;
}

.logo{
position:absolute;
left:30px;
}

.logo img{
height:30px;
width:auto;
display:block;
transition:0.35s;
}

.header.scrolled .logo img{
height:42px;
}

/* HAMBURGER */
.hamburger{
display:none;
position:absolute;
right:30px;
top:50%;
transform:translateY(-50%);
font-size:32px;
color:#fff;
cursor:pointer;
z-index:80;
}

/* MENU */
.menu{
display:flex;
align-items:center;
gap:38px;
}

.menu-item{
position:relative;
}

.menu-btn{
background:none;
border:none;
color:#fff;
font-size:16px;
font-weight:600;
cursor:pointer;
padding:44px 0;
transition:0.3s;
}

.header.scrolled .menu-btn{
padding:26px 0;
}

.menu-btn:hover{
color:#d6b36a;
}

.sub-menu{
position:absolute;
top:100%;
left:50%;
transform:translateX(-50%) translateY(15px);
width:230px;
background:rgba(0,0,0,0.82);
border:1px solid rgba(255,255,255,0.15);
border-radius:16px;
padding:16px 0;
opacity:0;
visibility:hidden;
transition:0.3s;
backdrop-filter:blur(12px);
}

.sub-menu.active,
.menu-item:hover .sub-menu{
opacity:1;
visibility:visible;
transform:translateX(-50%) translateY(0);
}

.sub-menu a{
display:block;
padding:12px 22px;
font-size:15px;
color:rgba(255,255,255,0.85);
}

.sub-menu a:hover{
color:#d6b36a;
background:rgba(255,255,255,0.08);
}

/* SEARCH */
.search-area{
position:absolute;
right:30px;
display:flex;
align-items:center;
gap:12px;
}

.search-btn{
width:42px;
height:42px;
border-radius:50%;
border:1px solid rgba(255,255,255,0.2);
background:rgba(255,255,255,0.08);
display:flex;
justify-content:center;
align-items:center;
cursor:pointer;
}

.search-btn img{
width:18px;
filter:brightness(0) invert(1);
}

.search-box{
width:0;
overflow:hidden;
display:flex;
align-items:center;
gap:10px;
opacity:0;
transition:0.4s;
}

.search-box.active{
width:300px;
opacity:1;
}

.search-box input{
width:100%;
height:42px;
border:none;
outline:none;
border-radius:30px;
padding:0 18px;
background:rgba(255,255,255,0.12);
color:#fff;
}

.search-submit{
min-width:72px;
height:42px;
border:none;
border-radius:30px;
background:#d6b36a;
color:#111;
font-weight:700;
cursor:pointer;
}

/* HERO */
.hero{
height:100vh;
display:flex;
align-items:center;
position:relative;
z-index:2;
padding-top:110px;
}

.hero-text{
margin-left:120px;
max-width:700px;
transition:0.5s;
}

.brand{
font-size:46px;
font-weight:700;
color:#d6b36a;
margin-bottom:24px;
}

.title{
font-size:72px;
font-weight:700;
line-height:1.1;
letter-spacing:-3px;
margin-bottom:28px;
}

.desc{
font-size:22px;
color:rgba(255,255,255,0.82);
}

.hero-btn{
display:inline-block;
margin-top:34px;
padding:15px 34px;
background:#d6b36a;
color:#111;
border-radius:40px;
font-weight:800;
transition:0.3s;
}

.hero-btn:hover{
background:#fff;
transform:translateY(-4px);
}

.fade-up{
animation:fadeUp 1s ease;
}

@keyframes fadeUp{
from{opacity:0;transform:translateY(40px);}
to{opacity:1;transform:translateY(0);}
}

/* COMMON */
.content-section{
position:relative;
z-index:5;
padding:120px 40px;
background:#fff;
color:#111;
}

.section-head{
text-align:center;
margin-bottom:60px;
}

.section-head span{
display:block;
color:#d6b36a;
font-size:20px;
font-weight:800;
margin-bottom:16px;
}

.section-head h2{
font-size:42px;
line-height:1.35;
letter-spacing:-2px;
}

/* SCROLL ANIMATION */
.reveal{
opacity:0;
transform:translateY(45px);
transition:0.7s ease;
}

.reveal.active{
opacity:1;
transform:translateY(0);
}

/* PRODUCTS */
.product-grid{
max-width:1400px;
margin:0 auto;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:28px;
}

.product-card{
background:#f8f5ef;
border-radius:26px;
padding:34px 24px;
text-align:center;
transition:0.35s;
}

.product-card:hover{
transform:translateY(-12px);
box-shadow:0 20px 40px rgba(0,0,0,0.12);
}

.product-card img{
width:100%;
height:190px;
object-fit:contain;
margin-bottom:24px;
}

.product-card strong{
display:block;
font-size:22px;
margin-bottom:12px;
}

.product-card p{
font-size:16px;
line-height:1.6;
color:#555;
}

.more-btn{
display:inline-block;
margin-top:20px;
padding:10px 24px;
border-radius:30px;
background:#111;
color:#fff;
font-size:14px;
font-weight:700;
transition:0.3s;
}

.more-btn:hover{
background:#d6b36a;
color:#111;
}

/* BRANDS */
.brands-section{
background:#111;
color:#fff;
overflow:hidden;
}

.brand-logo-grid{
max-width:1200px;
margin:0 auto;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:28px;
}

.brand-logo-card{
height:170px;
background:#fff;
border-radius:28px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap:16px;
padding:24px;
transition:0.35s;
}

.brand-logo-card:hover{
transform:translateY(-10px);
box-shadow:0 18px 40px rgba(214,179,106,0.25);
}

.brand-logo-card img{
max-width:130px;
max-height:70px;
object-fit:contain;
}

.brand-logo-card strong{
color:#111;
font-size:17px;
}

/* CSR */
.csr-section{
background:#f7f1e7;
}

.csr-grid{
max-width:1200px;
margin:0 auto;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

.csr-card{
background:#fff;
border-radius:26px;
overflow:hidden;
min-height:300px;
box-shadow:0 12px 30px rgba(0,0,0,0.08);
transition:0.3s;
}

.csr-card:hover{
transform:translateY(-10px);
}

.csr-img{
height:150px;
background:#ddd center/cover no-repeat;
}

.csr-card:nth-child(1) .csr-img{
background-image:url("https://www.dongsuh.co.kr/images/pages/04_csr/img_csr_visual_1.jpg");
}

.csr-card:nth-child(2) .csr-img{
background-image:url("https://www.dongsuh.co.kr/images/pages/04_csr/img_csr_visual_2.jpg");
}

.csr-card:nth-child(3) .csr-img{
background-image:url("https://www.dongsuh.co.kr/images/pages/04_csr/img_csr_visual_3.jpg");
}

.csr-content{
padding:32px;
}

.csr-card h3{
font-size:25px;
margin-bottom:18px;
}

.csr-card p{
font-size:17px;
line-height:1.7;
color:#555;
}

/* BOARD */
.board-section{
background:#fff;
}

.cf-section{
background:#f8f8f8;
}

.board-list{
max-width:1000px;
margin:0 auto;
border-top:2px solid #111;
}

.board-list li{
display:flex;
justify-content:space-between;
align-items:center;
padding:24px 10px;
border-bottom:1px solid #ddd;
transition:0.3s;
}

.board-list li:hover{
background:#faf7f1;
padding-left:22px;
}

.board-list a{
color:#111;
font-size:20px;
font-weight:600;
}

.board-list a:hover{
color:#d6b36a;
}

.board-list span{
color:#555;
font-size:14px;
padding:7px 16px;
border:1px solid #ddd;
border-radius:20px;
background:#fff;
}

/* FOOTER */
.footer{
position:relative;
z-index:5;
padding:70px 40px;
background:#111;
color:#aaa;
text-align:center;
}

.footer h2{
color:#fff;
font-size:30px;
margin-bottom:20px;
}

.footer p{
margin-top:8px;
}

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

.header,
.header.scrolled{
height:82px;
position:fixed;
background:rgba(0,0,0,0.82);
}

.header .wrap,
.header.scrolled .wrap{
height:82px;
padding:0 20px;
justify-content:flex-start;
}

.logo{
position:static;
}

.logo img,
.header.scrolled .logo img{
height:42px;
}

.hamburger{
display:block;
}

.search-area{
display:none;
}

.menu{
position:fixed;
top:82px;
left:0;
width:100%;
height:calc(100vh - 82px);
background:rgba(0,0,0,0.94);
flex-direction:column;
justify-content:flex-start;
align-items:stretch;
gap:0;
padding:20px;
display:none;
overflow-y:auto;
}

.menu.active{
display:flex;
}

.menu-item{
width:100%;
text-align:left;
border-bottom:1px solid rgba(255,255,255,0.12);
}

.menu-btn,
.header.scrolled .menu-btn{
width:100%;
text-align:left;
padding:18px 0;
font-size:18px;
}

.sub-menu{
position:static;
transform:none;
width:100%;
display:none;
opacity:1;
visibility:visible;
border:none;
border-radius:0;
background:rgba(255,255,255,0.06);
padding:8px 0;
margin-bottom:12px;
}

.sub-menu.active,
.menu-item:hover .sub-menu{
display:block;
transform:none;
}

.hero{
height:100vh;
justify-content:center;
text-align:center;
padding:82px 20px 0;
}

.hero-text{
margin-left:0;
}

.brand{
font-size:30px;
}

.title{
font-size:42px;
letter-spacing:-1px;
}

.desc{
font-size:16px;
}

.content-section{
padding:80px 20px;
}

.section-head h2{
font-size:30px;
}

.product-grid,
.csr-grid,
.brand-logo-grid{
grid-template-columns:1fr;
}

.board-list li{
flex-direction:column;
align-items:flex-start;
gap:10px;
}

.board-list a{
font-size:17px;
}
}
</style>
</head>

<body id="top">

<video class="bg-video" autoplay muted loop playsinline poster="https://www.dongsuh.co.kr/images/pages/02_brand/img_brand_visual.jpg"></video>
<div class="overlay"></div>

<header class="header" id="header">
<div class="wrap">

<div class="logo">
<a href="#top">
<img src="https://www.dongsuh.co.kr/images/pages/01_company/img_ci_logotype_1.svg" alt="동서식품 로고">
</a>
</div>

<div class="hamburger" id="hamburger">☰</div>

<nav class="menu" id="menu">
<div class="menu-item">
<button class="menu-btn">회사소개</button>
<div class="sub-menu">
<a href="#">동서식품</a>
<a href="#">식품안전</a>
<a href="#">산업안전보건방침</a>
</div>
</div>

<div class="menu-item">
<button class="menu-btn">제품안내</button>
<div class="sub-menu">
<a href="#brands">브랜드</a>
<a href="#products">제품소개</a>
</div>
</div>

<div class="menu-item">
<button class="menu-btn">홍보센터</button>
<div class="sub-menu">
<a href="#news">뉴스</a>
<a href="#">이벤트</a>
<a href="#">동서식품 홍보영상</a>
<a href="#">동영상 레시피</a>
<a href="#cf">TV CF</a>
<a href="#">커피 클래스</a>
</div>
</div>

<div class="menu-item">
<button class="menu-btn">사회공헌</button>
<div class="sub-menu">
<a href="#csr">삶의 향기 동서문학상</a>
<a href="#csr">동서커피클래식</a>
<a href="#csr">동서식품 장학회</a>
</div>
</div>

<div class="menu-item">
<button class="menu-btn">고객센터</button>
<div class="sub-menu">
<a href="#">FAQ</a>
<a href="#">고객문의</a>
<a href="#">소비자중심경영</a>
<a href="#">고객불만 접수안내</a>
</div>
</div>
</nav>

<div class="search-area">
<button class="search-btn" id="searchOpen">
<img src="https://cdn-icons-png.flaticon.com/512/622/622669.png" alt="검색">
</button>

<div class="search-box" id="searchBox">
<input type="text" id="searchInput" placeholder="검색어를 입력하세요">
<button class="search-submit" id="searchSubmit">검색</button>
</div>
</div>

</div>
</header>

<section class="hero">
<div class="hero-text fade-up">
<div class="brand" id="brand">맥심 (Maxim)</div>
<div class="title" id="title">
지금 행복 하자,<br>
지금 행복 한잔
</div>
<div class="desc" id="desc">
일상 속 가장 따뜻한 커피의 순간
</div>
<a href="#products" class="hero-btn">제품 보러가기 →</a>
</div>
</section>

<section class="content-section products-section" id="products">
<div class="section-head reveal">
<span>Products</span>
<h2>삶에 향기를 더하는 새로운<br>동서식품의 제품들</h2>
</div>

<div class="product-grid">
<div class="product-card reveal">
<img src="https://www.dongsuh.co.kr/common/imageShow/FI_20150711153648003102" alt="맥심">
<strong>맥심</strong>
<p>맥심 모카골드<br>마일드 커피믹스</p>
<a href="#" class="more-btn">자세히 보기</a>
</div>

<div class="product-card reveal">
<img src="https://www.dongsuh.co.kr/common/imageShow/FI_20150711155849005002" alt="카누">
<strong>카누</strong>
<p>카누 마일드로스트<br>아메리카노</p>
<a href="#" class="more-btn">자세히 보기</a>
</div>

<div class="product-card reveal">
<img src="https://www.dongsuh.co.kr/common/imageShow/FI_20230214183315033402" alt="카누 바리스타">
<strong>카누 바리스타</strong>
<p>카누 바리스타<br>브리즈 크림 화이트</p>
<a href="#" class="more-btn">자세히 보기</a>
</div>

<div class="product-card reveal">
<img src="https://www.dongsuh.co.kr/common/imageShow/FI_202506161709370225" alt="맥심 티오피">
<strong>맥심 T.O.P</strong>
<p>맥심 티오피<br>마스터 라떼</p>
<a href="#" class="more-btn">자세히 보기</a>
</div>

<div class="product-card reveal">
<img src="https://www.dongsuh.co.kr/common/imageShow/FI_20150712171544010202" alt="포스트">
<strong>포스트</strong>
<p>콘푸라이트</p>
<a href="#" class="more-btn">자세히 보기</a>
</div>

<div class="product-card reveal">
<img src="https://www.dongsuh.co.kr/common/imageShow/FI_20150712171544013902" alt="오레오">
<strong>오레오</strong>
<p>오레오 화이트크림</p>
<a href="#" class="more-btn">자세히 보기</a>
</div>

<div class="product-card reveal">
<img src="https://www.dongsuh.co.kr/images/common/brand/img_brand_thumb_green.png" alt="동서 현미녹차">
<strong>동서 현미녹차</strong>
<p>동서 현미녹차</p>
<a href="#" class="more-btn">자세히 보기</a>
</div>

<div class="product-card reveal">
<img src="https://www.dongsuh.co.kr/common/imageShow/FI_20150720110816018002" alt="티오">
<strong>티오</strong>
<p>아이스 티오<br>복숭아</p>
<a href="#" class="more-btn">자세히 보기</a>
</div>
</div>
</section>

<section class="content-section brands-section" id="brands">
<div class="section-head reveal">
<span>Brands</span>
<h2>생활속에 향기와 건강을 더하는<br>동서식품 브랜드들</h2>
</div>

<div class="brand-logo-grid">
<div class="brand-logo-card reveal">
<img src="https://www.dongsuh.co.kr/common/imageShow/FI_20150711153648003102" alt="MAXIM">
<strong>MAXIM</strong>
</div>
<div class="brand-logo-card reveal">
<img src="https://www.dongsuh.co.kr/common/imageShow/FI_20150711155849005002" alt="KANU">
<strong>KANU</strong>
</div>
<div class="brand-logo-card reveal">
<img src="https://www.dongsuh.co.kr/common/imageShow/FI_20230214183315033402" alt="KANU BARISTA">
<strong>KANU BARISTA</strong>
</div>
<div class="brand-logo-card reveal">
<img src="https://www.dongsuh.co.kr/common/imageShow/FI_20150712171544010202" alt="POST">
<strong>POST</strong>
</div>
</div>
</section>

<section class="content-section csr-section" id="csr">
<div class="section-head reveal">
<span>사회공헌</span>
<h2>따뜻한 함께하는 사회를 위한<br>동서식품의 사회공헌 활동</h2>
</div>

<div class="csr-grid">
<div class="csr-card reveal">
<div class="csr-img"></div>
<div class="csr-content">
<h3>삶의 향기 동서문학상</h3>
<p>문화와 예술을 응원하며 더 따뜻한 사회를 만들어가는 대표 사회공헌 활동입니다.</p>
</div>
</div>

<div class="csr-card reveal">
<div class="csr-img"></div>
<div class="csr-content">
<h3>동서커피클래식</h3>
<p>커피와 음악이 함께하는 문화 나눔을 통해 일상 속 여유와 감동을 전합니다.</p>
</div>
</div>

<div class="csr-card reveal">
<div class="csr-img"></div>
<div class="csr-content">
<h3>동서식품 장학회</h3>
<p>미래 세대를 위한 교육 지원과 장학 사업으로 더 나은 내일을 준비합니다.</p>
</div>
</div>
</div>
</section>

<section class="content-section board-section" id="news">
<div class="section-head reveal">
<span>뉴스</span>
<h2>동서식품의 새로운 소식</h2>
</div>

<ul class="board-list reveal">
<li><a href="#">동서식품, 새로운 브랜드 캠페인 공개</a><span>2026.05.07</span></li>
<li><a href="#">맥심 모카골드 신규 패키지 출시</a><span>2026.05.01</span></li>
<li><a href="#">카누 바리스타 신제품 라인업 확대</a><span>2026.04.28</span></li>
<li><a href="#">동서식품 사회공헌 활동 소식</a><span>2026.04.20</span></li>
</ul>
</section>

<section class="content-section board-section cf-section" id="cf">
<div class="section-head reveal">
<span>TV CF</span>
<h2>동서식품의 브랜드 영상</h2>
</div>

<ul class="board-list reveal">
<li><a href="#">맥심 TV CF 바로가기</a><span>VIEW</span></li>
<li><a href="#">카누 TV CF 바로가기</a><span>VIEW</span></li>
<li><a href="#">카누 바리스타 TV CF 바로가기</a><span>VIEW</span></li>
<li><a href="#">포스트 TV CF 바로가기</a><span>VIEW</span></li>
</ul>
</section>

<footer class="footer">
<h2>동서식품</h2>
<p>서울특별시 마포구 독막로 324</p>
<p>COPYRIGHT © DONGSUH FOODS. ALL RIGHTS RESERVED.</p>
</footer>

<script>
const video = document.querySelector('.bg-video');
const brand = document.getElementById('brand');
const title = document.getElementById('title');
const desc = document.getElementById('desc');
const heroText = document.querySelector('.hero-text');
const header = document.getElementById('header');
const hamburger = document.getElementById('hamburger');
const menu = document.getElementById('menu');

const contents = [
{
video:'https://www.dongsuh.co.kr/lib/videos/hero_main_maxim.mp4',
brand:'맥심 (Maxim)',
title:'지금 행복 하자,<br>지금 행복 한잔',
desc:'일상 속 가장 따뜻한 커피의 순간'
},
{
video:'https://www.dongsuh.co.kr/lib/videos/hero_main_kanu_barista.mp4',
brand:'카누 (Kanu)',
title:'아이스 아메리카노가<br>맛있는 캡슐',
desc:'깊고 부드러운 커피의 새로운 기준'
},
{
video:'https://www.dongsuh.co.kr/lib/videos/hero_main_post.mp4',
brand:'포스트 (Post)',
title:'새로운 세 겹<br>바삭한 레시피',
desc:'더 맛있고 바삭한 시리얼의 즐거움'
}
];

let current = 0;

function changeContent(index){
heroText.style.opacity = 0;

setTimeout(function(){
video.src = contents[index].video;
brand.innerHTML = contents[index].brand;
title.innerHTML = contents[index].title;
desc.innerHTML = contents[index].desc;

heroText.classList.remove('fade-up');
void heroText.offsetWidth;
heroText.classList.add('fade-up');

heroText.style.opacity = 1;
video.play();
},300);
}

changeContent(current);

video.addEventListener('ended', function(){
current++;
if(current >= contents.length){
current = 0;
}
changeContent(current);
});

window.addEventListener('scroll', function(){
if(window.scrollY > 50){
header.classList.add('scrolled');
}else{
header.classList.remove('scrolled');
}

revealElements();
});

hamburger.addEventListener('click', function(){
menu.classList.toggle('active');

if(menu.classList.contains('active')){
hamburger.innerHTML = '×';
}else{
hamburger.innerHTML = '☰';
}
});

const menuBtns = document.querySelectorAll('.menu-btn');

menuBtns.forEach(function(btn){
btn.addEventListener('click', function(){
const subMenu = this.nextElementSibling;

document.querySelectorAll('.sub-menu').forEach(function(menu){
if(menu !== subMenu){
menu.classList.remove('active');
}
});

subMenu.classList.toggle('active');
});
});

document.addEventListener('click', function(e){
if(!e.target.closest('.menu') && !e.target.closest('.hamburger')){
document.querySelectorAll('.sub-menu').forEach(function(menu){
menu.classList.remove('active');
});
}
});

document.querySelectorAll('.menu a').forEach(function(link){
link.addEventListener('click', function(){
menu.classList.remove('active');
hamburger.innerHTML = '☰';
});
});

const searchOpen = document.getElementById('searchOpen');
const searchBox = document.getElementById('searchBox');
const searchSubmit = document.getElementById('searchSubmit');
const searchInput = document.getElementById('searchInput');

searchOpen.addEventListener('click', function(){
searchBox.classList.toggle('active');

if(searchBox.classList.contains('active')){
searchInput.focus();
}
});

searchSubmit.addEventListener('click', function(){
const keyword = searchInput.value.trim();

if(keyword === ''){
alert('검색어를 입력하세요.');
return;
}

alert(keyword + ' 검색');
});

searchInput.addEventListener('keydown', function(e){
if(e.key === 'Enter'){
searchSubmit.click();
}
});

function revealElements(){
const reveals = document.querySelectorAll('.reveal');

reveals.forEach(function(el){
const top = el.getBoundingClientRect().top;

if(top < window.innerHeight - 100){
el.classList.add('active');
}
});
}

revealElements();
</script>

</body>
</html>
#동서식품 클링

첨부 파일

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

댓글 / 답글

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