まず、完成した作品から展示してスタートする位置づけです.

Project Overview

HTMLとCSSでKakaoTalkのNo Mad Coker CokaoTalk講座をクローニングして粘り強くアピールしました.🤓
講座によってコーディングされていますが、HTMLやCSSの各方面を直接体験することで、よりよく理解できるので満足です!覚えたいことを整理してください.

こうぞう

Main-Fiendsタブ

メインChatsタブ
- Chatting

ホームページ-Findタブ

メインMoreタブ
-settingsタブ

覚えたいこと

アイコンの挿入

KakaoTalkは文字ではなくアイコンがほとんどなので、いろいろなアイコンが必要です.
すべてのアイコンはFont Awesomeによって検索され、使用されます.
アイコンの使い方も簡単(アイコン署名-ソースコードをクリックして貼り付け)で、無料アイコンも多く、料金を払う必要がなく十分です.

BEMメソッド

Block,Element,Modifierの略.
クラス名をBlock--Element__Modifier形式で設定したCSSメソッド論である.
最初は授業名が長すぎて...行きますか.と思っていたのですが、クラスが多様化するにつれて、自分の欲しいものが一目で見つけられるので満足です.

例えば、上の箱は実際には下のコードで構成されています.friends-screen__channelからuser-component__title--not-boldまでは少し長いが,直感的なクラス名を用いた.

<div class="friends-screen__channel">

  <div class="friends-screen__channel__channel-header">
  <span>Channel</span>
  <i class="fas fa-chevron-up fa-xs"></i>
  </div>
                        
  <div class="user-component">
  
    <div class="user-component__column">
    <img src="https://i.pinimg.com/originals/ae/61/c4/ae61c4371df42b13541c045a814673ab.jpg" class="user-component__avatar--sm" />
      <div class="user-component__text">
      <h4 class="user-component__title--not-bold">Channel</h4> 
      </div>
    </div>

    <div class="user-component__column">
    <span>2</span>
    <i class="fas fa-chevron-right fa-xs"></i>
    </div> 
    
  </div>
</div>
         

Animation

Javascriptを使用せずにCSSのみを使用して要素をアニメーション化するプロパティ.
Transitionとは異なり、キー単位でアトリビュートを変更できるため、より洗練された効果が得られます.すぐに见える効果がとても面白くて不思议なのでボリュームに気をつけて….課外授業のほか、TCP Schoolの関連投稿も参考にした.とてもきれいに片付けられています!

画面切り替え効果

ease-in-outanimation-delay属性により、Kakao Talkの初期画面が徐々に消え、画面が変換される.最初のラベルFriendsラベルを開いたときにのみ実行され、Kakao Talkを最初に実行したときにロードされる効果を与えます.

  @keyframes hidesplashscreen {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
      visibility: hidden;
    }
  }
  
  #splash-screen {
    background-color: rgb(255, 235, 15);
    position: absolute;
    height: 100vh;
    width: 100vw;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 80px;
    animation: hidesplashscreen 0.3s ease-in-out forwards;
    animation-delay: 1s;
}

1つずつ昇るボタン。

各ボタンにはtransform: translateY(90px)が設定されており、上から上昇させ、各要素に異なるanimation-delay属性を付与し、一つ一つ表示されます.

@keyframes appearbtnanimation {
  from {
    transform: translateY(90px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.nav__btn {
  transform: translateY(90px);
  opacity: 0;
  animation: appearbtnanimation 0.5s ease-in-out forwards;
}

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

.nav__btn:nth-child(3) {
  animation-delay: 0.5s;
}
.nav__btn:last-child {
  animation-delay: 0.8s;
}

回転する歯車

ギアアイコンがhoverの状態にある場合(カーソルが止まっている場合)rotateZ(360deg)スクロールの効果が得られました.infinite設置までどんどん転がっていきます!

@keyframes rotateCog {
  from {
    transform: none;
  }
  to {
    transform: rotateZ(360deg);
  }
}

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

ときめきの心

hoverの状態でキーフレームを0%-50%-100%に分け、50%でハートが赤く+大きくなり(transform:scaleを使用)、元の姿に戻ります.Heartが先に止まるとちょっと残念ですがここでもinfinite属性が適用されます

@keyframes heartbeat {
  0% {
    color: white;
    transform: none;
  }
  50% {
    color: tomato;
    transform: scale(1.3);
  }
  100% {
    color: white;
    transform: none;
  }
}

.open-post__heart-count:hover i {
  will-change: transform;
  animation: heartbeat 1s linear infinite;
}

反応式Web向けメディアQuery

携帯電話の画面サイズに合わせてクローン化されているので、Media Queryで予め設定されているサイズより画面が大きいとYourScreen is Super big 🤦♀️画面が表示されます.
以下の条件@media screen and (max-width: 645px)を満たすと、画面サイズが適切であり、no-mobile画面が見えない.
=widthが645 pxより大きいと、画面が大きすぎるno-mobile画面が表示されます.

#no-mobile {
  position: absolute;
  z-index: 99;
  height: 100vh;
  background-color: rgb(255, 235, 15);
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  top: 0;
}

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

講義によると、HTMLとCSSのみを使ったクローンだが、CSSの魅力に深く惹かれるきっかけとなった.私のコードで直接結果を見た経験はとても面白くて刺激的でした...!今はまだ静的なページを作成しているだけですが、Javascriptを加えると、どんなに魅力的になるか楽しみです.