프로젝트
-
스타벅스 클론코딩-7 (MAIN CONTENT~)프로젝트/스타벅스 클론코딩 2021. 5. 16. 20:42
MAIN CONTENT - SEASON PRODUCT - RESERVE COFFEE - PICK YORU FAVORITE - RESERVE STORE - FIND STORE MAIN CONTENT - SEASON PRODUCT 자세히 보기 /* 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;..
-
스타벅스 클론코딩-6 (YOUTUBE)프로젝트/스타벅스 클론코딩 2021. 5. 16. 12:43
MAIN CONTENT - YOUTUBE 클론코딩 YOUTUBE 특징 - 자동 재생, 음소거, 무한 반복 - 외부에 있는 유튜브 영상을 가져옴 /* YOUTUBE VIDEO CSS*/ .youtube { position: relative; height: 700px; background-color: #333; overflow: hidden; } .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); } .youtube .youtube__area..
-
스타벅스 클론코딩-5 (PROMOTION 및 REWARDS)프로젝트/스타벅스 클론코딩 2021. 5. 14. 00:13
MAIN CONTENT - NOTICE - PROMOTION 클론코딩 PROMOTION 특징 - 프로모션은 수평 슬라이드 형태로 보여짐 - 활성화(active) 된 프로모션이 중앙으로 위치, 다른 프로모션은 반투명 처리 - 사용자가 페이지 번호를 제어 가능함 - 토글 버튼(파란색 동그라미)으로 프로모션 가려짐과 보여짐을 제어 자세히 보기 자세히 보기 자세히 보기 자세히 보기 자세히 보기 arrow_back arrow_forward .notice .promotion { height: 693px; background-color: #f6f5ef; position: relative; transition: height .4s; overflow: hidden; } .notice .promotion.hide { he..
-
스타벅스 클론코딩-4 (NOTICE)프로젝트/스타벅스 클론코딩 2021. 5. 12. 21:31
MAIN CONTENT - NOTICE 클론코딩 예제 NOTICE 특징 - 공지사항이 수직 슬라이드 형태로 보여짐 - 공지사항 내용들이 순서대로 자동으로 재생됨 공지사항 크리스마스 & 연말연시 스타벅스 매장 영업시간 변경 안내 [당첨자 발표] 2021 스타벅스 플래너 영수증 이벤트 스타벅스커피 코리아 애플리케이션 버전 업데이트 안내 [당첨자 발표] 뉴이어 전자영수증 이벤트 add_circle 스타벅스 프로모션 upload .inner { /* 가로 너비 */ width: 1100px; /* 외부 여백, 가운데 정렬 효과 */ margin: 0 auto; position: relative; } /* NOTICE CSS */ .notice .notice-line { position: relative; } ...
-
스타벅스 클론코딩-3 (전역 배지 및 VISUAL)프로젝트/스타벅스 클론코딩 2021. 5. 9. 22:44
HEADER - 전역 배지 클론코딩 예제 배지 특징 - 화면에서 스크롤을 일정 부분 내리면 천천히 사라짐, 올리면 다시 천천히 보여짐 /* CSS */ header { width: 100%; position: fixed; top: 0; } 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; } // 자바 스크립트 // 배지 요소 변수에 저장 const badgeEl = ..
-
스타벅스 클론코딩-2 (HEADER)프로젝트/스타벅스 클론코딩 2021. 5. 7. 01:55
HEADER 영역 로고 삽입 및 배치 header .inner { /* 가로 너비 */ width: 1100px; /* 세로 너비 */ height: 120px; /* 외부 여백, 가운데 정렬 효과 */ margin: 0 auto; position: relative; } header .logo { /* 결과적으로 header 영역 가운데에 수직으로 배치 */ height: 75px; /* 부모 요소를 기준으로 로고를 배치 */ position: absolute; top: 0; bottom: 0; margin: auto; } /* - 가운데 수직 정렬 방법 - 부모 요소에 기준점(position: relative) 존재 - position: absolute 선언 - height(높이값),top과 botto..
-
스타벅스 클론코딩-1 (HTML <head> 작성)프로젝트/스타벅스 클론코딩 2021. 5. 6. 23:00
HTML 작업 - 문서의 정보를 작성 - 웹 브라우저가 해석해야 하는 페이지 제목, 설명, 사용할 파일의 위치, 스타일, 보이지 않는 정보를 작성 Starbucks Coffee Korea Favicon(favorites icon) - 윕페이지를 나타내는 아이콘으로 파비콘이라고 부른다 - 웹페이지의 로고를 의미하며 대부분의 경우 루트 경로에 favicon.ico 파일을 위치하면 자동으로 설정된다 - favicon.png 파일을 사용하려면 태그를 작성 오픈 그래프와 트위터 카드 오픈 그래프(The Open Graph protocol) - 웹페이지가 소셜 미디어(페이스북 등)로 공유될 때 우선적으로 활용되는 정보를 지정 og:type - 페이지의 유형(E.g, website, video.movie) og:si..
-