Wecolor Picker 컴포넌트

15324 단어 CSShtmlCSS

Color Hunt 컴포넌트 만들기 가이드

html, css를 이용해 아래와 같이 구현해 보세요.
1. 색상박스는 class 속성값이 'colorBox'인 div로 구현해주세요.
2. #709fb0' 컬러값이 적힌 작은 박스는 span 태그로 하되, 마우스가 색상박스에 올려졌을 때만 보여질 수 있도록 해주기 위해 hover 선택자와 opacity CSS 속성을 이용해 봅시다.
3. heart 버튼과 업로드 날짜 텍스트는 하단에 div 태그를 만들어 flex 속성을 이용해 간격을 유지해주세요.
4. heart 버튼은 <button> 태그를 이용해 주세요.

<내가 작성한 코드 >

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>picker</title>
  <link rel = "stylesheet " href="예시2.css">
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">



</head>


<body>
  <div class="colorBox">
    

    <div class="innerBox"></div>
    <div class="hexBox"><span>
      #709fb0
    </span></div>
 
    <div class="outBox">
    <button>&#10084; 451</button>
    <a>3days</a>
    
  </div>
  </div>

 
</body>
</html>


.colorBox{
  width: 384px; 
  height:431px;
  background-color: #EBEFF3;
  border-radius: 10px;
}

.innerBox{
  width: 338px;
 height: 300px;
 
    
 background-color: #709fb0;
display: inline-block;
border-radius: 10px;
position: absolute;
left: 30px;
top: 30px; }



button{
  width: 80px;
  height:50px ;
  position: absolute;
  bottom: 355px;
  left:35px;
  font-size: 20px;
  font-weight: 565px;
  border-radius: 5px;
  border-color: #EBEFF5;
}

span{
 position: absolute;
 bottom: 5px;
 color: white; 
 background-color:rgba(99, 96, 96, 0.6)
}
.hexBox {
  width: 338px;
  height: 300px;
  position: absolute;
  left: 30px;
  top: 30px;
  opacity: 0;
}

.hexBox:hover {
  opacity: 1;
}



.outBox a{
  position: absolute;
  bottom: 355px;
  right: 1200px;
  font-weight: bold;
  font-size: large;
}

< 수정한 코드 >

  1. HTML < div class="colorBox"> 작성해놓고 다시
    아래 < div> 태그 다시 만들어서 외부박스 css 적용함
    결론은 < div class="colorBox"> 아무런 역할 없이 방치함
    그래서 css를 box로 줬던것을 지우고 colorbox로 적용했다.

-> 구조를 위에서 아래로 다시 한번 보면서 놓친 부분
보기

2. 90% 만들어 놓고 #709b0 부분 hover 부분 이해 부족

문제는 마우스가 올렸을때만 글씨가 보이는건데
나는 반대로 마우스를 올리면 글씨가 더 흐릿해지고
마우스 없을때 뚜렷하게 보여서 하루동안 고민하고 있었음

  • 해결 1차 : 연욱님께 여쭤봄, innerBox부분을 부모 자식 노드로
    연관 지어서 hover를 주어야 됨을 이해함, 이전에는 #709b0부분만
    < span> 태그줘서 일부분 사라지게 하는 문제인지 알았다.


  • 해결 2차: innerBox 부분을 hover를 줘도 색상 부분은 사라지지
    않아서 동기님께 여쭤봤다. hover를 나는 마우스 올렸을때만
    지정하고 마우스가 없는 상태에 hover를 지정을 안했었음을 깨달음

    색상 지정할때 rgba를 써본적이 없었다. 그동안 hex와 색상명만
    사용했었음, rgba 쓰면 마지막에 색상을 지정하면서 투명도를 같이 작성 할수 있다는 팁을 얻음

    ex) rgba(red,green,blue,alpha)
    rgb 값에 alpha 투명도가 추가된것
    opacity 다른 부분에도 적용 가능
    → css 경험치 부족


  • 하단 하트 버튼과 3days 부분 flex 줘야 되는데 position
    이 익숙해서 position으로 위치 설정함
    ➡flex 개념을 다시 익혀야 함

  • display 속성도 다시 공부, inline-block;

✍ 이번주 HTML/css rep.it 문제 풀면서 가장 오래 고민 3일 고민했던 문제이다.
그리고 css 보완 할 점을 많이 발견했다. css를 많이 써보면서 친숙해져야 겠다. 😅

[Redux] 기초
가위바위보 part2

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage