* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
코드스니펫에서 여기까지 코드 복사해서 VS에 붙여넣기 했는데 튜터님과 똑같이 나오지 않아요. 그리고 내 제품 파는 부분에서 저는 노트북이 나오지 않아서 냄비로 코드 복사해서 붙였는데 튜터님과 같은 그림이 아니고 상단에 냄비와 청소기 나오고 청소기 밑에 밥솥 밥솥 밑에 주전자가 나옵니다. 또한 제품 밑에 상세정보보기라는 버튼이 생성되어 있습니다. 저와 튜터님의 어떤 점이 다른 걸 까요?
<!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>
<style>
/* 카드에 마우스 호버 시 확대 효과 */
.card {
transition: transform 0.3s ease; /* 부드러운 전환 효과를 위한 transition 설정 */
}
.card:hover {
transform: scale(1.05); /* 호버 시 조금 확대될 수 있도록 설정 */
}
.card {
transition: transform 0.3s ease; /* 부드러운 전환 효과를 위한 transition 설정 */
}
.card:hover {
transform: scale(1.05); /* 호버 시 조금 확대될 수 있도록 설정 */
}
</style>
<!-- 냄비 카드 -->
<div class="col-md-4">
<div class="card d-flex flex-column h-100" style="width: 18rem">
<!-- 내용 -->
</div>
</div>
<!-- 전기밥솥 카드 -->
<div class="col-md-4">
<div class="card d-flex flex-column h-100" style="width: 18rem">
<!-- 내용 -->
</div>
</div>
<!-- 주전자 카드 -->
<div class="col-md-4">
<div class="card d-flex flex-column h-100" style="width: 18rem">
<!-- 내용 -->
</div>
</div>
</style>
</head>
<body>
<div class="hero bg-dark text-center py-5" style="margin-bottom : 50px;">
<h1 class="text-white">나만의 르탄마켓</h1>
<h2 class="text-white">집에 있는 물건을 팝니다!</h2>
</div>
<div class="container mt-5">
<div class="row">
<!-- 냄비 카드 -->
<div class="col-md-4">
<div class="card" style="width: 18rem">
<img
class="card-img-top"
alt="냄비 이미지"
/>
<div class="card-body">
<h5 class="card-title">냄비</h5>
<h6 class="card-subtitle mb-2 text-muted">5만원</h6>
<p class="card-text">
한 번 밖에 안 쓴 냄비 팝니다. 부모님이 독립할 때 주신 거에요!
</p>
<a
href="https://spartacodingclub.kr/"
class="btn btn-primary"
target="_blank"
rel="noopener noreferrer"
>
상세 정보 보기
</a>
</div>
</div>
</div>
<!-- 청소기 카드 -->
<div class="col-md-4">
<div class="card" style="width: 18rem">
<img
src="청소기.jpeg"
class="card-img-top"
alt="청소기"
/>
<div class="card-body">
<h5 class="card-title">청소기</h5>
<h6 class="card-subtitle mb-2 text-muted">25만원</h6>
<p class="card-text">
흡입력이 좋은 청소기!
</p>
<a
href="https://spartacodingclub.kr/"
class="btn btn-primary"
target="_blank"
rel="noopener noreferrer"
>
상세 정보 보기
</a>
<!-- 전기밥솥 카드 -->
<div class="col-md-4">
<div class="card" style="width: 18rem">
<img
class="card-img-top"
alt="전기밥솥 이미지"
/>
<div class="card-body">
<h5 class="card-title">전기밥솥</h5>
<h6 class="card-subtitle mb-2 text-muted">8만원</h6>
<p class="card-text">
거의 사용하지 않은 전기밥솥 팝니다. 상태 양호합니다.
</p>
<a
href="https://spartacodingclub.kr/"
class="btn btn-primary"
target="_blank"
rel="noopener noreferrer"
>
상세 정보 보기
</a>
</div>
</div>
</div>
<!-- 주전자 카드 -->
<div class="col-md-4">
<div class="card" style="width: 18rem">
<img
class="card-img-top"
alt="주전자 이미지"
/>
<div class="card-body">
<h5 class="card-title">주전자</h5>
<h6 class="card-subtitle mb-2 text-muted">3만원</h6>
<p class="card-text">
사용감이 있지만 기능에는 문제 없는 주전자 팝니다.
</p>
<a
href="https://spartacodingclub.kr/"
class="btn btn-primary"
target="_blank"
rel="noopener noreferrer"
>
상세 정보 보기
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
