TIL#15 Color Hunt 컴포넌트 구현

luneah·2021년 11월 18일

CSS TIL html

HTML/CSS

목록 보기

5/5

🔥 Assignment

색상박스(1)는 class 속성값이 'colorBox'인 div로 구현하라.
#709fb0' 컬러값이 적힌 작은 박스(2)는 span 태그로 하되, 마우스가 색상박스에 올려졌을 때만 보여질 수 있도록 해주기 위해 hover 선택자와 opacity 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;
}