728x90
๋ฐ˜์‘ํ˜•
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>์—์–ด๋น„์•ค๋น„</title>
    <link rel="stylesheet" href="240322_์—์–ด๋น„์•ค๋น„.css">
    <script src="https://kit.fontawesome.com/265655aec0.js" crossorigin="anonymous"></script>
</head>
<body>
    <!-- &์น˜๋ฉด ํŠน์ˆ˜๋ฌธ์ž ์ž…๋ ฅํ•  ์ˆ˜ ์žˆ๋Š” ์ฐฝ ๋œธ !! <div> ์ด๋Ÿฐ ๊ธ€์ž ์ ๊ณ ์‹ถ์œผ๋ฉด ์ฐธ๊ณ  -->
    <main>
        <div class="product-container">
            <div>
                <!-- ์ด๋ฏธ์ง€๊ฐ€ ํ‘œ์‹œ๋˜๋Š” ๊ณณ -->
                <section class="product-img-container">
                    <div class="product-img"></div>
<!--                    <i class="fa-solid fa-heart"></i>-->
                </section>
                <!-- ์ƒํ’ˆ ์„ค๋ช… -->
                <section class="product-info-section">
                    <div class="addr">
                        <span>ํ•œ๊ตญ ์šฉ์‚ฐ๊ตฌ</span>
                        <span><i class="fa-solid fa-star"></i>4.89</span>
                    </div>
                    <div class="view">
                        ๊ณต์› ๋ฐ ๋„์‹ฌ ์ „๋ง
                    </div>
                    <div class="date"> 5์›” 27์ผ ~ 6์›” 1์ผ </div>
                    <div class="price">
                        <span>&#8361;139,224</span>
                        <span>/๋ฐ•</span>
                    </div>
                </section>
            </div>
            <div>
                <!-- ์ด๋ฏธ์ง€๊ฐ€ ํ‘œ์‹œ๋˜๋Š” ๊ณณ -->
                <section class="product-img-container">
                    <div class="product-img"></div>
                    <i class="fa-solid fa-heart"></i>
                </section>
                <!-- ์ƒํ’ˆ ์„ค๋ช… -->
                <section class="product-info-section">
                    <div class="addr">
                        <span>ํ•œ๊ตญ ์šฉ์‚ฐ๊ตฌ</span>
                        <span><i class="fa-solid fa-star"></i>4.89</span>
                    </div>
                    <div class="view">
                        ๊ณต์› ๋ฐ ๋„์‹ฌ ์ „๋ง
                    </div>
                    <div class="date"> 5์›” 27์ผ ~ 6์›” 1์ผ </div>
                    <div class="price">
                        <span>&#8361;139,224</span>
                        <span>/๋ฐ•</span>
                    </div>
                </section>
            </div>
            <div>
                <!-- ์ด๋ฏธ์ง€๊ฐ€ ํ‘œ์‹œ๋˜๋Š” ๊ณณ -->
                <section class="product-img-container">
                    <div class="product-img"></div>
                    <i class="fa-solid fa-heart"></i>
                </section>
                <!-- ์ƒํ’ˆ ์„ค๋ช… -->
                <section class="product-info-section">
                    <div class="addr">
                        <span>ํ•œ๊ตญ ์šฉ์‚ฐ๊ตฌ</span>
                        <span><i class="fa-solid fa-star"></i>4.89</span>
                    </div>
                    <div class="view">
                        ๊ณต์› ๋ฐ ๋„์‹ฌ ์ „๋ง
                    </div>
                    <div class="date"> 5์›” 27์ผ ~ 6์›” 1์ผ </div>
                    <div class="price">
                        <span>&#8361;139,224</span>
                        <span>/๋ฐ•</span>
                    </div>
                </section>
            </div>
            <div>
                <!-- ์ด๋ฏธ์ง€๊ฐ€ ํ‘œ์‹œ๋˜๋Š” ๊ณณ -->
                <section class="product-img-container">
                    <div class="product-img"></div>
                    <i class="fa-solid fa-heart"></i>
                </section>
                <!-- ์ƒํ’ˆ ์„ค๋ช… -->
                <section class="product-info-section">
                    <div class="addr">
                        <span>ํ•œ๊ตญ ์šฉ์‚ฐ๊ตฌ</span>
                        <span><i class="fa-solid fa-star"></i>4.89</span>
                    </div>
                    <div class="view">
                        ๊ณต์› ๋ฐ ๋„์‹ฌ ์ „๋ง
                    </div>
                    <div class="date"> 5์›” 27์ผ ~ 6์›” 1์ผ </div>
                    <div class="price">
                        <span>&#8361;139,224</span>
                        <span>/๋ฐ•</span>
                    </div>
                </section>
            </div>
            <div>
                <!-- ์ด๋ฏธ์ง€๊ฐ€ ํ‘œ์‹œ๋˜๋Š” ๊ณณ -->
                <section class="product-img-container">
                    <div class="product-img"></div>
                    <i class="fa-solid fa-heart"></i>
                </section>
                <!-- ์ƒํ’ˆ ์„ค๋ช… -->
                <section class="product-info-section">
                    <div class="addr">
                        <span>ํ•œ๊ตญ ์šฉ์‚ฐ๊ตฌ</span>
                        <span><i class="fa-solid fa-star"></i>4.89</span>
                    </div>
                    <div class="view">
                        ๊ณต์› ๋ฐ ๋„์‹ฌ ์ „๋ง
                    </div>
                    <div class="date"> 5์›” 27์ผ ~ 6์›” 1์ผ </div>
                    <div class="price">
                        <span>&#8361;139,224</span>
                        <span>/๋ฐ•</span>
                    </div>
                </section>
            </div>
            <div>
                <!-- ์ด๋ฏธ์ง€๊ฐ€ ํ‘œ์‹œ๋˜๋Š” ๊ณณ -->
                <section class="product-img-container">
                    <div class="product-img"></div>
                    <i class="fa-solid fa-heart"></i>
                </section>
                <!-- ์ƒํ’ˆ ์„ค๋ช… -->
                <section class="product-info-section">
                    <div class="addr">
                        <span>ํ•œ๊ตญ ์šฉ์‚ฐ๊ตฌ</span>
                        <span><i class="fa-solid fa-star"></i>4.89</span>
                    </div>
                    <div class="view">
                        ๊ณต์› ๋ฐ ๋„์‹ฌ ์ „๋ง
                    </div>
                    <div class="date"> 5์›” 27์ผ ~ 6์›” 1์ผ </div>
                    <div class="price">
                        <span>&#8361;139,224</span>
                        <span>/๋ฐ•</span>
                    </div>
                </section>
            </div>
            <div>
                <!-- ์ด๋ฏธ์ง€๊ฐ€ ํ‘œ์‹œ๋˜๋Š” ๊ณณ -->
                <section class="product-img-container">
                    <div class="product-img"></div>
                    <i class="fa-solid fa-heart"></i>
                </section>
                <!-- ์ƒํ’ˆ ์„ค๋ช… -->
                <section class="product-info-section">
                    <div class="addr">
                        <span>ํ•œ๊ตญ ์šฉ์‚ฐ๊ตฌ</span>
                        <span><i class="fa-solid fa-star"></i>4.89</span>
                    </div>
                    <div class="view">
                        ๊ณต์› ๋ฐ ๋„์‹ฌ ์ „๋ง
                    </div>
                    <div class="date"> 5์›” 27์ผ ~ 6์›” 1์ผ </div>
                    <div class="price">
                        <span>&#8361;139,224</span>
                        <span>/๋ฐ•</span>
                    </div>
                </section>
            </div>
            <div>
                <!-- ์ด๋ฏธ์ง€๊ฐ€ ํ‘œ์‹œ๋˜๋Š” ๊ณณ -->
                <section class="product-img-container">
                    <div class="product-img"></div>
                    <i class="fa-solid fa-heart"></i>
                </section>
                <!-- ์ƒํ’ˆ ์„ค๋ช… -->
                <section class="product-info-section">
                    <div class="addr">
                        <span>ํ•œ๊ตญ ์šฉ์‚ฐ๊ตฌ</span>
                        <span><i class="fa-solid fa-star"></i>4.89</span>
                    </div>
                    <div class="view">
                        ๊ณต์› ๋ฐ ๋„์‹ฌ ์ „๋ง
                    </div>
                    <div class="date"> 5์›” 27์ผ ~ 6์›” 1์ผ </div>
                    <div class="price">
                        <span>&#8361;139,224</span>
                        <span>/๋ฐ•</span>
                    </div>
                </section>
            </div>
            <div>
                <!-- ์ด๋ฏธ์ง€๊ฐ€ ํ‘œ์‹œ๋˜๋Š” ๊ณณ -->
                <section class="product-img-container">
                    <div class="product-img"></div>
                    <i class="fa-solid fa-heart"></i>
                </section>
                <!-- ์ƒํ’ˆ ์„ค๋ช… -->
                <section class="product-info-section">
                    <div class="addr">
                        <span>ํ•œ๊ตญ ์šฉ์‚ฐ๊ตฌ</span>
                        <span><i class="fa-solid fa-star"></i>4.89</span>
                    </div>
                    <div class="view">
                        ๊ณต์› ๋ฐ ๋„์‹ฌ ์ „๋ง
                    </div>
                    <div class="date"> 5์›” 27์ผ ~ 6์›” 1์ผ </div>
                    <div class="price">
                        <span>&#8361;139,224</span>
                        <span>/๋ฐ•</span>
                    </div>
                </section>
            </div>
            <div>
                <!-- ์ด๋ฏธ์ง€๊ฐ€ ํ‘œ์‹œ๋˜๋Š” ๊ณณ -->
                <section class="product-img-container">
                    <div class="product-img"></div>
                    <i class="fa-solid fa-heart"></i>
                </section>
                <!-- ์ƒํ’ˆ ์„ค๋ช… -->
                <section class="product-info-section">
                    <div class="addr">
                        <span>ํ•œ๊ตญ ์šฉ์‚ฐ๊ตฌ</span>
                        <span><i class="fa-solid fa-star"></i>4.89</span>
                    </div>
                    <div class="view">
                        ๊ณต์› ๋ฐ ๋„์‹ฌ ์ „๋ง
                    </div>
                    <div class="date"> 5์›” 27์ผ ~ 6์›” 1์ผ </div>
                    <div class="price">
                        <span>&#8361;139,224</span>
                        <span>/๋ฐ•</span>
                    </div>
                </section>
            </div>
            <div>
                <!-- ์ด๋ฏธ์ง€๊ฐ€ ํ‘œ์‹œ๋˜๋Š” ๊ณณ -->
                <section class="product-img-container">
                    <div class="product-img"></div>
                    <i class="fa-solid fa-heart"></i>
                </section>
                <!-- ์ƒํ’ˆ ์„ค๋ช… -->
                <section class="product-info-section">
                    <div class="addr">
                        <span>ํ•œ๊ตญ ์šฉ์‚ฐ๊ตฌ</span>
                        <span><i class="fa-solid fa-star"></i>4.89</span>
                    </div>
                    <div class="view">
                        ๊ณต์› ๋ฐ ๋„์‹ฌ ์ „๋ง
                    </div>
                    <div class="date"> 5์›” 27์ผ ~ 6์›” 1์ผ </div>
                    <div class="price">
                        <span>&#8361;139,224</span>
                        <span>/๋ฐ•</span>
                    </div>
                </section>
            </div>
            <div>
                <!-- ์ด๋ฏธ์ง€๊ฐ€ ํ‘œ์‹œ๋˜๋Š” ๊ณณ -->
                <section class="product-img-container">
                    <div class="product-img"></div>
                    <i class="fa-solid fa-heart"></i>
                </section>
                <!-- ์ƒํ’ˆ ์„ค๋ช… -->
                <section class="product-info-section">
                    <div class="addr">
                        <span>ํ•œ๊ตญ ์šฉ์‚ฐ๊ตฌ</span>
                        <span><i class="fa-solid fa-star"></i>4.89</span>
                    </div>
                    <div class="view">
                        ๊ณต์› ๋ฐ ๋„์‹ฌ ์ „๋ง
                    </div>
                    <div class="date"> 5์›” 27์ผ ~ 6์›” 1์ผ </div>
                    <div class="price">
                        <span>&#8361;139,224</span>
                        <span>/๋ฐ•</span>
                    </div>
                </section>
            </div>
            <div>
                <!-- ์ด๋ฏธ์ง€๊ฐ€ ํ‘œ์‹œ๋˜๋Š” ๊ณณ -->
                <section class="product-img-container">
                    <div class="product-img"></div>
                    <i class="fa-solid fa-heart"></i>
                </section>
                <!-- ์ƒํ’ˆ ์„ค๋ช… -->
                <section class="product-info-section">
                    <div class="addr">
                        <span>ํ•œ๊ตญ ์šฉ์‚ฐ๊ตฌ</span>
                        <span><i class="fa-solid fa-star"></i>4.89</span>
                    </div>
                    <div class="view">
                        ๊ณต์› ๋ฐ ๋„์‹ฌ ์ „๋ง
                    </div>
                    <div class="date"> 5์›” 27์ผ ~ 6์›” 1์ผ </div>
                    <div class="price">
                        <span>&#8361;139,224</span>
                        <span>/๋ฐ•</span>
                    </div>
                </section>
            </div>
            <div>
                <!-- ์ด๋ฏธ์ง€๊ฐ€ ํ‘œ์‹œ๋˜๋Š” ๊ณณ -->
                <section class="product-img-container">
                    <div class="product-img"></div>
                    <i class="fa-solid fa-heart"></i>
                </section>
                <!-- ์ƒํ’ˆ ์„ค๋ช… -->
                <section class="product-info-section">
                    <div class="addr">
                        <span>ํ•œ๊ตญ ์šฉ์‚ฐ๊ตฌ</span>
                        <span><i class="fa-solid fa-star"></i>4.89</span>
                    </div>
                    <div class="view">
                        ๊ณต์› ๋ฐ ๋„์‹ฌ ์ „๋ง
                    </div>
                    <div class="date"> 5์›” 27์ผ ~ 6์›” 1์ผ </div>
                    <div class="price">
                        <span>&#8361;139,224</span>
                        <span>/๋ฐ•</span>
                    </div>
                </section>
            </div>
            <div>
                <!-- ์ด๋ฏธ์ง€๊ฐ€ ํ‘œ์‹œ๋˜๋Š” ๊ณณ -->
                <section class="product-img-container">
                    <div class="product-img"></div>
                    <i class="fa-solid fa-heart"></i>
                </section>
                <!-- ์ƒํ’ˆ ์„ค๋ช… -->
                <section class="product-info-section">
                    <div class="addr">
                        <span>ํ•œ๊ตญ ์šฉ์‚ฐ๊ตฌ</span>
                        <span><i class="fa-solid fa-star"></i>4.89</span>
                    </div>
                    <div class="view">
                        ๊ณต์› ๋ฐ ๋„์‹ฌ ์ „๋ง
                    </div>
                    <div class="date"> 5์›” 27์ผ ~ 6์›” 1์ผ </div>
                    <div class="price">
                        <span>&#8361;139,224</span>
                        <span>/๋ฐ•</span>
                    </div>
                </section>
            </div>
            <div>
                <!-- ์ด๋ฏธ์ง€๊ฐ€ ํ‘œ์‹œ๋˜๋Š” ๊ณณ -->
                <section class="product-img-container">
                    <div class="product-img"></div>
                    <i class="fa-solid fa-heart"></i>
                </section>
                <!-- ์ƒํ’ˆ ์„ค๋ช… -->
                <section class="product-info-section">
                    <div class="addr">
                        <span>ํ•œ๊ตญ ์šฉ์‚ฐ๊ตฌ</span>
                        <span><i class="fa-solid fa-star"></i>4.89</span>
                    </div>
                    <div class="view">
                        ๊ณต์› ๋ฐ ๋„์‹ฌ ์ „๋ง
                    </div>
                    <div class="date"> 5์›” 27์ผ ~ 6์›” 1์ผ </div>
                    <div class="price">
                        <span>&#8361;139,224</span>
                        <span>/๋ฐ•</span>
                    </div>
                </section>
            </div>
 
        </div>
 
 
 
 
    </main>
</body>
</html>
* {
    margin: 0;
    padding: 0;
    /* padding, border, content ๋‹ค ๋”ํ•ด์„œ width๋กœ ํ•ด์ค˜ */
    box-sizing: border-box;
    --normal-font-size: 17px;
    /* --(๋ณ€์ˆ˜๋ช…): ๊ฐ’ */
}
.product-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, 300px);
    justify-content: center;
    grid-gap: 30px 20px;
}
.product-container > div{
    cursor: pointer;
}
.product-container > div:hover .product-img{
    transform: scale(110%);
}
 
.product-img-container {
    position: relative;
    width: 100%;
    height: 300px;
    margin-bottom: 10px;
    border-radius: 20px;
    overflow: hidden;
}
.product-img{
    width: 100%;
    height: 100%;
    background-image: url("bg3.jpg");
    background-position: center;
    background-size: cover;
    transition-duration: 0.2s;
}
 
.product-img-container > i{
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 99;
    font-size: 23px;
    color: red;
}
/***********************************/
.product-info-section{
    width: 100%
}
.addr{
    display: flex;
    justify-content: space-between;
}
.addr > span:first-child {
    font-weight: bold;
    font-size: var(--normal-font-size); /* ๋ณ€์ˆ˜ ์‚ฌ์šฉํ•˜๋ ค๋ฉด var(๋ณ€์ˆ˜๋ช…) ๋„ฃ์–ด์ฃผ๊ธฐ */
}
.addr > span:last-child{
    font-size: 16px;
}
.addr i{
    margin-right: 3px;
    font-size: 15px;
}
 
 
 
.view{
    color: rgba(0,0,0,0.6);
    font-size: var(--normal-font-size);
}
.date{
    color: rgba(0,0,0,0.6);
    font-size: var(--normal-font-size);
}
.price{
    margin-top: 5px;
    font-size: var(--normal-font-size);
}
.price > span:first-child{
    font-weight: bold;
}

728x90
๋ฐ˜์‘ํ˜•
์ €์ž‘์žํ‘œ์‹œ ๋น„์˜๋ฆฌ ๋ณ€๊ฒฝ๊ธˆ์ง€ (์ƒˆ์ฐฝ์—ด๋ฆผ)

'๐Ÿ’œ HTML,CSS' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

HTML&CSS 1์ผ์ฐจ (์ •๋ฆฌx)  (0) 2024.03.23
HTML&CSS ์‹ค์Šต11 (์ •๋ฆฌx)  (0) 2024.03.23
HTML&CSS ์‹ค์Šต9 (์ •๋ฆฌx)  (0) 2024.03.23
HTML&CSS ์‹ค์Šต8 (์ •๋ฆฌx)  (0) 2024.03.23
HTML&CSS 25์ผ์ฐจ (์ •๋ฆฌx)  (0) 2024.03.23

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”