* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
웹사이트 만들고 깃허브에 코드와 사진도 함께 업로드를 하였고, 경로 설정도 나름(?) 해 보았지만 사진이 계속 보이지 않습니다.
어떻게 해결할 수 있을까요!
(Chat GPT가 알려준 방법도 다 시도해 보았지만,, 해결되지 않아 문의드립니다ㅠㅠ)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ㅇ 영집 중고마켓 ㅇ</title>
<link rel="stylesheet" href="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/easygpt/default.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"></script>
<style>
.hero {
margin-bottom: 2rem;
background-color:rgb(44, 42, 47); /* 보라색으로 변경 */
}
h1, h2, h3 {
margin-bottom: 2.5rem; /* 여백 크기 */
font-weight: bold;
}
h3.title {
color: red;
text-decoration:underline;
}
.card:hover {
transform: scale(1.02);
background-color: #f5f5f5; /* 카드 호버 배경색 */
}
.square-img {
width: 400px;
height: 400px;
object-fit: cover; /* 이미지 비율 유지 */
}
</style>
</head>
<body>
<div class="hero text-center py-5">
<h1 class="text-white">ㅇ 영집 중고마켓 ㅇ</h1>
<h2 class="text-white">집에 있는 물건을 팝니다</h2>
<h3 class="title">!!! 4월 20일 단 하루 !!!</h3>
</div>
<div class="container">
<div class="row">
<div class="col-md-4 mb-4">
<div class="card">
<img src="침대.png"
class="card-img-top square-img mx-auto d-block" alt="수납침대">
<div class="card-body">
<h5 class="card-title">ㅇ 수납침대 ㅇ</h5>
<h6 class="card-subtitle mb-3 text-muted">5만원</h6>
<p class="card-text">깔끔하게 사용한 수납침대 팝니다!</p>
<a href="https://spartacodingclub.kr/" class="card-link stretched-link" target="_blank"></a>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card">
<img src="테이블.png"
class
=
"card-img-top square-img mx-auto d-block" alt="테이블">
<div class="card-body">
<h5 class="card-title">ㅇ 테이블 ㅇ</h5>
<h6 class="card-subtitle mb-3 text-muted">1만원</h6>
<p class="card-text">흠집 등 사용감이 조금 있어서 싸게 가져가실 분 구해요!</p>
<a href="https://spartacodingclub.kr/" class="card-link stretched-link" target="_blank"></a>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card">
<img src="의자.png"
class="card-img-top square-img mx-auto d-block" alt="의자">
<div class="card-body">
<h5 class="card-title">ㅇ 의자 ㅇ</h5>
<h6 class="card-subtitle mb-3 text-muted">1만원</h6>
<p class="card-text">튼튼한 의자, 사용감 있습니다.</p>
<a href="https://spartacodingclub.kr/" class="card-link stretched-link" target="_blank"></a>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card">
<img src="스툴.png"
class
="card-img-top square-img mx-auto d-block" alt="스툴">
<div class="card-body">
<h5 class="card-title">ㅇ 스툴 ㅇ</h5>
<h6 class="card-subtitle mb-3 text-muted">8천원</h6>
<p class="card-text">스툴 3개 세트로 저렴하게 팝니다.</p>
<a href="https://spartacodingclub.kr/" class="card-link stretched-link" target="_blank"></a>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card">
<img src="거울.png"
class
="card-img-top square-img mx-auto d-block" alt="거울">
<div class="card-body">
<h5 class="card-title">ㅇ 거울 ㅇ</h5>
<h6 class="card-subtitle mb-3 text-muted">1만원</h6>
<p class="card-text">80x60 사이즈 대형 거울 팝니다.</p>
<a href="https://spartacodingclub.kr/" class="card-link stretched-link" target="_blank"></a>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card">
<img src="접이식테이블.png"
class
=
"card-img-top square-img mx-auto d-block"
alt
=
"접이식테이블"
>
<div class="card-body">
<h5 class="card-title">ㅇ 접이식테이블 ㅇ</h5>
<h6 class="card-subtitle mb-3 text-muted">2천원</h6>
<p class="card-text">튼튼하게 잘 사용한 테이블 팝니다.</p>
<a href="https://spartacodingclub.kr/" class="card-link stretched-link" target="_blank"></a>
</div>
</div>
</body>
</html>
