* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
응용해서 하단에 중고물품을 사고 싶은 이들의 문의창을 넣었습니다.
이름과 연락처 등의 답변을 적으면 제가 원하는 sajary@naver.com 으로 보내려고 스크립트를 넣긴 했는데, 그 다음에 더 설정한 부분은 어떤 것이 있을까요?아래에 링크 주소와 코드 내용
넣었습니다.
https://masha38.github.io/spartagpt/
<!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">
function sendEmail() {
let name = document.getElementById("nameInput").value;
let email = document.getElementById("emailInput").value;
let phone = document.getElementById("phoneInput").value;
let message = document.getElementById("messageInput").value;
let mailtoLink = "mailto:sajary@naver.com?subject=문의사항&body=" +
encodeURIComponent("이름: " + name + "\n") +
encodeURIComponent("이메일: " + email + "\n") +
encodeURIComponent("전화번호: " + phone + "\n") +
encodeURIComponent("메시지: " + message);
window.location.href = mailtoLink;
}
</script>
<style>
.hero div {
margin-bottom: 20px;
}
.card:hover {
transform: scale(1.1); /* 마우스를 올릴 때 크기를 1.1배로 확대 */
transition: transform 0.3s ease; /* 변화가 일어날 때 0.3초간 부드럽게 변화하도록 설정 */
}
.containform{
padding: 30px;
width: 100%;
margin: 0 auto;
}
.form-group{
margin:15px;
}
button{
margin-left:15px;
}
</style>
</head>
<body>
<div class="hero bg-dark text-center py-5">
<h1 class="text-white">나만의 르탄마켓</h1>
<h2 class="text-white">집에 있는 물건을 팝니다!</h2>
</div>
<!-- 여기 -->
<div class="container mt-5">
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<a href="https://spartacodingclub.kr/" target="_blank">
<img src="https://images.unsplash.com/photo-1595440431225-1c25fd023f71?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8NXx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60" class="card-img-top" alt="밥솥">
</a>
<div class="card-body">
<h5 class="card-title">냄비</h5>
<h6 class="card-subtitle mb-2 text-muted">15만원</h6>
<p class="card-text">한 번 밖에 안쓴 주물 냄비 팝니다. 명품 냄비로 저렴히 처분합니다!</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<a href="https://spartacodingclub.kr/" target="_blank">
<img src="https://images.unsplash.com/photo-1528208079124-a2387f039c99?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTd8fCVFQyVCMSU4NSVFQSVCRCU4MiVFQyU5RCVCNHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60" class="card-img-top" alt="책상">
</a>
<div class="card-body">
<h5 class="card-title">책상</h5>
<h6 class="card-subtitle mb-2 text-muted">2만원</h6>
<p class="card-text">거실에서 사용하던 책상 팝니다. 몇 년째 사용하고 있는데 상태는 괜찮아요.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<a href="https://spartacodingclub.kr/" target="_blank">
<img src="https://images.unsplash.com/photo-1608128947626-09e25f109c59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MTl8UnNiUmhHT0pFTHN8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60" class="card-img-top" alt="전구">
</a>
<div class="card-body">
<h5 class="card-title">전구</h5>
<h6 class="card-subtitle mb-2 text-muted">10만원</h6>
<p class="card-text">모던한 디자인에 살짝 노란빛이 나는 램프 팝니다. 램프하나로 방분위기를 바꿔보세요.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<a href="https://spartacodingclub.kr/" target="_blank">
<img src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/chatGPT/%EC%B2%AD%EC%86%8C%EA%B8%B0.jpeg" class="card-img-top" alt="청소기">
</a>
<div class="card-body">
<h5 class="card-title">청소기</h5>
<h6 class="card-subtitle mb-2 text-muted">5만원</h6>
<p class="card-text">흡입력이 정말 좋은 청소기. 사무실 등에서 사용하면 좋아요~</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<a href="https://spartacodingclub.kr/" target="_blank">
<img src="https://images.unsplash.com/photo-1512486130939-2c4f79935e4f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MnwxNDUxMDN8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60" class="card-img-top" alt="청소기">
</a>
<div class="card-body">
<h5 class="card-title">맥북</h5>
<h6 class="card-subtitle mb-2 text-muted">29만원</h6>
<p class="card-text">구입한지 좀 되어서 저렴하게 판매합니다.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<a href="https://spartacodingclub.kr/" target="_blank">
<img src="https://images.unsplash.com/photo-1644462428399-f869dc19f969?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTh8fCVFQyU5NSU4NCVFQyU5RCVCNCVFRCU4QyVBOCVFQiU5MyU5QyVFQyVCQyU4MCVFQyU5RCVCNCVFQyU4QSVBNHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60" class="card-img-top" alt="청소기">
</a>
<div class="card-body">
<h5 class="card-title">아이팟케이스</h5>
<h6 class="card-subtitle mb-2 text-muted">6만원</h6>
<p class="card-text">스타일리쉬한 아이팟 케이스 입니다. 구매하면 아이폰 케이스도 같이 드려요~</p>
</div>
</div>
</div>
<div class="containform">
<form>
<div class="form-group">
<label for="name">이름</label>
<input type="text" class="form-control" id="name" placeholder="이름을 입력하세요">
</div>
<div class="form-group">
<label for="phone">전화번호:</label>
<input type="tel" class="form-control" id="phone" name="phone" placeholder="전화번호를 입력하세요">
</div>
<div class="form-group">
<label for="email">이메일</label>
<input type="email" class="form-control" id="email" placeholder="이메일을 입력하세요">
</div>
<div class="form-group">
<label for="message">메시지</label>
<textarea class="form-control" id="message" rows="5" placeholder="메시지를 입력하세요"></textarea>
</div>
<button type="button" class="btn btn-primary" onclick="sendEmail()">전송</button>
</form>
</div>
</div>
</div>
</body>
</html>
