TIL#15 Color Hunt構成部品の実装

13866 ワード
TIL CSS html テキストリンク

🔥 Assignment


  • 色枠(1)はclass属性値が「colorBox」のdivで実現される.
  • #709 fb 0'の色値が付いた小さなボックス(2)をspanラベルとして、hoverセレクタと不透明CSSプロパティを使用して、マウスが色ボックスにぶら下がっているときにのみ表示されるようにします.
  • heartボタンとアップロード日テキストは、下部にdivラベルを作成し、flexプロパティを使用して間隔を維持します.
  • heartボタンは<button>ラベルを使用します.

    • 🏁 My Code


    [HTML]

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="https://kit.fontawesome.com/20635ad1aa.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="wrap">
      <div class="colorBox">
        <span class="color">#709fb0</span>
      </div>
      <div class="tag">
        <button><i class="fas fa-heart"></i> &nbsp;&nbsp;451</button>   <!-- &nbsp 이용해 공백 추가-->
        <div>3days</div>
      </div>
    </div>
  </body>
</html>

    [CSS]

    * {
  box-sizing: border-box;
}

.wrap {
  width: 400px;
  height: 470px;
  border-radius: 10px;
  background-color: #EBEFF3;
  position: relative;
}

.colorBox {
  width: 350px;
  height: 350px;
  border-radius: 10px;
  background-color: #70A0B0;
  position: relative;		/* 부모 속성에 relative 설정 */
  top: 25px;
  left: 25px;
}

span {
  position: absolute;     /* 자식 속성에 absolute 설정 */
  top: 310px;
  left: 0px;
  padding: 5px 10px;
  background-color: #568390;
  color: white;
  opacity: 0;		/* colorBox에 마우스 없을 때 투명도 100% */
}

.colorBox:hover span {
  opacity: 1; 		/* colorBox에 마우스 올렸을 때 투명도 0% */
}

.tag {
  font-size: 20px;
  margin: 50px 25px;
  display: flex;
  justify-content: space-between;	/* 버튼과 날짜 사이 간격 조정 */
  align-items: center;
}

button {
  padding: 12px;
  font-size: 18px;
  border-radius: 10px;
  border: 1px solid rgb(180, 180, 180);
  background-color: #EBEFF3;
}

    ✔️ Result

  • 実装画面
  • サスペンション時表示<span> #709fb0 </span>

    • What I Learned

  • flexプロパティとprevident-content、align-itemsを使用して、要素の位置を調整できます.
  • の不透明度を利用して、サスペンション時に透明度を調節することができます.
    • .NET練習平方根計算
    接続リスト