* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
옵션+b 눌렀을 땐 이미지가 잘 나오는데요. 깃헙에 등록한 후 visit site를 하면 이미지가 깨져서 나와요 ㅠㅠ .
작성한 코드 및 에러 메세지
<!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>
/* 꾸미기 */
/* 카드 호버 효과 */
.card {
transition: transform 0.3s ease-in-out;
margin-bottom: 20px; /* Adjust the value as needed */
}
.card:hover {
transform: scale(1.05);
}
</style>
</head>
<body>
<div class="hero bg-white text-center py-5">
<h1 class="text-dark">어린이 관찰일지</h1>
<h3 class="text-dark">오늘 만난 어린이와 선생님에 관한 기록</h3>
</div>
<div class="container mt-5">
<div class="row">
<!-- 소개 카드 -->
<div class="col-md-4">
<div class="card" style="width: 18rem">
<img src="./소개.jpg"
class="card-img-top" alt="소개 이미지" />
<div class="card-body">
<p class="card-text">
어린이 관찰일지는 오늘 만난 어린이와 선생님에 관한 기록을 남깁니다.
</p>
<a href="https://indischool.notion.site/2024-1-f942f58e511245cfa3e47d255f905b64" 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="./참가자 모집 공고.jpg"
class="card-img-top" alt="참가자 모집 공고 이미지" />
<div class="card-body">
<p class="card-text">
2024년 1학기 어린이 관찰일지와 함께하실 선생님을 기다립니다.
</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="./참가신청서.jpg"
class="card-img-top" alt="참가신청서 이미지" />
<div class="card-body">
<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="./쫑알쫑알.jpg"
class="card-img-top" alt="쫑알쫑알 이미지" />
<div class="card-body">
<p class="card-text">
인사를 나누고 안부를 묻는, 느슨한 연대의 공간이에요. 매주 금요일 발송되는 이주의 Question에 대한 답변도 남기실 수 있어요. 타인을 해치거나 인상 찌푸리게 하는 내용이 아니라면 어떤 말이든 환영해요.
</p>
<a href="https://indischool.com/tweets/channels/children" 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="./사연접수.jpg"
class="card-img-top" alt="사연접수 이미지" />
<div class="card-body">
<p class="card-text">
선생님이 맡고 계신 어린이에 관하여 지혜를 구하고 싶으시다면 이 곳에 사연을 남겨주세요. 선생님의 고민을 어린이 관찰일지에 참여하시는 동료 선생님들에게 대신 전달해드리고, 지혜를 구해볼게요.
</p>
<a href="https://docs.google.com/forms/d/e/1FAIpQLScNbFk6GBxtusn92IMWdhcsr-SRLBv0F7DlsXO6Nb3oTO4gng/viewform/" 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="./솔루션제안.jpg"
class="card-img-top" alt="솔루션제안 이미지" />
<div class="card-body">
<p class="card-text">
매주 월요일 오후, 어린이 고민상담소 사연이 업데이트됩니다. 선생님의 경험과 지혜, 공감의 온기를 이곳에 전해주세요. 이름도, 얼굴도 모르는 동료 선생님에게 선생님의 한마디가 도움이 될 거예요.
</p>
<a href="https://padlet.com/indischool/2024-1-with-p481kpz3dm7ndx6y" class="btn btn-primary" target="_blank"
rel="noopener noreferrer">
솔루션 제안하기
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>오류 발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.
Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.
Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!
