shop 페이지 합치기
완성품
<body> <section class="mainBanner"> <h1 class="text"> Welcome to my shop </h1> </section> <div class="body__main"> <div class="body__menu"> <div class="menu__item"> <div class="new__item"> <span>New Items</span> </div> <div class="best__item"> <span>Best Items</span> </div> <div class="item__index"> <span>상품 목록</span> </div> <div class="old__market"> <span>중고 마켓</span> </div> </div> <div class="insert__item"> <span>상품 등록 ></span> </div> </div> <div class="itemWrap"> <div class="item"> <div class="imgBox"> <img src="./img/item1.jpeg" alt="탁상용 조명"> </div> <div class="textBox"> <p class="textBox__name">탁상용 조명</p> <p class="textBox__price">250,000원</p> </div> </div> <div class="item"> <div class="imgBox"> <img src="./img/item2.png" alt="머그컵"> </div> <div class="textBox"> <p class="textBox__name">머그컵</p> <p class="textBox__price">16,000원</p> </div> </div> <div class="item"> <div class="imgBox"> <img src="./img/item3.jpeg" alt="슬리퍼"> </div> <div class="textBox"> <p class="textBox__name">슬리퍼</p> <p class="textBox__price">20,000원</p> </div> </div> <div class="item"> <div class="imgBox"> <img src="./img/item1.jpeg" alt="탁상용 조명"> </div> <div class="textBox"> <p class="textBox__name">탁상용 조명</p> <p class="textBox__price">250,000원</p> </div> </div> <div class="item"> <div class="imgBox"> <img src="./img/item2.png" alt="머그컵"> </div> <div class="textBox"> <p class="textBox__name">머그컵</p> <p class="textBox__price">16,000원</p> </div> </div> <div class="item"> <div class="imgBox"> <img src="./img/item3.jpeg" alt="슬리퍼"> </div> <div class="textBox"> <p class="textBox__name">슬리퍼</p> <p class="textBox__price">20,000원</p> </div> </div> <div class="item"> <div class="imgBox"> <img src="./img/item1.jpeg" alt="탁상용 조명"> </div> <div class="textBox"> <p class="textBox__name">탁상용 조명</p> <p class="textBox__price">250,000원</p> </div> </div> <div class="item"> <div class="imgBox"> <img src="./img/item2.png" alt="머그컵"> </div> <div class="textBox"> <p class="textBox__name">머그컵</p> <p class="textBox__price">16,000원</p> </div> </div> <div class="item"> <div class="imgBox"> <img src="./img/item3.jpeg" alt="슬리퍼"> </div> <div class="textBox"> <p class="textBox__name">슬리퍼</p> <p class="textBox__price">20,000원</p> </div> </div> <div class="item"> <div class="imgBox"> <img src="./img/item1.jpeg" alt="탁상용 조명"> </div> <div class="textBox"> <p class="textBox__name">탁상용 조명</p> <p class="textBox__price">250,000원</p> </div> </div> <div class="item"> <div class="imgBox"> <img src="./img/item2.png" alt="머그컵"> </div> <div class="textBox"> <p class="textBox__name">머그컵</p> <p class="textBox__price">16,000원</p> </div> </div> <div class="item"> <div class="imgBox"> <img src="./img/item3.jpeg" alt="슬리퍼"> </div> <div class="textBox"> <p class="textBox__name">슬리퍼</p> <p class="textBox__price">20,000원</p> </div> </div> </div> </div> </body>* { box-sizing: border-box; } .html, body { margin: 0; padding: 0; } .mainBanner { width: 100%; height: 280px; background-image: url("./img/banner.jpg"); background-size: cover; display: flex; flex-direction: row; justify-content: center; align-items: center; } .mainBanner .text { font-size: 42px; font-weight: 700; color: white; text-shadow: 2px 2px 5px rgba(0,0,0,0.3); animation: titleText 1s ease-in-out; } @keyframes titleText { 0% { transform: translateY(70px); opacity: 0; } 92% { transform: translateY(-10px); } 100% { transform: translateY(0); opacity: 1; } } .body__main { width: 80%; display: flex; flex-direction: row; margin: 20px auto; } .body__menu { display: flex; flex-direction: column; width: 200px; align-items: flex-end; margin-right: 20px;
}
.menuitem {
width: 150px;
height: 200px;
border-radius: 5px;
background-color: orange;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.menuitem div {
color: white;
font-size: 17px;
text-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
.insert__item{
width: 150px;
height: 40px;
padding: 7px 20px;
background-color: black;
color: white;
margin-top: 20px
}
.itemWrap {
width: calc(100% - 200px);
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
}
.item{
aspect-ratio: 6 / 5;
position: relative;
overflow: hidden;
border-radius: 10px;
}
.imgBox {
width: 100%;
height: 100%;
}
.imgBox img {
width: 100%;
height: 100%;
object-fit: cover;
}
.textBox {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
padding: 20px;
z-index: 3;
}
.textBox p {
color: white;
margin: 5px 0 0 0;
}
.textBoxname {
font-size: 22px;
font-weight: 500;
opacity: 0;
transform: translateY(100px);
}
.textBoxprice{
font-size: 16px;
font-weight: 400;
opacity: 0;
transform: translateY(100px);
}
.item:after {
width: 100%;
height: 100%;
content:"";
display: block;
background-color: rgba(0,0,0,0.1);
position: absolute;
top: 0;
left: 0;
z-index: 2;
opacity: 0;
}
.item:hover:after{
opacity: 1;
}
.item:hover .imgBox img {
transform: scale(1.1);
filter: blur(3px);
}
.item:hover .textBoxname{
opacity: 1;
transform: translateY(0px);
}
.item:hover .textBoxprice{
opacity: 1;
transform: translateY(0px);
}
.item:after,
.item .imgBox img,
.item .textBoxname,
.item .textBoxprice {
transition: all 0.4s ease-in-out;
}
.item .textBox__price{
transition: all 0.4s ease-in-out 0.1s;
}
