노마드 코더 - 코코아톡 클론코딩 연습(6)

CLONING TIME

 

 

33. Write Message Input

reply 창 만들기

2개의 column으로 구성

▶첫 번째는 플러스 아이콘

▶두 번째는 인풋, 이모지, 버튼

이때 두 번째 column의 input의 width를 넓혀주기 위해서는 부모인 두 column과 reply에 width를 주어야 한다.

두 번째 column에서 이모지와 버튼을 옮기기 위해 position: absolute; 를 사용한다.

 

+)

너비 부분이 있어서 100%라고 말했기 때문에 부모 컨테이너에 너비가 필요했지만 300px 또는 500px와 같이 수동으로 입력 너비를 설정하면 부모 컨테이너 너비를 설정할 필요가 없다.

 

 

34. Splash Screen part One

100vh는 화면 높이의 100%, 100vw는 화면 너비의 100%이다.

 

100vh = The screen's height

100vw = The screen's width

100% = 100% of the PARENT

 

모든 layer의 위로 오게 하기 위해서 body를 기준으로 position: absolute;

 

 

35. Splash Screen part Two

CSS의 keyframes 애니메이션으로 splash 애니메이션을 줄 수는 있지만, 완벽하게 없어진 상태를 만들 수는 없다.

→ CSS에서 visibility: hidden; 으로 HTML을 화면, 마우스로부터 숨길 수는 있어도 완전히 사라지게 하지 못한다.

(안 보이게 할 순 있지만 실제로는 존재하고 있는 상태이기 때문에 완전히 사라지게 하려면 JavaScript가 필요하다.)

@keyframes hideSplashScreen {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

 

애니메이션의 마지막 값을 기억하고 싶다면 forwards라는 단어를 사용해야 한다.

→ 마지막 keyframes를 기억한다.

animation-delay: 2s; 를 이용해 애니메이션 시작을 2초간 지연시킬 수 있다.

#splash-screen {
  background-color: var(--yellow);
  position: absolute;
  height: 100vh;
  width: 100vw;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 132px;
  animation: hideSplashScreen 0.3s ease-in-out forwards;
  animation-delay: 2s;
}

 

 

36. Navigation Animation

애니메이션을 이용해 nav-bar 디자인

@keyframes notificationAnimation {
  0% {
    transform: none;
  }
  50% {
    transform: translateY(-5px) rotateY(360deg);
  }
  100% {
    transform: none;
  }
}

.nav__notification {
  position: absolute;
  left: 15px;
  bottom: 15px;
  animation: notificationAnimation 2s ease-in-out infinite;
}

@keyframes appearBtnAnimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.nav__btn {
  opacity: 0;
  transform: translateY(50px);
  animation: appearBtnAnimation 0.3s ease-in-out forwards;
}

.nav__btn:nth-child(2) {
  animation-delay: 0.2s;
}

.nav__btn:nth-child(3) {
  animation-delay: 0.4s;
}

.nav__btn:last-child {
  animation-delay: 0.6s;
}

 

 

37. More Animations

.screen-header__icons .fa-cog라고 적는 이유: 그냥 fa-cog로 적으면 이 아이콘이 들어간 모든 곳에 적용이 되기 때문에!

.screen-header__icons .fa-cog:hover {
  animation: rotateCog 1s linear infinite;
}

 

will-change는 애니메이션이 좀 더 부드럽게 동작할 수 있게 한다.

→ 브라우저에게 어떤 것이 변할 것인지 예고해주는 것! 문제없이 애니메이션이 작동되는 경우에 will-change를 굳이 사용하지 않아도 된다.

 

 

38. Animating Chats Screen

.reply:focus-within는 "reply 내부에 어떤 element가 focus 되어 있다면"이라는 뜻

visibility: hidden은 아예 클릭이 안되게 한다. / opacity: 0은 투명해지지만 클릭이 되게 한다.

 

39. Recap

.reply:focus-within input {
width: 96vw;
transform: translateX(-13%) translateY(-80px);

→

.reply input:focus {
width: 96vw;
transform: translateX(-13%) translateY(-80px);

 

 

40. No Mobile Media Query

큰 화면 접속 방지 (media query 사용)

#no-mobile {
  position: absolute;
  z-index: 99;
  height: 100vh;
  width: 100vw;
  background-color: var(--yellow);
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  font-size: 32px;
}

@media screen and (max-width: 645px) {
  #no-mobile {
    display: none;
  }
}

---

개인적인 사정으로 거의 한 달 동안 코딩 공부를 못했다. 그동안 익혔던 감이 많이 사라진 느낌이다... 한 달 전에 끝낸 프로젝트를 이제 와서 정리하다 보니 굉장히 헷갈린다. 역시 꾸준히 하는 게 제일 중요하다는 것을 다시 한번 느꼈다..!