* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
이미지가 안뜨는데 경로 문제인지 이미지를 못찾는건지 모르겠으나 샘이 주신 가이드를 따라해도 안나오네요..
어느 부분을 수정하거나 이미즈를 찾아봐야 할까요??
작성한 코드 및 에러 메세지
detail.html
<!DOCTYPE html>
<html lang="ko">
<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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="badge">
<span>한정 판매</span>
</div>
<h1 class="product-title">상품 제목</h1>
</header>
<main>
<div class="main-left">
<img src="https://image.msscdn.net/images/goods_img/20230206/3061872/3061872_16782434339513_500.jpg"
alt="상품 이미지">
<div class="thumbnail-wrapper">
<img src="https://image.msscdn.net/images/goods_img/20230206/3061872/3061872_16782434339513_500.jpg"
alt="썸네일 이미지 1">
<img src="https://image.msscdn.net/images/goods_img/20230206/3061872/3061872_16782434339513_500.jpg"
alt="썸네일 이미지 2">
<img src="https://image.msscdn.net/images/goods_img/20230206/3061872/3061872_16782434339513_500.jpg"
alt="썸네일 이미지 3">
<img src="https://image.msscdn.net/images/goods_img/20230206/3061872/3061872_16782434339513_500.jpg"
alt="썸네일 이미지 4">
<img src="https://image.msscdn.net/images/goods_img/20230206/3061872/3061872_16782434339513_500.jpg"
alt="썸네일 이미지 5">
<img src="https://image.msscdn.net/images/goods_img/20230206/3061872/3061872_16782434339513_500.jpg"
alt="썸네일 이미지 6">
<img src="https://image.msscdn.net/images/goods_img/20230206/3061872/3061872_16782434339513_500.jpg"
alt="썸네일 이미지 7">
</div>
</div>
<div class="main-right">
<div class="right-content">
<div class="product-info">
<h2>Product Info</h2>
<div class="info-item">
<span class="info-title">제조사:</span>
<span class="info-content">ABC Company</span>
</div>
<div class="info-item">
<span class="info-title">모델:</span>
<span class="info-content">XYZ123</span>
</div>
<!-- Add more info-items as needed -->
</div>
<div class="delivery-info">
<h2>Delivery Info</h2>
<div class="info-item">
<span class="info-title">배송 방법:</span>
<span class="info-content">택배</span>
</div>
<div class="info-item">
<span class="info-title">예상 배송일:</span>
<span class="info-content">YYYY년 MM월 DD일</span>
</div>
<!-- Add more info-items as needed -->
</div>
<div class="price-info">
<h2>Price Info</h2>
<div class="info-item">
<span class="info-title">가격:</span>
<span class="info-content">1000000원</span>
</div>
<!-- Add more info-items as needed -->
</div>
<div class="purchase">
<select>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<!-- Add more options as needed -->
</select>
<div class="total-price">
<span>총 금액:</span>
<span>1000000원</span>
</div>
<button>구매하기</button>
</div>
</div>
</div>
</main>
</body>
</html>
style.css
header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 20px;
background-color: #f8f8f8;
}
.badge {
height: 26px;
background-color: #ffc107;
border-radius: 5px;
padding: 5px 10px;
}
.badge span {
font-size: 14px;
font-weight: bold;
color: #fff;
}
.product-title {
font-size: 24px;
font-weight: bold;
margin-left: 20px;
}
main {
display: flex;
padding: 20px;
}
.main-left {
flex: 1;
}
.main-left img {
width: 500px;
height: 600px;
margin-bottom: 10px;
}
.thumbnails {
display: flex;
}
.thumbnails img {
width: 60px;
height: 72px;
margin-right: 10px;
}
/* A케이스 */
.main-right {
flex: 1;
margin-left: 20px;
}
.right-content {
width: 400px;
}
.product-info,
.delivery-info,
.price-info,
.purchase {
margin-bottom: 20px;
}
.product-info h2,
.delivery-info h2,
.price-info h2 {
font-weight: bold;
}
.info-item {
display: flex;
margin-bottom: 10px;
}
.info-title {
font-weight: bold;
margin-right: 10px;
}
