알아두자 HTML, CSS
[HTML/CSS][Ch9][스타벅스] 최종
써치킴
2022. 1. 21. 14:25
파일 위치
index.html
<!DOCTYPE html>
<html lang="kor">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>startbucks Coffee Korea</title>
<!-- 오픈그래프 -->
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Starbucks" />
<meta property="og:title" content="Starbucks Coffee Korea" />
<meta property="og:description" content="스타벅스는 세계에서 가장 큰 다국적 커피 전문점으로, 64개국에서 총 23,187개의 매점을 운영하고 있습니다." />
<meta property="og:image" content="./images/starbucks_seo.jpg" />
<meta property="og:url" content="https://starbucks.co.kr" />
<!-- 트위터카트 -->
<meta property="twitter:card" content="summary" />
<meta property="twitter:site" content="Starbucks" />
<meta property="twitter:title" content="Starbucks Coffee Korea" />
<meta property="twitter:description" content="스타벅스는 세계에서 가장 큰 다국적 커피 전문점으로, 64개국에서 총 23,187개의 매점을 운영하고 있습니다." />
<meta property="twitter:image" content="./images/starbucks_seo.jpg" />
<meta property="twitter:url" content="https://starbucks.co.kr" />
<!-- 파비콘 -->
<link rel="icon" href="./favicon.png">
<!-- 브라우저 스타일 초기화 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<!-- 폰트 태그 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700&display=swap" rel="stylesheet">
<!-- google meterial icons 추가 -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- css 연결 -->
<link rel="stylesheet" href="./css/main.css">
<!-- js 연결 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js" integrity="sha512-H6cPm97FAsgIKmlBA4s774vqoN24V5gSQL4yBTDOY2su2DeXZVhQPxFK4P6GPdnZqM9fg1G3cMv5wD7e6cFLZQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- ScrollToPlugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollToPlugin.min.js" integrity="sha512-agNfXmEo6F+qcj3WGryaRvl9X9wLMQORbTt5ACS9YVqzKDMzhRxY+xjgO45HCLm61OwHWR1Oblp4QSw/SGh9SA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- SWIPER -->
<link rel="stylesheet" href="https://unpkg.com/swiper@6.8.4/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper@6.8.4/swiper-bundle.min.js"></script>
<!-- ScollMagic -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js" integrity="sha512-8E3KZoPoZCD+1dgfqhPbejQBnQfBXe8FuwL4z/c8sTrgeDMFEnoyTlH3obB4/fV+6Sg0a0XF+L/6xS4Xx1fUEg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="./js/youtube.js"></script>
<script defer src="./js/main.js"></script>
</head>
<body>
<!-- HEADER -->
<header>
<div class="inner">
<a href="/" class="logo">
<img src="./images/starbucks_logo.png" alt="STARBUCKS">
</a>
<div class="sub-menu">
<ul class="menu">
<li>
<a href="/signin">Sign In</a>
</li>
<li>
<a href="javascript:void(0)">My Starbucks</a>
</li>
<li>
<a href="javascript:void(0)">Customer Service & Ideas</a>
</li>
<li>
<a href="javascript:void(0)">Find a Store</a>
</li>
</ul>
<div class="search">
<input type="text">
<div class="material-icons">search</div>
</div>
</div>
<ul class="main-menu">
<li class="item">
<div class="item__name">COFFEE</div>
<div class="item__contents">
<div class="contents__menu">
<ul class="inner">
<li>
<h4>커피</h4>
<ul>
<li>스타벅스 원두</li>
<li>스타벅스 비아</li>
<li>스타벅스 오리가미</li>
</ul>
</li>
<li>
<h4>에스프레소 음료</h4>
<ul>
<li>도피오</li>
<li>에스프레소 마키아또</li>
<li>아메리카노</li>
<li>마키아또</li>
<li>카푸치노</li>
<li>라떼</li>
<li>모카</li>
<li>리스트레또 비안코</li>
</ul>
</li>
<li>
<h4>커피 이야기</h4>
<ul>
<li>스타벅스 로스트 스팩트럼</li>
<li>최상의 아라비카 원두</li>
<li>한 잔의 커피가 완성되기까지</li>
<li>클로버® 커피 추출 시스템</li>
</ul>
</li>
<li>
<h4>최상의 커피를 즐기는 법</h4>
<ul>
<li>커피 프레스</li>
<li>푸어 오버</li>
<li>아이스 푸어 오버</li>
<li>커피 메이커</li>
<li>리저브를 매장에서 다양하게 즐기는 법</li>
</ul>
</li>
</ul>
</div>
<div class="contents__texture">
<div class="inner">
<h4>나와 어울리는 커피 찾기</h4>
<p>스타벅스가 여러분에게 어울리는 커피를 찾아드립니다.</p>
<h4>최상의 커피를 즐기는 법</h4>
<p>여러가지 방법을 통해 다양한 풍미의 커피를 즐겨보세요.</p>
</div>
</div>
</div>
</li>
<li class="item">
<div class="item__name">MENU</div>
<div class="item__contents">
<div class="contents__menu">
<ul class="inner">
<li>
<h4>음료</h4>
<ul>
<li>콜드 브루</li>
<li>브루드 커피</li>
<li>에스프레소</li>
<li>프라푸치노</li>
<li>블렌디드 음료</li>
<li>스타벅스 피지오</li>
<li>티(티바나)</li>
<li>기타 제조 음료</li>
<li>스타벅스 주스(병음료)</li>
</ul>
</li>
<li>
<h4>푸드</h4>
<ul>
<li>베이커리</li>
<li>케익</li>
<li>샌드위치 & 샐러드</li>
<li>따뜻한 푸드</li>
<li>과일 & 요거트</li>
<li>스낵 & 미니 디저트</li>
<li>아이스크림</li>
</ul>
</li>
<li>
<h4>상품</h4>
<ul>
<li>머그</li>
<li>글라스</li>
<li>플라스틱 텀블러</li>
<li>스테인리스 텀블러</li>
<li>보온병</li>
<li>액세서리</li>
<li>커피 용품</li>
<li>패키지 티(티바나)</li>
</ul>
</li>
<li>
<h4>카드</h4>
<ul>
<li>실물카드</li>
<li>e-Gift 카드</li>
</ul>
</li>
<li>
<h4>메뉴 이야기</h4>
<ul>
<li>콜드 브루</li>
<li>스타벅스 티바나</li>
</ul>
</li>
</ul>
</div>
<div class="contents__texture">
<div class="inner">
<h4 class="new">스타벅스 티바나</h4>
<p>다양한 찻잎과 향신료 등 개성있는 재료로 새로운 맛과 향의 티를 선보입니다.</p>
</div>
</div>
</div>
</li>
<li class="item">
<div class="item__name">STORE</div>
<div class="item__contents">
<div class="contents__menu">
<ul class="inner">
<li>
<h4>매장 찾기</h4>
<ul>
<li>퀵 검색</li>
<li>지역 검색</li>
<li>My 매장</li>
</ul>
</li>
<li>
<h4>매장 이야기</h4>
<ul>
<li>청담스타</li>
<li>티바나 인스파이어드 매장</li>
<li>파미에파크</li>
</ul>
</li>
</ul>
</div>
<div class="contents__texture">
<div class="inner">
<h4>매장 찾기</h4>
<p>보다 빠르게 매장을 찾아보세요.</p>
<h4 class="new">청담스타</h4>
<p>스타벅스 1,000호점인 청담스타점을 만나보세요.</p>
</div>
</div>
</div>
</li>
<li class="item">
<div class="item__name">RESPONSIBILITY</div>
<div class="item__contents">
<div class="contents__menu">
<ul class="inner">
<li>
<h4>지역 사회 참여 활동</h4>
<ul>
<li>회망배달 캠페인</li>
<li>재능기부 카페 소식</li>
<li>커뮤니티 스토어</li>
<li>청년인재 양성</li>
<li>우리 농산물 사랑 캠페인</li>
<li>우리 문화 지키기</li>
</ul>
</li>
<li>
<h4>환경보호 활동</h4>
<ul>
<li>환경 발자국 줄이기</li>
<li>일회용 컵 없는 매장</li>
<li>커피 원두 재활용</li>
</ul>
</li>
<li>
<h4>윤리 구매</h4>
<ul>
<li>윤리적 원두 구매</li>
<li>공정무역 인증</li>
<li>커피 농가 지원 활동</li>
</ul>
</li>
<li>
<h4>글로벌 사회 공헌</h4>
<ul>
<li>윤리경영 보고서</li>
<li>스타벅스 재단</li>
<li>지구촌 봉사의 달</li>
</ul>
</li>
</ul>
</div>
<div class="contents__texture">
<div class="inner">
<h4>커피원두 재활용</h4>
<p>스타벅스 커피 원두를 재활용 해보세요.</p>
</div>
</div>
</div>
</li>
<li class="item">
<div class="item__name">MY STARBUCKS REWARDS</div>
<div class="item__contents">
<div class="contents__menu">
<ul class="inner">
<li>
<h4>마이 스타벅스 리워드</h4>
<ul>
<li>마이 스타벅스 리워드 소개</li>
<li>등급 및 혜택</li>
<li>스타벅스 별</li>
<li>자주하는 질문</li>
</ul>
</li>
<li>
<h4>스타벅스 카드</h4>
<ul>
<li>스타벅스 카드 소개</li>
<li>스타벅스 카드 갤러리</li>
<li>등록 및 조회</li>
<li>충전 및 이용안내</li>
<li>분실신고/환불신청</li>
<li>자주하는 질문</li>
</ul>
</li>
<li>
<h4>스타벅스 카드 e-Gift</h4>
<ul>
<li>스타벅스 카드 e-Gift 소개</li>
<li>이용안내</li>
<li>선물하기</li>
<li>자주하는 질문</li>
</ul>
</li>
</ul>
</div>
<div class="contents__texture">
<div class="inner">
<h4>스타벅스 카드 등록하기</h4>
<p>카드 등록 후 리워드 서비스를 누리고 사용내역도 조회해보세요.</p>
</div>
</div>
</div>
</li>
<li class="item">
<div class="item__name">WHAT'S NEW</div>
<div class="item__contents">
<div class="contents__menu">
<ul class="inner">
<li>
<h4>프로모션 & 이벤트</h4>
<ul>
<li>전체</li>
<li>스타벅스 카드</li>
<li>마이 스타벅스 리워드</li>
<li>온라인</li>
<li>2017 스타벅스 플래너</li>
</ul>
</li>
<li>
<h4>새소식</h4>
<ul>
<li>전체</li>
<li>상품 출시</li>
<li>스타벅스의 문화</li>
<li>스타벅스 사회공헌</li>
<li>스타벅스 카드출시</li>
</ul>
</li>
<li>
<h4>매장별 이벤트</h4>
<ul>
<li>일반 매장</li>
<li>신규 매장</li>
</ul>
</li>
</ul>
</div>
<div class="contents__texture">
<div class="inner">
<h4>매장별 이벤트</h4>
<p>스타벅스의 매장 이벤트 정보를 확인 하실 수 있습니다.</p>
<h4>소셜 스타벅스</h4>
<p>다양한 스타벅스 SNS 채널을 통해 스타벅스를 만나보세요!</p>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="badges">
<div class="badge">
<img src="./images/badge1.jpg" alt="Badge" />
</div>
<div class="badge">
<img src="./images/badge2.jpg" alt="Badge" />
</div>
</div>
</header>
<!-- section : 기능적으로 특별하게 동작하진 않으나 명시적으로 섹션을 나누기 위해 사용 -->
<!--VISUAL-->
<section class="visual">
<div class="inner">
<div class="title fade-in">
<img src="./images/visual_title.png" alt="STARBUCKS DELIGHTFUL START TO THE YEARS" />
<a href="javascript:void(0)" class="btn btn--brown">자세히 보기</a>
</div>
<div class="fade-in">
<img src="./images/visual_cup1.png" alt="new OATMEAL LATTE" class="cup1 image" />
<img src="./images/visual_cup1_text.png" alt="오트밀 라떼" class="cup1 text" />
</div>
<div class="fade-in">
<img src="./images/visual_cup2.png" alt="new STARBUCKS CARAMEL CRUMBLE MOCHA" class="cup2 image" />
<img src="./images/visual_cup2_text.png" alt="스타벅스 카라멜 크럼블 모카" class="cup2 text" />
</div>
<div class="fade-in">
<img src="./images/visual_spoon.png" alt="Spoon" class="spoon" />
</div>
</div>
</section>
<!-- NOTICE -->
<section class="notice">
<div class="notice-line">
<div class="bg-left"></div>
<div class="bg-right"></div>
<div class="inner">
<div class="inner__left">
<h2>공지사항</h2>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="javascript:void(0)">크리스마스 & 연말연시 스타벅스 매장 영업시간 변경 안내</a>
</div>
<div class="swiper-slide">
<a href="javascript:void(0)">[당첨자 발표] 2021 스타벅스 플래너 영수증 이벤트</a>
</div>
<div class="swiper-slide">
<a href="javascript:void(0)">스타벅스커피 코리아 애플리케이션 버전 업데이트 안내</a>
</div>
<div class="swiper-slide">
<a href="javascript:void(0)">[당첨자 발표] 뉴이어 전자영수증 이벤트</a>
</div>
</div>
</div>
<a href="javascript:void(0)" class="notice-line__more">
<span class="material-icons">add_circle</span>
</a>
</div>
<div class="inner__right">
<h2>스타벅스 프로모션</h2>
<div class="toggle-promotion open">
<div class="material-icons">upload</div>
</div>
</div>
</div>
</div>
<div class="promotion">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./images/promotion_slide1.jpg" alt="2021 뉴이어, 스타벅스와 함께 즐겁고 활기차게 시작하세요!" />
<a href="javascript:void(0)" class="btn">자세히 보기</a>
</div>
<div class="swiper-slide">
<img src="./images/promotion_slide2.jpg" alt="기간 내 스타벅스 카드 e-Gift를 3만원 이상 선물 시, 아메리카노 e-쿠폰을 드립니다." />
<a href="javascript:void(0)" class="btn">자세히 보기</a>
</div>
<div class="swiper-slide">
<img src="./images/promotion_slide3.jpg" alt="뉴이어 푸드와 제조 음료를 세트로 구매 시, 뉴이어 음료 BOGO(1+1) 쿠폰을 드립니다." />
<a href="javascript:void(0)" class="btn">자세히 보기</a>
</div>
<div class="swiper-slide">
<img src="./images/promotion_slide4.jpg" alt="신년 MD 상품 포함 3만원 이상 구매 고객께 아메리카노(톨사이즈) 쿠폰을 드립니다." />
<a href="javascript:void(0)" class="btn">자세히 보기</a>
</div>
<div class="swiper-slide">
<img src="./images/promotion_slide5.jpg" alt="2017 DIGITAL LUCKY DRAW 100% 당첨의 행운을 드립니다!" />
<a href="javascript:void(0)" class="btn">자세히 보기</a>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-prev">
<span class="material-icons">arrow_back</span>
</div>
<div class="swiper-next">
<span class="material-icons">arrow_forward</span>
</div>
</div>
</section>
<!--REWARDS-->
<section class="rewards">
<div class="bg-left"></div>
<div class="bg-right"></div>
<div class="inner">
<div class="btn-group">
<div class="btn btn--reverse sign-up">회원가입</div>
<div class="btn sign-in">로그인</div>
<div class="btn gift">e-Gift 선물하기</div>
</div>
</div>
</section>
<!--YOUTUBE VIDEO-->
<section class="youtube">
<div class="youtube__area">
<div id="player"></div>
</div>
<div class="youtube__cover"></div>
<div class="inner">
<img src="./images/floating1.png" alt="Icon" class="floating floating1" />
<img src="./images/floating2.png" alt="Icon" class="floating floating2" />
<img src="./images/floating3.png" alt="Icon" class="floating floating3" />
</div>
</section>
<!--SEASON PRODUCT-->
<section class="season-product scroll-spy">
<div class="inner">
<img src="./images/floating3.png" alt="Icon" class="floating floating3" />
<img src="./images/season_product_image.png" alt="아이스 커피 블렌드" class="product back-to-position to-right delay-0" />
<div class="text-group">
<img src="./images/season_product_text1.png" alt="상쾌하게 여름을 반겨줄 시즌 원두 아이스 커피 블렌드" class="title back-to-position to-left delay-1" />
<img src="./images/season_product_text2.png" alt="아프리카와 라틴 아메리카 커피의 브렌드로 시트러스함과 은은한 캐러멜 향을 동시에 느낄 수 있으며, 차갑게 즐길 때 풍미가 더욱 깊어지는 원두입니다." class="description back-to-position to-left delay-2" />
<div class="more back-to-position to-left delay-3">
<a href="javascript:void(0)" class="btn">자세히 보기</a>
</div>
</div>
</div>
</section>
<!--RESERVE COFFEE-->
<section class="reserve-coffee scroll-spy">
<div class="inner">
<img src="./images/reserve_logo.png" alt="" class="reserve-logo back-to-position to-right delay-0" />
<div class="text-group">
<img src="./images/reserve_text.png" alt="" class="description back-to-position to-right delay-1" />
<div class="more back-to-position to-right delay-2">
<a href="javascript:void(0)" class="btn btn--gold">자세히 보기</a>
</div>
</div>
<img src="./images/reserve_image.png" alt="" class="product back-to-position to-left delay-3" />
</div>
</section>
<!--PICK YOUR FAVORITE-->
<section class="pick-your-favorite scroll-spy">
<div class="inner">
<div class="text-group">
<img src="./images/favorite_text1.png" alt="PICK YOUR FAVORITE" class="title back-to-position to-right delay-0" />
<img src="./images/favorite_text2.png" alt="다양한 메뉴를 스타벅스에서 즐겨보세요." class="description back-to-position to-right delay-1" />
<div class="more back-to-position to-right delay-2">
<a href="javascript:void(0)" class="btn btn--white">자세히 보기</a>
</div>
</div>
</div>
</section>
<!--RESERVE STORE-->
<section class="reserve-store">
<div class="inner">
<div class="medal">
<div class="front">
<img src="./images/reserve_store_medal_front.png" alt="R">
</div>
<div class="back">
<img src="./images/reserve_store_medal_back.png" alt="스타벅스 리저브 매장">
<a href="javascript:void(0)" class="btn">
매장안내
</a>
</div>
</div>
</div>
</section>
<!--FIND THE STORE-->
<section class="find-store scroll-spy">
<div class="inner">
<img src="./images/find_store_texture1.png" alt="" class="texture1" />
<img src="./images/find_store_texture2.png" alt="" class="texture2" />
<img src="./images/find_store_picture1.jpg" alt="" class="picture picture1 back-to-position to-right delay-0" />
<img src="./images/find_store_picture2.jpg" alt="" class="picture picture2 back-to-position to-right delay-1" />
<div class="text-group">
<img src="./images/find_store_text1.png" alt="스타벅스를 가까이에서 경험해보세요." class="title back-to-position to-left delay-0" />
<img src="./images/find_store_text2.png" alt="고객님과 가장 가까이 있는 매장을 찾아보세요!" class="description back-to-position to-left delay-1" />
<div class="more back-to-position to-left delay-2">
<a href="javascript:void(0)" class="btn">매장찾기</a>
</div>
</div>
</div>
</section>
<!--AWARDS-->
<section class="awards">
<div class="inner">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./images/awards_slide1.jpg" alt="대통령 표창" />
</div>
<div class="swiper-slide">
<img src="./images/awards_slide2.jpg" alt="대통령 표창 (3년 연속)" />
</div>
<div class="swiper-slide">
<img src="./images/awards_slide3.jpg" alt="우수사업주 인증" />
</div>
<div class="swiper-slide">
<img src="./images/awards_slide4.jpg" alt="경연대회 대상" />
</div>
<div class="swiper-slide">
<img src="./images/awards_slide5.jpg" alt="대한상의회장상" />
</div>
<div class="swiper-slide">
<img src="./images/awards_slide6.jpg" alt="기업사회공헌 활동 부문" />
</div>
<div class="swiper-slide">
<img src="./images/awards_slide7.jpg" alt="KSI 1위 (5년 연속)" />
</div>
<div class="swiper-slide">
<img src="./images/awards_slide8.jpg" alt="KS-SQI 1위 (5년 연속)" />
</div>
<div class="swiper-slide">
<img src="./images/awards_slide9.jpg" alt="커피전문점 부문 (4년 연속)" />
</div>
<div class="swiper-slide">
<img src="./images/awards_slide10.jpg" alt="동반성장 부문 (4년 연속)" />
</div>
</div>
</div>
<div class="swiper-prev">
<span class="material-icons">arrow_back</span>
</div>
<div class="swiper-next">
<span class="material-icons">arrow_forward</span>
</div>
</div>
</section>
<!--FOOTER-->
<footer>
<div class="inner">
<ul class="menu">
<li><a href="javascript:void(0)" class="green">개인정보처리방침</a></li>
<li><a href="javascript:void(0)">영상정보처리기기 운영관리 방침</a></li>
<li><a href="javascript:void(0)">홈페이지 이용약관</a></li>
<li><a href="javascript:void(0)">위치정보 이용약관</a></li>
<li><a href="javascript:void(0)">스타벅스 카드 이용약관</a></li>
<li><a href="javascript:void(0)">윤리경영 핫라인</a></li>
</ul>
<div class="btn-group">
<a href="javascript:void(0)" class="btn btn--white">찾아오시는 길</a>
<a href="javascript:void(0)" class="btn btn--white">신규입점제의</a>
<a href="javascript:void(0)" class="btn btn--white">사이트 맵</a>
</div>
<div class="info">
<span>사업자등록번호 201-81-21515</span>
<span>(주)스타벅스 코리아 대표이사 이석구</span>
<span>TEL : 02) 3015-1100 / FAX : 02) 3015-1106</span>
<span>개인정보 책임자 : 강기원</span>
</div>
<p class="copyright">
© <span class="this-year"></span> Starbucks Coffee Company. All Rights Reserved.
</p>
<img src="./images/starbucks_logo_only_text.png" alt="STAR BUCKS" class="logo" />
</div>
</footer>
<!--TO TOP BUTTON-->
<div id="to-top">
<div class="material-icons">arrow_upward</div>
</div>
</body>
</html>main.css
/* COMMON */
body{
color: #333;
font-size: 16px;
font-weight: 400;
line-height: 1.4;
font-family: 'Nanum Gothic', sans-serif;
height: 3000px;
}
/* 이미지는 하나의 블록(상자)처럼 취급됨 */
img {
display: block;
}
/* a 태그는 선 사용 X */
a {
text-decoration: none;
}
/* INNER */
.inner {
width: 1100px;
margin: 0 auto;
position: relative; /* 자신 기준 */
}
/* BUTTON */
.btn {
width: 130px;
padding: 10px;
border: 2px solid #333;
border-radius: 4px;
color: #333;
font-size: 16px;
font-weight: 700;
text-align: center;
cursor: pointer;
box-sizing: border-box;
display: block;
transition: .4s;
}
.btn:hover {
background-color: #333;
color: #FFF;
}
.btn.btn--reverse {
background-color: #333;
color: #FFF;
}
.btn.btn--reverse:hover {
background-color: transparent;
color: #333;
}
.btn.btn--brown {
color: #592B18;
border-color: #592B18;
}
.btn.btn--brown:hover {
color: #FFF;
background-color: #592B18;
}
.btn.btn--gold {
color: #D9AA8A;
border-color: #D9AA8A;
}
.btn.btn--gold:hover {
color: #FFF;
background-color: #D9AA8A;
}
.btn.btn--white {
color: #FFF;
border-color: #FFF;
}
.btn.btn--white:hover {
color: #333;
background-color: #FFF;
}
/*BACK TO POSITION*/
.back-to-position {
opacity: 0;
transition: 1s;
}
.back-to-position.to-right { /* 일치선택자(둘다 해당) */
transform: translateX(-150px); /* X축으로 -150px 이동 */
}
.back-to-position.to-left {
transform: translateX(150px); /* X축으로 150px 이동 */
}
.show .back-to-position {
opacity: 1;
transform: translateX(0);
}
.show .back-to-position.delay-0 {
transition-delay: 0s;
}
.show .back-to-position.delay-1 {
transition-delay: .3s;
}
.show .back-to-position.delay-2 {
transition-delay: .6s;
}
.show .back-to-position.delay-3 {
transition-delay: .9s;
}
/* HEADER */
header {
width: 100%;
background-color: #f6f5f0;
border-bottom: 1px solid #c8c8c8;
position: fixed;
top: 0;
z-index: 9;
}
header > .inner {
height: 120px;
}
header .logo {
height: 75px;
position: absolute; /* 부모 기준 */
top: 0 ;
bottom: 0;
left: 0;
margin: auto;
}
header .sub-menu {
position: absolute;
top: 10px;
right: 0;
display: flex;
}
header .sub-menu ul.menu {
font-family: Arial, sans-serif; /* Arial가 있으면 적용, 없으면 sans-serif 적용 */
display: flex; /* 수직 -> 수평으로 변경 */
}
header .sub-menu ul.menu li {
position: relative;
}
/* 가상요소 선택자(구분선 만들기) */
header .sub-menu ul.menu li::before {
content: "";
width: 1px;
height: 12px;
background-color: #e5e5e5;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
/* 제일 왼쪽 구분선 display : none 처리 */
header .sub-menu ul.menu li:first-child:before {
display: none;
}
/* a 태그가 인라인 요소이기 때문에 display: block을 추가해서 블록요소로 사용 */
header .sub-menu ul.menu li a {
font-size: 12px;
padding: 11px 16px;
display: block;
color: #656565;
}
/* 서브 메뉴에 마우스 올리면 검정색으로 변경됨 */
header .sub-menu ul.menu li a:hover {
color: #000;
}
/* 검색 부분 */
header .sub-menu .search {
height: 34px;
position: relative;
}
header .sub-menu .search input {
width: 36px;
height: 34px;
padding: 4px 10px;
border: 1px solid #ccc;
box-sizing: border-box;
border-radius: 5px;
outline: none;
background-color: #fff;
color: #777;
font-size: 12px;
transition: width .4s; /* 가로길이 0.4초동안 전환효과 */
}
header .sub-menu .search input:focus {
width: 190px;
border-color: #669900;
}
header .sub-menu .search .material-icons {
height: 24px;
position: absolute;
top: 0;
bottom: 0;
right: 5px;
margin: auto;
transition: .4s;
}
header .sub-menu .search.focused .material-icons {
opacity : 0;
}
header .main-menu {
display: flex;
position: absolute;
bottom: 0;
right: 0;
z-index: 1;
}
header .main-menu .item {
}
header .main-menu .item .item__name {
padding: 10px 20px 34px 20px;
font-family: Arial, sans-serif;
font-size: 13px;
}
header .main-menu .item:hover .item__name {
background-color: #2c2a29;
color: #669900;
border-radius: 6px 6px 0 0;
}
header .main-menu .item .item__contents {
width: 100%;
position: fixed; /* 뷰포트를 기준으로 함 */
left: 0;
display: none;
}
header .main-menu .item:hover .item__contents {
display: block;
}
header .main-menu .item .item__contents .contents__menu {
background-color: #2C2A29;
}
header .main-menu .item .item__contents .contents__menu > ul {
display: flex;
padding: 20px 0;
}
header .main-menu .item .item__contents .contents__menu > ul > li{
width: 220px;
}
header .main-menu .item .item__contents .contents__menu > ul > li h4{
padding: 3px 0 12px 0;
font-size: 14px;
color: #fff;
}
header .main-menu .item .item__contents .contents__menu > ul > li ul li{
padding: 5px 0;
font-size: 12px;
color: #999;
cursor: pointer;
}
header .main-menu .item .item__contents .contents__menu > ul > li ul li:hover {
color: #669900;
}
header .main-menu .item .item__contents .contents__texture {
font-size: 12px;
padding: 26px 0;
background-image: url("../images/main_menu_pattern.jpg");
}
header .main-menu .item .item__contents .contents__texture h4 {
color: #999;
font-weight: 700;
}
header .main-menu .item .item__contents .contents__texture p {
color: #669900;
margin: 4px 0 14px;
}
header .badges {
position: absolute;
top: 132px;
right: 12px;
}
header .badges .badge {
border-radius: 10px;
overflow: hidden;
margin-bottom: 12px;
box-shadow: 4px 4px 10px rgba(0, 0, 0, .15);
cursor: pointer;
}
/* VISUAL */
.visual {
margin-top: 120px;
background-image: url(../images/visual_bg.jpg);
background-position: center;
}
.visual .inner {
height: 646px;
}
.visual .title {
position: absolute;
top: 88px;
left: -10px;
}
.visual .title .btn {
position: absolute;
top: 259px;
left: 173px;
}
.visual .cup1.image {
position: absolute;
bottom: 0;
right: -47px;
}
.visual .cup1.text {
position: absolute;
top: 38px;
right: 171px;
}
.visual .cup2.image {
position: absolute;
bottom: 0;
right: 162px;
}
.visual .cup2.text {
position: absolute;
top: 321px;
right: 416px;
}
.visual .spoon {
position: absolute;
bottom: 0;
left: 275px;
}
.visual .fade-in {
opacity: 0;
}
/* NOTICE */
.notice {
}
.notice .notice-line {
position: relative;
}
.notice .notice-line .bg-left {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: #333;
}
.notice .notice-line .bg-right {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background-color: #f6f5ef;
}
.notice .notice-line .inner {
height: 62px;
display: flex;
}
.notice .notice-line .inner__left {
width: 60%;
height: 100%;
background-color: #333;
display: flex;
align-items: center;
}
.notice .notice-line .inner__left h2 {
color: #fff;
font-size: 17px;
font-weight: 700;
margin-right: 20px;
}
.notice .notice-line .inner__left .swiper-container {
height: 62px;
flex-grow: 1;
}
.notice .notice-line .inner__left .swiper-slide {
height: 62px;
display: flex;
align-items: center;
}
.notice .notice-line .inner__left .swiper-slide a {
color: #fff;
}
.notice .notice-line .inner__left .notice-line__more {
width: 62px;
height: 62px;
display: flex;
justify-content: center;
align-items: center;
}
.notice .notice-line .inner__left .notice-line__more .material-icons {
color: #fff;
font-size: 30px;
}
.notice .notice-line .inner__right {
width: 40%;
height: 100%;
display: flex;
justify-content: flex-end; /* 수평의 제일 끝으로(오른쪽 정렬) */
align-items: center;
}
.notice .notice-line .inner__right h2 {
font-size: 17px;
font-weight: 700;
}
.notice .notice-line .inner__right .toggle-promotion {
width: 62px;
height: 62px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.notice .notice-line .inner__right .toggle-promotion .material-icons {
font-size: 30px;
}
/*PROMOTION*/
.notice .promotion {
/*width: auto;*/
height: 693px;
background-color: #f6f5ef;
position: relative;
transition: .4s;
overflow: hidden;
}
.notice .promotion.hide {
height: 0;
}
.notice .promotion .swiper-container {
/* calc 함수를 이용해 단위 계산 : 819px 슬라이드 3개와 그 사이 여백 10px씩(20px) = 2477px */
width: calc(819px * 3 + 20px);
height: 553px;
position: absolute;
top: 40px;
left: 50%;
margin-left: calc((819px * 3 + 20px) / -2);
}
.notice .promotion .swiper-slide {
position: relative;
opacity: .5;
transition: opacity 1s;
}
.notice .promotion .swiper-slide-active {
opacity: 1;
}
.notice .promotion .swiper-slide .btn {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto; /* 가운데 배치 */
}
.notice .promotion .swiper-pagination {
bottom: 40px;
left: 0;
right: 0;
}
.notice .promotion .swiper-pagination .swiper-pagination-bullet {
background-color: transparent; /* 배경색을 투명색으로 사용 > 배경색을 사용하지 않겠다. */
background-image: url("../images/promotion_slide_pager.png");
width: 13px;
height: 13px;
margin-right: 6px;
outline: none;
}
.notice .promotion .swiper-pagination .swiper-pagination-bullet:last-child {
margin-right: 0;
}
.notice .promotion .swiper-pagination .swiper-pagination-bullet-active {
background-image: url("../images/promotion_slide_pager_on.png");
}
.notice .promotion .swiper-prev,
.notice .promotion .swiper-next {
width: 42px;
height: 42px;
border: 2px solid #333;
border-radius: 50%;
position: absolute;
outline: none;
/* Swiper Container 높이의 절반만큼 끌어올림 */
/* 버튼 높이의 절반만큼 추가로 끌어올림 */
top: 300px;
z-index: 1;
cursor: pointer;
display: flex;
justify-content: center; /* 수평 가운데 */
align-items: center;
transition: .4s;
}
.notice .promotion .swiper-prev {
left: 50%;
margin-left: -480px;
}
.notice .promotion .swiper-next {
right: 50%;
margin-right: -480px;
}
.notice .promotion .swiper-prev:hover,
.notice .promotion .swiper-next:hover {
background-color: #333;
color: #fff;
}
/*REWARDS*/
.rewards {
position: relative;
}
.rewards .bg-left {
width: 50%;
height: 100%;
background-color: #272727;
position: absolute;
top: 0;
left: 0;
}
.rewards .bg-right {
width: 50%;
height: 100%;
background-color: #d5c798;
position: absolute;
top: 0;
right: 0;
}
.rewards .inner {
background-image: url("../images/rewards.jpg");
height: 241px;
}
.rewards .btn-group {
position: absolute;
bottom: 24px;
right: 0;
width: 250px;
display: flex;
flex-wrap: wrap;
}
.rewards .btn-group .btn.sign-up {
margin-right: 10px;
}
.rewards .btn-group .btn.sign-in {
width: 110px;
}
.rewards .btn-group .btn.gift {
margin-top: 10px;
flex: 1; /* 최대한의 넓이를 쓸수 있도록 늘어나라 */
}
/*YOUTUBE VIDEO*/
.youtube {
position: relative;
height: 700px;
background-color: #333;
overflow: hidden;
}
.youtube .youtube__area {
width: 1920px;
position: absolute;
/* 16비율 */
left: 50%;
margin-left: calc(1920px / -2);
/* 9비율 */
top: 50%;
margin-top: calc(1920px * 9 / 16 / -2);
}
.youtube .youtube__area::before {
content: "";
display: block;
/* 16:9 영상 비율로 요소 크기 만들기! */
width: 100%;
height: 0;
padding-top: 56.25%;
}
.youtube .youtube__cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.3);
background-image: url("../images/video_cover_pattern.png");
}
#player {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.youtube .inner {
height: inherit;
}
.youtube .floating1 {
position: absolute;
top: 50px;
left: 0;
}
.youtube .floating2 {
position: absolute;
top: 350px;
left: 150px;
}
.youtube .floating3 {
position: absolute;
bottom: -200px;
right: 0;
}
/*SEASON PRODUCT*/
.season-product {
background-image: url("../images/season_product_bg.jpg");
}
.season-product .inner {
height: 400px;
}
.season-product .floating3 {
position: absolute;
top: -200px;
right: 0;
}
.season-product .text-group {
position: absolute;
top: 110px;
right: 100px;
}
.season-product .text-group .title {
margin-bottom: 10px;
}
.season-product .text-group .description {
margin-bottom: 15px;
}
.season-product .text-group .more {
}
/*RESERVE COFFEE*/
.reserve-coffee {
background-image: url("../images/reserve_bg.jpg");
}
.reserve-coffee .inner {
height: 400px;
}
.reserve-coffee .reserve-logo {
position: absolute;
top: 110px;
left: 0;
}
.reserve-coffee .text-group {
position: absolute;
top: 124px;
left: 208px;
}
.reserve-coffee .product {
position: absolute;
top: 0;
right: 0;
}
/*PICK YOUR FAVORITE*/
.pick-your-favorite {
background-image: url("../images/favorite_bg.jpg");
background-repeat: no-repeat; /* 반복 X -> 하나의 이미지만 나오게 설정 */
background-position: center;
background-attachment: fixed; /* 요소 배경 이미지 고정 */
background-size: cover; /* 배경 이미지를 요소의 넓은 너비에 맞춰서 출력 */
}
.pick-your-favorite .inner {
padding: 110px 0;
}
.pick-your-favorite .text-group {
width: 362px;
margin-left: 100px;
display: flex;
flex-wrap: wrap; /* 줄바꿈이 가능하게 */
justify-content: flex-end; /* 우측 정렬 */
}
.pick-your-favorite .text-group .title {
margin-bottom: 40px;
}
.pick-your-favorite .text-group .description {
margin-bottom: 40px;
}
/*RESERVE STORE*/
.reserve-store {
background-image: url("../images/reserve_store_bg.jpg");
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
}
.reserve-store .inner {
height: 600px;
display: flex;
justify-content: center; /* 수평 가운데 정렬 */
align-items: center; /* 수직 가운데 정렬 */
}
.reserve-store .medal {
width: 334px;
height: 334px;
perspective: 600px; /* 원근거리 600px 추가 */
}
.reserve-store .medal .front,
.reserve-store .medal .back {
width: 334px;
height: 334px;
backface-visibility: hidden; /* 뒷면 숨김 처리 */
position: absolute;
transition: 1s;
}
.reserve-store .medal .front {
transform: rotateY(0deg); /* Y축을 기준으로 0 뒤집음 (변화 없음) */
}
.reserve-store .medal:hover .front {
transform: rotateY(180deg);
}
.reserve-store .medal .back {
transform: rotateY(-180deg); /* Y축을 기준으로 180도 뒤집음 */
}
.reserve-store .medal:hover .back {
transform: rotateY(0deg);
}
.reserve-store .medal .back .btn {
position: absolute;
top: 240px;
left: 0;
right: 0;
margin: auto;
}
/*FIND THE STORE*/
.find-store {
background-image: url("../images/find_store_bg.jpg");
}
.find-store .inner {
height: 400px;
}
.find-store .texture1 {
position: absolute;
top: 0;
left: 400px;
}
.find-store .texture2 {
position: absolute;
bottom: 0;
right: 0;
}
.find-store .picture {
border-radius: 50%;
box-shadow: 2px 2px 8px 0 rgba(0,0,0,.5);
position: absolute;
}
.find-store .picture1 {
top: -60px;
left: 0;
}
.find-store .picture2 {
top: 150px;
left: 250px;
}
.find-store .text-group {
position: absolute;
top: 120px;
left: 550px;
}
.find-store .text-group .title {
margin-bottom: 20px;
}
.find-store .text-group .description {
margin-bottom: 20px;
}
/*AWARDS*/
.awards {
background-color: #272727;
}
.awards .inner {
padding: 40px 0;
}
.awards .swiper-container {
width: 100%;
height: 40px;
}
.awards .swiper-prev,
.awards .swiper-next {
width: 42px;
height: 42px;
outline: none;
border: 2px solid #fff;
border-radius: 50%;
color: #fff;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
opacity: .3;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: .4s;
}
.awards .swiper-prev {
left: -100px;
}
.awards .swiper-next {
right: -100px;
}
.awards .swiper-prev:hover,
.awards .swiper-next:hover {
background-color: #fff;
color: #333;
}
/*FOOTER*/
footer {
background-color: #272727;
border-top: 1px solid #333;
}
footer .inner {
padding: 40px 0 60px 0;
}
footer .menu {
display: flex;
justify-content: center;
}
footer .menu li {
position: relative;
}
footer .menu li::before {
content: ""; /* 필수 */
width: 3px;
height: 3px;
background-color: #555;
position: absolute;
top: 0;
bottom: 0;
right: -1px;
margin: auto;
}
footer .menu li:last-child::before {
display: none;
}
footer .menu li a {
display: block;
color: #CCC;
font-size: 12px;
font-weight: 700;
padding: 15px;
}
footer .menu li a.green {
color: #669900;
}
footer .btn-group {
margin-top: 20px;
display: flex;
justify-content: center;
}
footer .btn-group .btn {
font-size: 12px;
margin-right: 10px;
}
footer .btn-group .btn:last-child {
margin-right: 0;
}
footer .info {
margin-top: 30px;
text-align: center;
}
footer .info span {
margin-right: 20px;
color: #999;
font-size: 12px;
}
footer .info span:last-child {
margin-right: 0;
}
footer .copyright {
color: #999;
font-size: 12px;
text-align: center;
margin-top: 12px;
}
footer .logo {
margin: 30px auto 0;
}
/*SCROLL TO TOP*/
#to-top {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 9;
width: 42px;
height: 42px;
background-color: #333;
color: #fff;
border: 2px solid #fff;
border-radius: 10px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}main.js
/**
* 검색
*/
const searchEl = document.querySelector('.search');
const searchInputEl = searchEl.querySelector('input'); // searchEl 안에서 input 요소를 찾음
// search라는 클래스를 갖고 있는 요소를 클릭하면 input 요소에 포커스하라.
searchEl.addEventListener('click', function () {
searchInputEl.focus();
});
// input 요소가 포커스되면 search 클래스 요소에 focused라는 클래스 추가
searchInputEl.addEventListener('focus', function () {
searchEl.classList.add('focused');
// input 요소에 placeholder : 통합검색 설정
searchInputEl.setAttribute('placeholder', '통합검색');
});
// 포커스 해제됐을 때
searchInputEl.addEventListener('blur', function () {
searchEl.classList.remove('focused');
// input 요소에 placeholder : 통합검색 설정
searchInputEl.setAttribute('placeholder', '');
});
/**
* 배지
*/
const badgeEl = document.querySelector('header .badges');
// window 객체 : 브라우저 창을 의미
/* 화면을 스크롤할 때 (스크롤할때마다 해당함수가 실행되기 때문에 사이트 자체가 무거워짐 -> 화면 버벅임 현상 발생)
window.addEventListener('scroll', function () {
console.log('scroll!!');
}); */
// _.throttle(함수, 시간) : 0.3초 단위(사용자 지정)로 부하를 줘서 함수가 연속으로 실행되는 것을 방지 (lodash.js)
window.addEventListener('scroll', _.throttle(function () {
// window.scrollY : 화면이 몇 px 지점에 위치하는지 확인
if(window.scrollY > 500) {
// 배지 숨기기
// badgeEl.style.display = 'none'; > 이렇게 하면 부자연스러워 보일 수 있어서 gsap.js 사용
// gsap.to(요소, 지속시간, 옵션)
// badgeEl 요소를 0.6초 동안 opacity : 0(점점 투명해지는) + display : none 애니메이션이 처리
gsap.to(badgeEl, .6, {
opacity : 0,
display : 'none'
});
// srollTo 버튼 보이기
gsap.to('#to-top', .2, {
x : 0
});
}else{
// 배지 보이기
// badgeEl.style.display = 'block';
// badgeEl 요소를 0.6초 동안 opacity : 1(점점 나타나는) + display : block 애니메이션이 처리
gsap.to(badgeEl, .6, {
opacity : 1,
display : 'block'
});
// srollTo 버튼 숨기기
gsap.to('#to-top', .2, {
x : 100
});
}
}, 300));
/**
* scrollTo 기능
*/
const toTopEl = document.querySelector('#to-top');
toTopEl.addEventListener('click', function () {
gsap.to(window, .7, {
scrollTo : 0 // 화면의 위치를 0px 지점으로 옮겨줌
});
});
/**
* 순서대로 나타나는 기능
*/
// 나타날 요소들(.fade-in) 찾기.
const fadeEls = document.querySelectorAll('.visual .fade-in')
// 나타날 요소들을 하나씩 반복해서 처리!
fadeEls.forEach(function (fadeEl, index) {
// 각 요소들을 순서대로(delay) 보여지게 함!
gsap.to(fadeEl, 1, {
delay: (index + 1) * .7, // 0.7, 1.4, 2.1, 2.8
opacity: 1
})
});
/*
* 공지사항 Swiper
* new : javascript에서 생성자
* new Swiper(선택자, 옵션)
* */
new Swiper('.notice-line .swiper-container', {
direction : 'vertical', /* 수직 swiper */
autoplay : true, /* 자동재생 */
loop : true /* 반복재생 */
});
/*
* 프로모션 Swiper
* */
new Swiper('.promotion .swiper-container', {
//direction : 'horizontal', /* 수평 swiper : 기본값이므로 생략 */
slidesPerView : 3, /* 한번에 보여줄 슬라이드 개수 */
spaceBetween : 10, /* 슬라이드 사이 여백(10px) */
centeredSlides : true, /* 1번 슬라이드가 가운데 보이게 */
loop : true, /* 반복재생 */
autoplay : { /* 1초에 한번씩 자동 재생 */
delay : 1000
},
pagination : {
el : '.promotion .swiper-pagination', /* 페이지 번호 요소 선택자 */
clickable : true /* 사용자의 페이지 번호 요소 제어 여부 */
},
navigation : { /* 이전, 다음 슬라이드 네비 제공 */
prevEl : '.promotion .swiper-prev',
nextEl : '.promotion .swiper-next'
}
});
/*
* 어워즈 Swiper
* */
new Swiper('.awards .swiper-container', {
autoplay : true, /* 자동재생 */
loop : true, /* 반복재생 */
spaceBetween : 30, /* 슬라이드 사이 여백(30px) */
slidesPerView : 5, /* 한번에 보여줄 슬라이드 개수 */
pagination : {
el : '.awards .swiper-pagination', /* 페이지 번호 요소 선택자 */
clickable : true /* 사용자의 페이지 번호 요소 제어 여부 */
},
navigation : { /* 이전, 다음 슬라이드 네비 제공 */
prevEl : '.awards .swiper-prev',
nextEl : '.awards .swiper-next'
}
});
/*
* 슬라이드 영역 토글
* */
const promotionEl = document.querySelector('.promotion');
const promotionToggleBtn = document.querySelector('.toggle-promotion');
let isHidePromotion = false;
promotionToggleBtn.addEventListener('click', function () {
isHidePromotion = !isHidePromotion; // false면 true, true면 false로
if(isHidePromotion){
// 숨김 처리
promotionEl.classList.add('hide');
}else{
// 보임 처리
promotionEl.classList.remove('hide');
}
});
/*
* 범위 랜덤 함수(소수점 2자리까지)
* */
function random(min, max) {
// `.toFixed()`를 통해 반환된 문자 데이터를,
// `parseFloat()`을 통해 소수점을 가지는 숫자 데이터로 변환
return parseFloat((Math.random() * (max - min) + min).toFixed(2))
}
/*
* 반복 애니메이션
* */
function floatingObject(selector, delay, size){
gsap.to(
selector, // 선택자
random(1.5, 2.5), { // 애니메이션 동작 시간
y : size, // y축으로 size픽셀로 내려가기
repeat : -1, // 무한 반복
yoyo : true, // 재생된 애니메이션 뒤로가기
ease: Power1.easeInOut,
delay : random(0, delay)
});
}
floatingObject('.floating1', 1, 15);
floatingObject('.floating1', .5, 15);
floatingObject('.floating1', 1.5, 20);
/*
* ScrollMagic
* - Scene : 특정한 요소를 감시하는 옵션을 지정해주는 메소드
* - setClassToggle : 클래스 토글 지정
* - addTo : ScrollMagic에서 컨트롤러 개념의 내용을 추가하기 위해 사용
* */
const spyEls = document.querySelectorAll('section.scroll-spy') // section 태그 + scroll-spy 클래스 요소
spyEls.forEach(function (spyEl) {
// 요소가 뷰포트의 0.8 지점에서 감시되면 'show'라는 클래스를 토글하라
new ScrollMagic
.Scene({
triggerElement : spyEl, // 보여짐 여부를 감시할 요소 지정
triggerHook : .8 // 감시할 요소가 뷰포트(0(최상단)~1(최하단))의 어떤 지점에서 감시됨을 판단
})
.setClassToggle(spyEl, 'show')
.addTo(new ScrollMagic.Controller());
});
/*
* 올해 년도 구하고 지정
* new Date : 날짜 생성자
* */
const thisYear = document.querySelector('.this-year');
thisYear.textContent = new Date().getFullYear();youtube.js
/*
* 유투브 영상 플레이어
* */
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
// 유투브를 제어해주는 자바스크립트 라이브러리가 자체적으로 이 함수를 찾기 떄문에 절대 이름을 바꾸면 안된다!!!
function onYouTubeIframeAPIReady() {
new YT.Player('player', { // 'player'는 <div id="player"></div>을 의미
videoId: 'An6LvWQuj_8', // 유투브 영상 Url에 있는 videoId
playerVars : {
autoplay : true, /* 자동재생 유무 */
loop : true, /* 반복재생 유무 */
playlist : 'An6LvWQuj_8' /* 반복재생할 영상 ID 목록 */
},
events : {
onReady : function (event) { // 영상이 준비되면
event.target.mute(); // 음소거 처리하겠다.
}
}
});
}출력
