TIL6-HTML&CSS_6_컴포넌트

이동하·2020년 12월 17일

htmlcss

HTML, CSS

목록 보기

6/7

문제 : Color Hunt 컴포넌트를 만들자 !

조건

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

문제풀이

접근

하나의 큰 div에 element를 구성
position 속성에서 relative와 absolute를 활용
opacity 속성 활용
색상박스에 커서가 갔을 때 컬러값이 보일 수 있도록 hover 속성에 알맞은 selector 지정
flex 속성을 가진 두 개의 element의 간격을 제어하기 위해 justify-content 활용

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"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"/>
</head>

<body>
    <div class="out-box">
        <div class="colorBox">
            <span class="color">#709fb6</span>
        </div>
        <div class="emo">
            <button><i class="fas fa-heart"></i> 451</button>
            <div>3days</div>
        </div>
    </div>
</body>


</html>

CSS

* {
    box-sizing: border-box;
}

.out-box {
    width: 400px;
    height: 500px;
    border-radius: 10px;
    background-color: #EBEFF3;
    position: relative;
}

.colorBox {
    width: 350px;
    height: 350px;
    border-radius: 10px;
    background-color: #719FB0;
    position: relative;
    top: 30px;
    left: 25px;
}

span {
    position: relative;
    top: 310px;
    left: 0px;
    background-color: #578291;
    color: white;
    opacity: 0;
}

.colorBox:hover span{
    cursor: pointer;
    opacity: 1;
}

button {
    padding: 5px;
    font-size: 15px;
}

.emo {
    font-size: 20px;
    margin-top: 40px;
    width: 100%;
    display: flex;
    justify-content: space-around;
}