Starbucks
meta는 카카오톡같은 메신저에 공유할때 밑에 나타나는 오픈그래프
오픈그래프
1.웹사이트
2.사이트이름
3.title
4.설명
5.이미지
6.사이트주소
<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" />
파비콘은 image폴더가 아닌 index.html과 같은 위치에 있어야한다.
<link rel="icon" href="./favicon.png"/>
reset.css
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css"/>
폰트
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
meterial
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
gsap & scrollToPlugin
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js" integrity="sha512-VEBjfxWUOyzl0bAwh4gdLEaQyDYPvLrZql3pw1ifgb6fhEvZl9iDDehwHZ+dsMzA0Jfww8Xt7COSZuJ/slxc4Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollToPlugin.min.js" integrity="sha512-lZACdYsy0W98dOcn+QRNHDxFuhm62lfs8qK5+wPp7X358CN3f+ml49HpnwzTiXFzETs4++fADePDI+L2zwlm7Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>lodash
<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>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>scrollMagic
<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>
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" />
<span class="material-icons">search</span>
</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>스타벅스 티바나</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>청담스타</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><!-- inner -->
<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>
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>
promotion
<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" />
</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>
구조상 div에 more라는 클래스는 없어도 되지만
class="btn"의 transition이 .4s로 되어있는데 back-to-position이 1초로 되어있기때문에
전환 효과의 중복이나 덮어씌워지는 것을 방지하기 위해서
다른 div의 클래스로 지정
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>
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
css
common css
body{
color: #333;
font-size: 16px;
font-weight: 400;
line-height: 1.4;
font-family: 'Nanum Gothic', sans-serif;
}
img{
display: block;
}
a{
text-decoration: none;
}
.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--revers{
background-color: #333;
color: #fff;
}/* 클래스가 두개라 우선순위가 높다 20점 */
.btn.btn--revers: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: #D9AABA;
border-color: #d9aaba;
}
.btn.btn--gold:hover{
color: #fff;
background-color: #d9aaba;
}
.btn.btn--white{
color: #fff;
border-color: #fff;
}
.btn.btn--white:hover{
color: #333;
background-color: #fff;
}
.back-to-position{
opacity: 0;
transition: 1s;
}
.back-to-position.to-right{
transform: translateX(-150px);
}/* 왼쪽>오른쪽 */
.back-to-position.to-left{
transform: translateX(150px);
}/* 오른쪽>왼쪽 */
.show .back-to-position{
opacity: 1;
transform: translateX(0);
}
.show .back-to-position.delay-0{
transition-delay:0;
/* 기본값이 0이지만 명시적으로 초기값을 작성 */
/* 전상태와 후상태를 자연스럽게 처리할때
지연시간을 통해서 몇초뒤에 실행할지
*/
}
.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;
/* 요소의 너비를 최대로 사용하지못하고 최소로 사용하게됨
- position : fixed와 absolute*/
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;
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;
}
header .sub-menu ul.menu li:first-child::before{
display: none;
}
header .sub-menu ul.menu li a{
padding: 11px 16px;
display: block;
font-size: 13px;
color: #656565;
}
header .sub-menu ul.menu li a:hover{
color: #000;
}
header .sub-menu .search{
position: relative;
height: 34px;
}
header .sub-menu .search input{
width: 36px;
height: 34px;
padding: 4px 10px;
border: 1px slid #ccc;
box-sizing: border-box;
border-radius: 5px;
outline: none;
background-color: #fff;
color: #777;
font-size: 12px;
transition:width .4s;
}
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;
/* display가 없을시엔 맨오른쪽으로 붙게됨 */
margin: auto;
transition: .4;
}
header .sub-menu .search.focused .material-icons{
/*.search.focused 같이 꼭 붙어있어야됨 */
opacity: 0;
}
header .main-menu {
position: absolute;
bottom: 0;
right: 0;
z-index: 1;
display: flex;
}
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;
/* top이나 bottom속성을 사용하지않아 수직 위치값이 없다면
요소의 원래 위치 그대로 사용합니다
만약 position :absoulte; 를 사용했다면 위치상부모요소를 기준으로 하므로
화면의 뷰포트 좌우 끝까지 늘어날수 없게됩니다. */
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{
padding: 26px 0;
font-size: 12px;
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;
/* 모서리는 div에서 깍지만 이미지가 화면에 출력되는데 이미지가 넘치지않도록 hidden */
margin-bottom: 12px;
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.15);
/* x y 블러 rgba(숫자,숫자,숫자,투명도) */
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;
}
/* btn의 부모는 title이되는데 position이 title에 맞춰져있기때문에
title이 변경되면 btn도 같이 따라가게된다.
*/
.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-line {
position: relative;
}
.notice .notice-line .bg-left {
width: 50%;
height: 100%;
background-color: #333;
position: absolute;
top: 0;
left: 0;
}
.notice .notice-line .bg-right {
width: 50%;
height: 100%;
background-color: #f6f5ef;
position: absolute;
top: 0;
right: 0;
}
.notice .notice-line .inner {
height: 62px;
z-index: 1;
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;
}
.notice .promotion{
height: 693px;
background-color: #f6f5ef;
position: relative;
transition: height .4s;
overflow: hidden;
}
.notice .promotion.hide{
/* 자바스크립트로 넣어서 일치선택자이기때문에 띄어쓰기하면안됨 */
height: 0;
}
.notice .promotion .swiper-container{
width: calc(819px * 3 + 20px );
/* 특정한단위를 계산 */
/* width: calc(100% -50px); */
height: 553px;
position: absolute;
top: 40px;
left: 50%;
margin-left: calc((819px * 3 + 20px) / -2);
/* 요소를 가운데에 있게하기위해서
left를 50%만 주고 container의 절반인 1238px를 왼쪽으로 떙겨
중앙에 위치하게 만드는방법
left는 margin-left / right는 margin-right를 사용
*/
}
.notice .promotion .swiper-slide {
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;
/* swiper의 라이브러리를 알기위해 관리자도구를 켜서
클래스를 확인하고 css도 확인해서 알아가야한다
*/
}
.notice .promotion .swiper-pagination .swiper-pagination-bullet{
background-color: transparent;
background-image: url("../images/promotion_slide_pager.png");
width: 12px;
height: 12px;
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;
top: 300px;
z-index: 1;
cursor: pointer;
outline: none;
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-grow: 1;
/* 최대한의 너비로 만들기위해 */
}
youtube video
.youtube{
position: relative;
height: 700px;
/* 임시로 지정 yotube__area의 높이값이있어야 눈으로 확인이 가능 */
background-color: #333;
overflow: hidden;
/* 가운데 height높이를 넘어간것들은 짤리게됨 */
}
.youtube .youtube__area{
width: 1920px;
background-color: orange;
position: absolute;
left: 50%;
margin-left: calc(1920px / -2);
top: 50%;
margin-top: calc(1920px * 9 / 16 /-2);
/* 가로너비 1920을 기준으로 세로너비 9를 곱하고 가로너비16을 나눠주고
-2를 나눠주면 세로너비의 절반만큼을 위로 끌어올릴수있다.
*/
}
.youtube .youtube__area::before{
content: "";
display: block;
width: 100%;
height: 0;
padding-top: 56.25%;
/* 16:9 비율로 만들수있음 */
}
/* html에 오직 스타일만 적용하기위해서 사용하는 가상선택자
::before */
.youtube .youtube__cover{
background-image: url("../images/video_cover_pattern.png");
background-color: rgba(0, 0, 0, .3);
/* 배경으로 깔릴 영상으로 만들기위해 약간어둡게 만들어줌 */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#player{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.youtube .inner{
height: 700px;
}
.youtube .floating1{
position: absolute;
top: 50px;
left: 0;
}
.youtube .floating2{
position: absolute;
top: 350px;
left: 150;
}
.season-product{
background-image: url('../images/season_product_bg.jpg');
}
.season-product .inner{
height: 400px;
}
.season-product .floating3{
position: absolute;
top: -200px;
right: 0;
}
/* youtube에 overflow:hidden이 되어있어 season-product의 클래스로 옮김 */
.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;
}
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;
justify-content: flex-end;
/* 우측정렬 */
flex-wrap: wrap;
/* 줄바꿈 */
}
.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 */
}
/* 앞면은 334px로 동일한데 주변이 투명한것 */
.reserve-store .medal .front,
.reserve-store .medal .back {
width: inherit;
height: inherit;
position: absolute;
transition: 1s;
backface-visibility: hidden;
/* 뒤집힌화면은 보이지않게 */
}
.reserve-store .medal .front {
transform: rotateY(0deg);
/* 명시적으로 기준을 잡아줌 */
}
.reserve-store .medal:hover .front {
transform: rotateY(180deg);
}
.reserve-store .medal .back {
transform: rotateY(-180deg);
/* 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 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;
/* a태그의 클릭범위를 늘려주기위해(padding범위를 늘리기위함) */
padding: 15px;
color: #CCC;
font-size: 12px;
font-weight: 700;
}
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;
}
/* img요소가 display:block; + margin:0 auto; 인경우,
width 속성이 없이도 가운데 정렬이 가능합니다.
우리는 현재 프로젝트에서 img요소에 display:block; 을 지정했습니다. */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.addEventListener('click',function(){
searchInputEl.focus();
//검색부분에 포커스
});
searchInputEl.addEventListener('focus',function(){
searchEl.classList.add('focused');
searchInputEl.setAttribute('placeholder','통합검색');
// setAttribute html의 속성을 지정한다 (속성, 속성에들어갈내용)
});
searchInputEl.addEventListener('blur',function(){
// 인풋요소에 포커스가 해제되엇을때
searchEl.classList.remove('focused');
searchInputEl.setAttribute('placeholder','');
});
// 페이지 스크롤에 따른 요소제어
// 페이지 스크롤에 영향을 받는 요소들을 검색
const badgeEl = document.querySelector('header .badges');
const toTopEl = document.querySelector('#to-top')
// document는 html이다
// window.addEventListener('scroll',function(){
// window(브라우저창) 여러가지 명령이있다 화면자체이다
//화면이 스크롤이되면 function의 함수를 실행하라
// console.log('scroll');
// });
//lodash javascript 라이브러리
window.addEventListener('scroll',_.throttle(function(){
// 페이지에 스크롤 이벤트를 추가!
//console.log(window.scrollY);//좌표가 표시
if(window.scrollY >500){
//윈도우화면에서 스크롤할때마다 scrollY이 부분이 갱신이되는데
//scrollY를 통해 위에서 몇px지점인지 파악할수있다
//배지 숨기기
// badgeEl.style.display='none';
// badgeEl라는 속성의 스타일을 어떻게 할것인가 display의 값을 none으로 하겠다
// 애니메이션추가 gsap javascript 라이브러리
gsap.to(badgeEl,0.6,{
opacity:0, //점점투명
display:'none' //문자를 입력할때는 따옴표
/*display 속성처럼 값이 숫자가 아닌 속성은
전/후 상태의 중간값이 존재하지않기때문에
자연스러운 전환효과를 적용할수없다.*/
})
// gsap.to(요소,지속시간,옵션); 옵션은 객체데이터형식
// name이나 age등
// 상단으로 탑스크롤 버튼 보이기!
gsap.to(toTopEl, .2, {
x: 0
})
}else{
//배지 다시 보이기
gsap.to(badgeEl,0.6,{
opacity:1, //점점투명
display:'block'
})
// badgeEl.style.display='block';
// 상단으로 탑스크롤 버튼 숨기기!
gsap.to(toTopEl, .2, {
x: 100 //x축으로 100만큼 이동
})
}
}, 300))
// 0.3초스크롤이 반응하게해서 반복적으로 사용하게되는것을막는 throttle함수
//_.throttle(함수,시간)
toTopEl.addEventListener('click', function () {
// 페이지 위치를 최상단으로 부드럽게(0.7초 동안) 이동.
gsap.to(window, .7, { //페이지가 출력되는 창
//화면자체를 옮긴다 .7s scrollTo() 스크롤의 위치를 0으로 옮기겠다
scrollTo: 0
})
})
// visual
// 안보이게 만든다음 순차적으로 보이도록
const fadeEls = document.querySelectorAll('.visual .fade-in');
fadeEls.forEach(function(fadeEl,index){
gsap.to(fadeEl,1,{
delay:(index+1)* .7,
/*fade-in을 가진 4개의 클래스를 fadeEls에 넣었고 forEach로 반복을 돌린뒤
실행이되는데 첫번째 반복할 때 index의 값은 숫자 0이된다.
0에다가 0.7을 곱하면 0이되고 딜레이가 없는것이되고
첫번째는 index에 1을더해 0.7초후에 동작을하게되고
두번째 반복에서는 1.4 다음 2.1 2.7초뒤에 동작하게된다.
순차적으로 반복
*/
opacity:1
});
// gsap.to(요소,지속시간,옵션);
});
// fadeEls의 갯수만큼 반복(forEach)된다
//매개변수 fadeEl(단수형태로 받아서 지정 원하는이름사용가능)와
//두번째 매개변수 반복되는횟수index
/* Initialize(초기화) Swiper
var swiper = new Swiper(".swiper-container", {
{}안에있는 객체 데이터로 swiper라는 함수를 실행
첫번째인수 swiper-container 슬라이드를 동작시킬 선택자
두번째는 {}안에 들어갈 옵션
direction: "vertical",
방향: 수직슬라이드
pagination: {
페이지번호 몇번째번호를 볼것이다.
el: ".swiper-pagination",
요소의 선택자
clickable: true,
클릭이 가능하도록
},
});
*/
// new Swiper(선택자,옵션)
new Swiper('.notice-line .swiper-container', {
direction:'vertical',//방향: 수직슬라이드
autoplay:true, //자동재생여부
loop:true //반복재생여부
}); //()안에 있는걸 인수라고함
// new : 생성자(자바스크립트의 클래스) 여러객체를 다루는게 가능
new Swiper('.promotion .swiper-container',{
slidesPerView : 3, //한번에 보여줄 슬라이드 개수
spaceBetween : 10, //슬라이드 사이 여백
centeredSlides: true, //1번 슬라이드가 가운데 보이기
loop:true, //반복재생여부
autoplay:{
delay:5000
}, //자동재생여부 0.5초 기본값3000
pagination:{
el:'.promotion .swiper-pagination', //페이지 번호 요소 선택자
clickable: true //사용자의 페이지 번호 요소 제어 기능 여부
},
navigation:{
prevEl: '.promotion .swiper-prev',
nextEl: '.promotion .swiper-next'
}
});
new Swiper('.awards .swiper-container', {
// direction: 'horizontal', // 수평 슬라이드
autoplay: true, // 자동 재생 여부
loop: true, // 반복 재생 여부
spaceBetween: 30, // 슬라이드 사이 여백
slidesPerView: 5, // 한 번에 보여줄 슬라이드 개수
// slidesPerGroup: 5, // 한 번에 슬라이드 할 개수(전체 개수로 나뉘어야 함)
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 //true로 만들어줌
//특정변수를 지속적으로 반대값으로 변경
//!는 반대값
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(요소,시간,옵션);
gsap.to(
selector, //선택자
random(1.5,2.5), //애니메이션 동작 시간
{ //옵션
y: size, //y축으로 20px만큼 내려오게만듬
repeat:-1, //무한반복 위에서 아래로 내려오는
yoyo:true, //한번 재생된 애니메이션을 다시 되돌리는
ease:Power1.easeInOut,
//ease나 timing 함수를 사용하여 애니메이션을 좀더
//부드럽게 만들고 원하는 모양으로 만들수있다.
delay:random(0,delay)
});
}
/*gsap에 to라는 메소드는 첫번째로 선택자selector를 받고
두번째로 random함수를 받아 지속시간을 설정하고
옵션을 돌리게되는데 이렇게 random()이라는 함수를 추가해서
새로운 랜덤한 숫자를 반환받아 애니메이션 처리가 될수 있도록
입력을 해주면 페이지에서 사용자들에게 더 자연스러운 화면을 보여주게된다.
*/
floatingObject('.floating1',1,15);
floatingObject('.floating2',.5,15);
floatingObject('.floating3',1.5,20);
//함수실행할때 선택자로 floating을 넣어준것
// 요소가 화면에 보여짐 여부에 따른 요소 관리
// 관리할 요소들 검색!
const spyEls = document.querySelectorAll('section.scroll-spy')
// 요소들 반복 처리!
spyEls.forEach(function (spyEl) {
new ScrollMagic
.Scene({ // 감시할 장면(Scene)을 추가
triggerElement: spyEl, // 보여짐 여부를 감시할 요소를 지정
triggerHook: .8 // 화면의 80% 지점에서 보여짐 여부 감시
//뷰포트의 80% 지점쯤에 trigger(실행)가 된다
})
.setClassToggle(spyEl, 'show') //(토글할요소, '토글할 클래스이름')
// 요소가 화면에 보이면 show 클래스 추가
.addTo(new ScrollMagic.Controller()) // 컨트롤러에 장면을 할당(필수!)
})
/* 올해가 몇 년도인지 계산*/
const thisYear = document.querySelector('.this-year')
thisYear.textContent = new Date().getFullYear()
/*요소의 내용으로 무엇인가를 추가할때 textContent
글자내용들의 값을 알아내거나 거기에 값을 지정할때 사용
지금은 지정해서사용(이퀄을사용)
Date 라는 생성자함수 Date안에 있는
getFullYear 라는 함수를 실행하게되면
현재 년도가 숫자데이터로 반환이된다.
*/'React&Reduct' 카테고리의 다른 글
| 프론트엔드 8주 완성 with React : react 강의 6주차 (0) | 2022.08.16 |
|---|---|
| 프론트엔드 8주 완성 with React : react 강의 5주차 (0) | 2022.08.09 |
| 프론트엔드 8주 완성 with React : react 강의 3주차 (0) | 2022.07.26 |
| 프론트엔드 8주 완성 with React : react 강의 2주차 (0) | 2022.07.19 |
| 프론트엔드 8주 완성 with React : react 강의 (0) | 2022.07.10 |