Wecolor Picker 컴포넌트 만들기

Assignment

1. 색상박스는 class 속성값이 'colorBox'인 div로 구현하기

 

2. #709fb0 컬러값이 적힌 작은 박스는 span태그로 하되, 마우스가 색상박스에 올려졌을 때만 보여질 수 있도록 해주기 위해 hover 선택자와 opacity CSS 속성 이용하기

 

3. heart 버튼과 업로드 날짜 텍스트는 하단에 div 태그를 만들어 flex 속성을 이용해 간격을 유지하기

 

4. heart 버튼은 <button> 태그를 이용하기

 

---

 

My Code

 

<div class="bgBox">
	<div class="colorBox">
    	<span>#709fb0</span>
    </div>
    
    <div class="bottomContent">
    	<button>
        	<i class="fa-solid fa-heart"></i>
            <span> &nbsp451</span>
        </button>
        <div class="day">3days</div>
    </div>
</div>

* {
	box-sizing: border-box;
}

.bgBox {
    margin: auto; // 중앙정렬
    width: 350px;
    height: 400px;
    border-radius: 5%;
    background-color: #ebeff3;
}

.colorBox {
  position: relative;
  top: 23px;
  left: 23px;
  width: 300px;
  height: 300px;
  border-radius: 5%;
  background-color: #71a0b0;
}

.colorBox span {
  opacity: 0;  // 2번과제 불투명도0 - 요소가 완전히 투명해 보이지 않음
  position: relative;
  top: 250px;
}  

.colorBox:hover span{
  opacity: 1; // 2번과제 불투명도1 - 요소가 불투명
  color: #fcfdfd;
  background-color: #578291;
  padding: 8px;
}

.bottom-content {
  margin-top: 35px;
  display: flex; // 3번과제 flex 속성 이용해 간격 유지하기
  justify-content: space-around;
  align-items: center;
}


button {
  padding:15px;
  font-size: 15px;
  border: 2px solid #BCBEC2;
  border-radius: 15%;
  background-color: #ebeff3;
}

 

문제점

3번에 flex 속성을 이용해 간격을 유지하기를 하였더니 과제사진과 비교했을때 좋아요와 날짜 엘리먼트 위치가 다름

추후에 해결해볼 문제 (3개월 후 2022.07월에 리팩토링 해보기)