Eggs Sunny Side Up
본문 바로가기
Web/HTML_CSS

[CSS] 포토카드

by guswn100059 2023. 3. 30.
<!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>Document</title>
    <style>
            .cardWrap{
                /* 전체 카드들을 item으로 */
                display: flex;
                /* item(카드) 줄바꿈 될 수 있게 */
                flex-wrap: wrap;
                /* item 공간 배분 */
                justify-content: space-around;
            }
            .iceWrap{
                background-color: lavenderblush;
                display: flex;
                /* 이미지와 글씨를 세로로 배치 */
                flex-direction: column;

                /* 텍스트 가운데 정렬(교차축 방향) */
                align-items: center;

                /* 안쪽 여백 주기 */
                padding: 20px 20px 0 20px;

                /* 바깥쪽 아래 여백 주기 */
                margin-bottom: 50px;

                border-radius: 190px;
            }
            .iceWrap:hover {
                background-color: lightskyblue;

                /* 그림자 넣는 속성 =>  box-shadow
                    x축방향 y축방향 흐림정도 퍼짐정도 색상
                */
                box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.1);
            }

            .imgSec{
                width: 300px;
                height: 300px;
                background-image: url(http://www.baskinrobbins.co.kr/upload/product/1743659352.png);
                background-size: cover;
                background-position: center;

            }

            .textSec{
                font-size: 1.5rem;
                font-weight: bold;
                font-style: oblique;
            }
            .iceImg1{
                background-image: url(http://www.baskinrobbins.co.kr/upload/product/1743659352.png);
            }
            .iceImg2{
                background-image: url(http://www.baskinrobbins.co.kr/upload/product/1727918465.png);
            }
            .iceImg3{
                background-image: url(http://www.baskinrobbins.co.kr/upload/product/1530778136.png);
            }
            .iceImg4{
                background-image: url(http://www.baskinrobbins.co.kr/upload/product/1670825733.png);
            }
            .iceImg5{
                background-image: url(http://www.baskinrobbins.co.kr/upload/product/1530776851.png);
            }
            .iceImg6{
                background-image: url(http://www.baskinrobbins.co.kr/upload/product/1670827275.png);
            }
    </style>
</head>
<body>
    <div class="cardWrap">
        <div class="iceWrap">
            <div class="imgSec iceImg1"></div>
            <p class="textSec">복숭아로 피치 올려</p>

        </div>
        <div class="iceWrap">
            <div class="imgSec iceImg2"></div>
            <p class="textSec">블랙 슈가 밤</p>

        </div>
        <div class="iceWrap">
            <div class="imgSec iceImg3"></div>
            <p class="textSec">레인보우 샤베트</p>

        </div>
        <div class="iceWrap">
            <div class="imgSec iceImg4"></div>
            <p class="textSec">초코넛 마카다미아</p>

        </div>
        <div class="iceWrap">
            <div class="imgSec iceImg5"></div>
            <p class="textSec">초코나무 숲</p>

        </div>
        <div class="iceWrap">
            <div class="imgSec iceImg6"></div>
            <p class="textSec">이상한 나라의 솜사탕</p>

        </div>
     
       
    </div>
</body>
</html>

'Web > HTML_CSS' 카테고리의 다른 글

[CSS] transition  (0) 2023.03.30
[CSS] 애니메이션  (0) 2023.03.30
[CSS] flex  (0) 2023.03.29
[CSS] float  (0) 2023.03.28
[CSS] overflow  (0) 2023.03.28

관련글

댓글

티스토리툴바