💻 Web Develop/☕️ STARBUCKS 개발일지

14. 스타벅스 로그인

스타벅스 로그인 페이지 스타벅스 로그인 HTML 로그인 Welcome! 스타벅스에 오신 것을 환영합니다. * 비밀번호를 타 사이트와 같이 사용할 경우 도용 위험이 있으니, 정기적으로 비밀번호를 변경하세요! 회원가입 아이디 찾기 비밀번호 찾기 input type=text: text 입력 input type=password: text 입력할 경우 가림 처리되어 text가 입력된다. input type=submit: 서버의 폼 핸들러로 폼 데이터를 전송하는 제출 버튼을 정의 스타벅스 로그인 CSS .signin { margin-top: 120px; padding: 100px 0 150px; background-image: url("../images/signin_bg.jpg"); background-repeat..

13. 스타벅스 페이지 상단으로 이동(ScrollTo)

스타벅스 ScrollTo 오픈소스 연결 브라우저에 gsap cdn 검색 index.html에 연결 스타벅스 페이지 상단으로 이동 HTML arrow_upward material-icon을 사용 스타벅스 페이지 상단으로 이동 CSS #to-top { 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; position: fixed; bottom: 30px; right: 30px; z-index: 9; } 가로 42px, 세로 42..

12. 스타벅스 푸터

스타벅스 푸터 HTML 개인정보처리방침 영상정보처리기기 운영관리 방침 홈페이지 이용약관 위치정보 이용약관 스타벅스 카드 이용약관 윤리경영 핫라인 찾아오시는 길 사업자등록번호 201-81-21515 (주)스타벅스 코리아 대표이사 이석구 TEL: 02) 3015-1100 / FAX : 02) 3015-1106 개인정보 책임자 : 강기원 © Starbucks Coffee Company All Rights Reserved. menu class로 메뉴 묶음 처리 btn-group class로 버튼 묶음 처리 info class로 회사 정보 묶음 처리 스타벅스 푸터 CSS /* FOOTER */ footer { background-color: #272727; border-top: 1px solid #333; } f..

11. 스타벅스 다중 요소 슬라이드

스타벅스 다중 요소 슬라이드 HTML arrow_back arrow_forward 10개의 awards 이미지 사용 2개의 전환 버튼 사용 스타벅스 다중 요소 슬라이드 CSS /* 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; border: 2px solid #fff; border-radius: 50%; outline: none; color: #fff; opacity: .3..

10. 스타벅스 스크롤 위치 계산 애니메이션

스타벅스 매장 찾기 완성 스크롤 애니메이션을 추가하기 전에 사진과 같은 단을 만들어야 한다. 스타벅스 매장 찾기 HTML 매장 찾기 text는 text-group class로 묶어준다. 스타벅스 매장 찾기 CSS /* 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: 0pt; } .find-store .pictu..

9. 스타벅스 3D 애니메이션

스타벅스 3D 애니메이션 HTML 매장 안내 메달의 앞면과 뒷면을 각각의 이미지로 지정 뒷면에는 매장 안내 버튼을 만든다. 스타벅스 3D 애니메이션 CSS /* 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; } ..

8. 스타벅스 고정 이미지 변경

총 3단으로 구성 1단씩 코드 분석을 할 예정 아이스 커피 블렌드 위에 저번 개발 일지에 썼던 이미지 애니메이션 효과가 짤리는 것을 수정 스타벅스 1단 HTML 자세히 보기 저번 개발일지에 썼던 floating3을 season-product에 옮겨 overflow:hidden 효과를 무시하게 됨. text와 관련된 이미지는 text-group class로 묶고 상품은 따로 지정, 버튼도 more class로 따로 지정. 스타벅스 1단 CSS /* SEASON PRODUCT */ .season-product { background-image: url("../images/season_product_bg.jpg"); } .season-product .inner { height: 400px; } .season-..

7. 스타벅스 유튜브 영상 배경

스타벅스 리워즈 HTML 회원가입 로그인 e-Gift 선물하기 기존 정렬 방식인 bg-left, bg-right, inner 사용 버튼 3가지 구성: 회원가입, 로그인, e-Gift 선물하기 스타벅스 리워즈--위치 CSS .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..

6. 스타벅스 요소 슬라이드

스타벅스 요소 슬라이드 HTML 자세히 보기 스타벅스 요소 슬라이드 CSS promotion class .notice .promotion { height: 693px; background-color: #F6F5EF; position: relative; transition: height .4s; overflow: hidden; } .notice .promotion.hide { height: 0; } 가로 639px 배경 색상은 #f6f5ef 자기 자신 기준 요소가 넘쳤을 때 감춘다. 세로 전환 0.4s swiper-container class .notice .promotion .swiper-container { width: calc(819px * 3 + 20px); /* width: calc(100% -5..

5. 스타벅스 순차적 애니메이션

스타벅스 SECTION 완성 사진 스타벅스 SECTION HTML 자세히 보기 cup1, cup2, spoon 3가지 관련된 요소로 묶은 것을 볼 수 있다. fade-in이라는 클래스를 이용하여 순차적 애니메이션을 만들 것이다. 스타벅스 SECTION CSS /* 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: a..