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>❤ 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차 : 연욱님께 여쭤봄, 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를 많이 써보면서 친숙해져야 겠다. 😅