안녕하세요. GPT로 코딩 10분만에 웹사이트 만들기 강의 유익하게 잘 보면서 따라하고 있습니다.!
2가지 질문이 드는데요.
1) 카드 꾸미기로 가져온 이미지들이 고정값이 아닌지 새로고침 하면 자꾸 변경되는데, 왜 그런지 알 수 있나요?
2) 카드 이미지 고정값 코드로 변경하고 싶어서, 챗한테 물어보니 2개의 코드 중 아래 코드가 편리한거 같아 사용했습니다만,
사이트 링크(공유) 넣고 저장하니, 이미지 불러오기가 안됩니다.
<img src="https://your_domain.com/path_to_image/image1.jpg" class="card-img-top" alt="Card Image">
일반적인 방법으로 따로 컴퓨터에 저장후 아래 코드로 넣어야 될까요?
<img src="path_to_image/image1.jpg" class="card-img-top" alt="Card Image">
아,, 도메인에 이미지를 업로드 후 사용하는 방법 밖에 없나요?!
작성한 코드 및 에러 메세지
<!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-in-out;
}
.card:hover {
transform: scale(1.05);
}
</style>
<!-- Your HTML code -->
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card">
<!-- Card content -->
</div>
</div>
<div class="col-md-4">
<div class="card">
<!-- Card content -->
</div>
</div>
<div class="col-md-4">
<div class="card">
<!-- Card content -->
</div>
</div>
</div>
</div>
</style>
</head>
<body>
<div class="hero bg-warning text-black text-center py-5 mb-5">
<h1 class="text-black">나앤히의 마켓</h1>
<h2 class="text-black">직접 발품팔아 셀렉한 상품을 팝니다!</h2>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card">
<img src="https://unsplash.com/ko/%EC%82%AC%EC%A7%84/ff221Bu56mI" class="card-img-top" alt="Card Image">
<div class="card-body">
<h5 class="card-title">반려용품</h5>
<h6 class="card-subtitle mb-2 text-muted">3만원</h6>
<p class="card-text">밖에서 10회 내외로 사용한 용품입니다. 강아지가 금방 흥미를 잃어버려서 사용 횟수가 적습니다.</p>
<a href="https://blog.naver.com/nowandhere_life" target="_blank" class="card-link">자세히 보기</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://unsplash.com/ko/%EC%82%AC%EC%A7%84/_aXa21cf7rY" class="card-img-top" alt="Card Image">
<div class="card-body">
<h5 class="card-title">전자제품</h5>
<h6 class="card-subtitle mb-2 text-muted">50만원</h6>
<p class="card-text">사용감이 거의 없는 최신 전자제품입니다. 원래 가격의 절반 이하로 판매합니다.</p>
<a href="https://blog.naver.com/nowandhere_life" target="_blank" class="card-link">자세히 보기</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://unsplash.com/ko/%EC%82%AC%EC%A7%84/fZuleEfeA1Q" class="card-img-top" alt="Card Image">
<div class="card-body">
<h5 class="card-title">가구</h5>
<h6 class="card-subtitle mb-2 text-muted">20만원</h6>
<p class="card-text">깨끗한 상태의 중고 가구입니다. 인테리어에 잘 어울리는 디자인입니다.</p>
<a href="https://blog.naver.com/nowandhere_life" target="_blank" class="card-link">자세히 보기</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
