라쿤의 끄적끄적

Starbucks Clone05 Netlify 배포 Netlify Official Site What is Netlify? by Heropy Blog 지속적인 배포(Continuous Deployment) github의 원격저장소를 연결해주면 Netlify가 원격저장소의 내용을 가지고 가서 사이트를 자동으로 만들어 줌 (Github에서 project가 수정되면 알아서 Netlify가 인자하여 사이트에 수정사항을 반영 함, 즉 지속적인 관리 까지 가능함) Netlify는 신뢰할수 있는 사이트라서 github 저장소 모두 연결해도 상관 없음 로그인 페이지 만들기 (JS, CSS 모듈 이원화) SignIn HTML 기본 작업 (head) signin 폴더에 index.html 만들고 원래 index.html을 ..

Starbucks Clone04 유튜브 영상 배경 - 반복 애니메이션 유튜브 영상 배경위에 일정 하게 반복되는 애니메이션을 구현하고자 함 Gsap : easing Gsap : to 함수 사용법 (옵션 포함) HTML, CSS 반복되게 할 이미지를 inner에 추가함 CSS는 알맞은 위치에 배치 함 JS 반복 애니메이션 랜덤한 숫자를 생성하는 함수 각 애니메이션에 특정 옵션값을 랜덤하게 줌으로써 볼때마다 다르게 움직이게 하려고 함 function random(min, max) { return parseFloat((Math.random() * (max - min) + min).toFixed(2)); } floatingObject라는 함수느 선택자, 지연시간, y축 이동 거리를 인자로 받아서 gsap의 to ..

Starbucks Clone03 Notice (공지) : 수직 슬라이드 슬라이드가 되는 공지사항을 구현하는 것이다. HTML 새로운 영역을 만드는 것이기 때문에 section 태그를 사용한다. notice section의 경우 좌우로 나뉘어서 영역을 차지하고 있고, 6:4 비율을 가지고 있다. 배경 색깔만 지정하는 bg-left class, bg-right class 요소가 있고 본격적인 내용은 앞에서 정의한 inner class 요소를 사용하여 중앙 정렬을 유지한다. inner class 요소 안에서도 좌우를 나누어 inner__left 와 inner__right가 존재함 inner__left 의 경우 공지사항 글자 부분 swiper-container라는 공지가 슬라이드 되는 부분 notice-line..

Starbucks Clone02 메인 메뉴 (드롭다운 메뉴) 드롭다운 메뉴 : 메뉴에 커서를 올리면 하위 메뉴가 보이는 메뉴 핵심 포인트는 드롭다운 하위 메뉴들을 평소에 display: none 으로 하고, 메인 메뉴의 item이 hover되는 때 display: block처리를 해서 보이게 하는 것이다. 또한, 스크롤 시에도 계속 따라 보이게 하기 위해서 position: fixed;를 사용함 html 구조 COFFEE 음료 콜드 브루 브루드 커피 에스프레소 프라푸치노 블렌디드 음료 스타벅스 피지오 티(티바나) 기타 제조 음료 스타벅스 주스(병음료) COFFEE item__name 부분은 메인 메뉴에서 원래 보이는 부분 item__contents 부분은 메인 메뉴 hover시 보이는 부분 inner 부..

Starbucks Clone01 기본 환경 만들기 사용할 images 따오기 (favicon 포함) HTML 파일 만들기 html lang 속성 ko title 변경 favicon 연결 하기 link 태그의 rel icon css reset 연결하기 css 연결하기 CSS 파일 만들기 오픈 그래프 (The Open Graph protocol) 웹페이지가 소셜 미디어 등으로 공유 될때 우선적으로 활용되는 정보를 지정(공유시 북마크 미리보기 같은 느낌) 검색엔진에게 제공하는 정보 (SEO) 오픈 그래프 작성하기 html meta 태그의 property 속성 값으로 "og:속성값 과 content 속성 값을 쌍으로 지정하여 작성함 og:type : 페이지의 유형 (website, video.movie) og:..