저번에 기본적인 뼈대는 다 만들어 놓고 오늘은 계속 애니매이션을 추가시키고 github에 올려서 url을 받아서 공유 할 수 있는 기능 까지 배웠다.
우선 마지막에 자꾸 open-post가 헤더와 스테이터스바와 겹치는 현상이 발생해서 당황했는데 일단은 z-index로 해결하였다. z-index 수가 클수록 위로 온다.
@keyframes 를 아주 많이 사용했고 from-to, 0%~100%모두 골고루 사용했다. 어떤 애니메이션을 만들고 그 마지막 상태를 유지하고 싶다면 animation: forwards를 추가하면 된다는것도 배웠다.
그리고 visibility: hidden속성을 쓰면 어떤 div 자체를 클릭이 아예 안되게 무시해 버릴 수 있다. 이것으로 코코아톡의 로딩 화면을 만들었다.
여러가지 애니메이션들을 만들었지만 가장 기억에 남는 것 그리고 선생님이 가장 강조하신것은 github에 어떻게 올리고 관리하고 배포하는지였다.
내 웹페이지가 back-end 없이 HTML,CSS,JS로만 구성 돼 있고, githun의 레지스토리가 public이라면 github로 부터 무료 url을 받아 올 수 있는데 이때 git-desktop에서 gh-pages라는 branch를 만들고 이것을 push하면 된다. 나중에 수정할 일이 생기면 main branch에서 수정하고 github에 push한 뒤에 gh-pages에서 branch를 선택하고 Update from main을 선택한 뒤 push 해주면 나의 url에 있는 코드가 수정되게 된다.
https://syado95.github.io/kokoa-clone-2021/ 내가 만든 코코아톡 클론 코딩
아직은 겉모습만 따라할 정도로 많이 부족하지만 앞으로 더 많은 걸 만들어보면서 경험과 실력을 쌓겠다.
