<!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>₩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>₩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>₩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>₩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>₩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>₩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>₩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>₩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>₩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>₩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>₩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>₩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>₩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>₩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>₩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>₩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;
}
