TIL6-HTML&CSS_6_컴포넌트

8619 단어 htmlcsshtmlcss

문제 : 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;
}

결과화면

백준 1543번 문서 검색(JAVA)
[빅데이터시스템] SparkSQL

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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