본문 바로가기

전체 글

 (166)
브랜치(branch) 여태까지 master로 업로드했습니다. master는 줄기로 생각하면 됩니다. branch는 가지입니다. 예를 들면 starbucks 프로젝트를 만들었습니다. 로그인 기능 추가해서 로그인 가지를 만들 거고, 커피 소개 가지도 별도 존재하고, 사용자도 따로 관리합니다. 이렇게 별도로 개발하면서 기능적으로 문제없다고 판단할 때, 다시 master란 줄기로 합류(Merge)합니다. VSCode terminal에 돌아와서 git branch명령어를 입력하면 현재 로컬 환경에 모든 branch를 확인할 수 있습니다. git branch -a명령어를 입력하면 원격 branch도 같이 확인할 수 있습니다. 해석하자면, 원격/origin이란 별칭/master란 줄기 가 있다는 겁니다. git branch signin ..
Netlify 지속적인 배포 Netlify 홈페이지 Netlify Sign up with Github하세요. 모든 저장소들 다 netlift를 설치할 것인지 선택된 저장소만 설치할 것인지를 선택하세요. 개인적으로는 선택된 저장소에만 설치할 겁니다. starbucks 프젝만 일단 배포하겠습니다. 30초도 안 걸리고 새로운 페이지가 생성됩니다. 이 페이지는 배포된 사이트를 관리하는 통제타워를 보시면 됩니다. open production deploy를 클릭하면 사이트로 이동됩니다. 다른 사람도 해당 링크를 통해 볼 수 있습니다. github에 수정되는 내용이 있으면 netlify에서 수정내용을 갖고 와서 다시 배포하는 겁니다. netlify에서 왼쪽 deploys를 클릭합니다. deploy settings를 클릭합니다. 배포 설정이죠. ..
버전 생성과 업로드의 이해 우리 컴퓨터에 starbucks란 폴더가 있고 그것을 버전관리하기 위해 로컬에 git을 설치했습니다. git을 설치 후, 최초 한번은 꼭 해야할 설정들이 있었습니다. 위와 같습니다. 현재 프로젝트에서 버전 관리를 시작하겠다는 의미로 git init를 입력했습니다. 어떤 파일들을 업로드해야하는지 명시를 해야됩니다. git add 명령어를 입력했습니다. 업로드를 원한 파일 이름을 뒤에 작성해도 됩니다. 모든 파일 한꺼번에 올리려고 하면 . 을 뒤에 추가하면 됩니다. 이때 해당 파일들이 stage에 올라가 관리될 준비가 됐습니다. 여기서 commit은 버전을 생성하겠다는 뜻입니다. 버전 이름 생성은 -m을 통해 할 수 있습니다. 추후 또 main.js 파일을 작업해서 기존에 있는 프로젝트 생성에 commit을..
프로젝트 github로 업로드(push) 작업한 프로젝트를 열고 Terminal를 찾습니다. 방법은 두가지입니다. 첫째, 위에 메뉴란에서 Terminal > new terminal를 선택하면 됩니다. 둘 째, 하단 상태란에 대고 마우스가 화살표로 바뀌고 위로 올리면 terminal이 나옵니다. terminal에 표시된 프로젝트 경로가 일치되는지 확인하셔야 됩니다. 특히 나중에 버전이 많아지면 이거를 꼭 확인하세요. terminal에 git init 명령어를 입력한 후 enter를 칩니다. 하단 상태란 왼쪽에 master표시가 나타나면 다음 스텝 진행하세요. 만약 상태란에 master표시 바로 안 뜬다면 왼쪽 메뉴바 3번째 아이콘을 클릭한 후 위에 새로고침을 눌러주세요. 이때 하단 상태란에 master가 나올 겁니다. git config --gl..
git 설치 git(깃)은 컴퓨터 파일의 변경사항을 추적하고 여러 사용자들 간에 해당 파일 작업을 소율하기 위한 대표적인 버전 관리 시스템(VCS)입니다. git 설치 git사이트에서 프로그램을 다운로드하세요. windows검색창에서 cmd를 입력해서 명령 프롬프트를 열어줍니다. git --version 란 명령어를 입력한 후 enter를 칩니다. 정상적으로 잘 설치됐다면 버전을 표시할 겁니다. github signup을 통해 계정을 만들어줍니다. 앞으로 git을 활용한 버전 관리는 github를 통해 진행될 예정입니다.
스타벅스 클론(15) - 페이지 상단으로 이동(ScrollTo) 버튼을 클릭하면 화면 최상단으로 올라가는 기능을 실현할 수 있습니다. html 파일입니다. 버튼이 기타 요소보다 위에 있어야 해서 z-index를 설정했습니다. js파일입니다. 지난번 뱃지에서 gsap을 사용했었고, 그 코드를 사용하겠습니다. 배지가 보이면 버튼이 숨겨져야 합니다. 그리고 해당 버튼에다 scrollTo 메소드를 적용하면 됩니다. 주의해야할 게 뱃지를 작업했을 때 gsap의 cdn이 scrollTo 기능을 포함하지 않습니다. scrollTo기능 포함한 cdn을 또 불러 와야 합니다.
스타벅스 클론(14) - 푸터 푸터부분입니다. 로고 위에 2023년 숫자는 수동적으로 입력하기 귀찮을 수 있어서 js를 통해 자동 계산할 수 있게 할 예정입니다. html 파일입니다. 특수문자(©)는 여기를 참조하세요. span 가운데 작은 점(·)이 있습니다. ::before에서 만들었습니다. js에서 올해의 연도를 계산해줄 수 있습니다. 위를 참고해서 작성하시면 됩니다.
스타벅스 클론(13) - 다중 요소 슬라이드 전에 비슷한 효과를 만들었습니다. 이번에도 swiper 라이브러리를 통해 위와 같은 효과를 만들어보겠습니다. html파일입니다. css파일입니다. js파일에서 swiper 라이브러리를 사용했습니다. 자동재생이 true, 순환재생도 true입니다. 요소들 사이에 간격이 30px이며, 요소 먼저 5개를 보여줍니다. 그리고 양쪽 화살표는 navigation에서 지정되었습니다.
JS - scrollMagic 라이브러리 scrollMagic 라이브러리를 사용해서 페이지가 일정 위치에 도달하면 이벤트 발생시키는 라이브러리입니다. scrollMagic cdn참조 scrollMagic demo 참조 section.scroll-spy 값이 있는 요소들을 모두 찾아서 spyEls에 할당합니다. forEach메소드를 사용해서 각각의 요소를 반복하게 함수를 실행될 겁니다. ScrollMagic뒤에 체이닝방식으로 메소드들을 연결합니다. .Scene() 메소드는 특정한 요소를 감시하는 옵션을 지정해줍니다. triggerElement 속성은 감시한 요소를 지정하고, triggerHook 속성은 뷰포트의 어느 위치에 도달한지 감시하는 겁니다. 뷰포트 위에는 0, 하단에는 1인 값입니다. .setClassToggler() 메소드는 어떤 클래..
스타벅스 클론(12) - 스트롤 위치 계산 애니메이션 위에 gif에서 스크롤이 내려오면 애니메이션 효과를 나타납니다. 이번 글은 이 효과를 만들어보겠습니다. html은 간단해서 별도 설명 안 하겠습니다. 배치를 했습니다. .picture은 동글게 나와야 되서 border-radius에 50%값을 주면 해당 효과가 나옵니다. 더 자연스럽게 그림자 효과도 box-shadow로 추가했습니다. js파일에서는 scrollMagic 라이브러리를 사용해봤습니다. section.scroll-spy 값이 있는 요소들을 모두 찾아서 spyEls에 할당합니다. forEach메소드를 사용해서 각각의 요소를 반복하게 함수를 실행될 겁니다. ScrollMagic뒤에 체이닝방식으로 메소드들을 연결합니다. .Scene() 메소드는 특정한 요소를 감시하는 옵션을 지정해줍니다. trigg..

티스토리툴바