간단한 colorBox만들기

최정민·2021년 7월 8일
CSShtml
0

HTML & CSS

목록 보기
8/9
post-thumbnail

html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <script src="https://kit.fontawesome.com/7ab9e78da3.js" crossorigin="anonymous"></script>
        <link href="stylecolor.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="all">
            <div class="colorBox1">
                <div class="colorBox2"></div>
                <span class="smallBox">#709fb0</span>
                <div class="bottom">
                <button class="button"><i class="fas fa-heart heart">&nbsp;&nbsp;451</i></button>
                <span class="uploadDay">3days</span>
                </div>
            </div>        
       </div>
    </body>
</html>

CSS

* {
    box-sizing: border-box;
  }
.all {
    width: 500px;
    margin: 0 auto;
	height: 100vh; 
    text-align: center;  
}
.colorBox1{
    background-color: #EBEFF3;
    width: 380px;
    height: 430px;
    margin:100px auto;
    position: relative;     /*position: absolute에 기준이 되는 포지션*/
    border-radius: 10px;
}
.colorBox2{
    background-color: #719FB0;
    width: 330px;
    height: 300px;
    position: absolute;
    top: 25px;
    left: 25px;
    border-radius: 13px;
    }
.smallBox{
    background-color:#578da1;
    color: white;
    position: absolute;
    bottom: 115px;
    left: 25px;
    width: 100px;
    height: 30px;
    opacity: 0;
    padding-top: 5px;
}
.colorBox1:hover .smallBox{  /*마우스 올리면 */
    opacity: 1;     /*0이었던 opacity가 1이 됨 */
}
.button {
    height: 45px;
    width: 100px;
    padding: 5px;
    border-radius: 8px;
    border: 1.5px solid #9FA2A5;
}
.bottom{
    padding-top: 360px;
    padding-right: 25px;
    padding-left: 25px;
    justify-content: space-between;
    display: flex;
}
.heart, .uploadDay{
 font-size: 20px;   
}

👇🏻 결과

  • 컬러박스에 마우스 올라갔을때
profile
최정민
나 다운 것, 가장 아름다운 것
이전 포스트

간단한 Weegle검색창만들기

다음 포스트

CSS Flex(Flexible Box)

0개의 댓글