20210531 StarbucksClone05 : 배포(Netlify), 로그인 페이지, 모듈화 관리, Git(기본 명령어, reset, clone, branch 올리기), GitHub(pullRequest, 충돌, 로컬병합)
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을 ..
0210530 StarbucksClone04 : 반복 애니메이션(Gsap), 고정이미지 배경(background-attachment), 3D 애니메이션(rotateY, backface-visibility), 스크롤 위치 계산(ScrollMagic), 푸터, 특정 위치에 스크롤 위치 시키기(Gsap-scro..
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 ..
20210527 StarbucksClone01 : 오픈 그래프, fonts, Icons, 헤더 만들기( absolute를 활용한 정렬), 서브 메뉴(구분선, a태그 임시 href, JS로 요소 강제 focus 시키기, classList, setAttribute, 이벤트 함수로 CSS 제어)
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:..
