반응형
파인애플 맛있죠
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>sellpineapple</title>
<link rel='stylesheet' href='실습4.css'>
</head>
<body>
<div class="container">
<div class="container-fir">
<img src="파나폴.jpg" />
</div>
<div class="container-sec">
<h4> 프리미엄 파인애플 바구니 세트 ...</h4>
<div class="price">25,000원</div>
<div class="explain">판매자가 직접 키운 파인애플입니다. 집들이, 기념일, 병문안, 생일 등 특별한 날에 상큼한 파인애플과 함께...</div>
<div> 리뷰 <span class="highlight"> 130 </span> ㆍ 평점 <span class="highlight"> 4.9/5 </span> </div>
</div>
</div>
</body>
</html>
CSS
.container{
width: 300px;
}
.container-fir{
width: 100%;
aspect-ratio: 1 / 1; /* squire */
display: flex;
justify-content: center;
align-items: center;
border: solid 0.01px rgb(185, 185, 185);
border-bottom: none;
padding: 10px;
box-sizing: border-box; /* 박스 크기 계산에 패딩을 포함 */
overflow: hidden;
}
.container-fir img{
width: 400px;
height: 400px;
object-fit: contain;
}
.container-sec{
border: solid 0.01px rgb(185, 185, 185);
padding: 10px;
}
.price{
margin-bottom: 30px;
font-weight: bold;
}
.explain{
font-size: 15px;
margin-bottom: 20px;
}
.highlight{
color: orange;
font-weight: bold;
}
프리미엄 파인애플 바구니 세트 ...
25,000원
판매자가 직접 키운 파인애플입니다. 집들이, 기념일, 병문안, 생일 등 특별한 날에 상큼한 파인애플과 함께...
리뷰 130 ㆍ 평점 4.9/5
이미지는 안 나와서 아쉽네요 파인애플 있다 생각하고 넘어갑니다.
반응형