커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
화성땅사기를 수정해서 페이지를 만들었는데 배경이미지가 안나와서 여쭤봅니다
undefined주차
강*영
댓글
13
・
추천
0
・
조회수
23
조회수
23
답변 완료
* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
안녕하세요! 스파르타코딩클럽을 통해 코딩을 시작한 초보 코딩러입니다.
강의는 모두 완강했고 5주차 팬명록 숙제까지 끝났는데 뭔가 배웠던걸 사용해보고 싶은 마음에
그 전 주에 만들었던 화성땅사기를 이용해서 제가 만들고 싶었던 페이지를 만들었고
aws 등등 사용해서 배포까지 했는데요
화성땅사기 local:5000 으로 두고 수정할때는 떴는데 제 ec? 그걸로 만들어서 들어가니까
홈페이지 배경화면이 안뜨는데 구글링하고 수정해봐도 이유를 모르겠어서
여쭤볼 곳이 여기뿐이라 여쭤봅니다 ㅜㅜ
이렇게 수정을 했는데 이건 파이썬에서 크롬으로 열었을때 나오는 화면이고
주소쳐서 들어가면 배경화면 이미지가 출력이 안돼요 ㅜㅜ
body 부분에 background-image 이부분에 저 url 을 처음엔
url("static/sd.jpg");
이렇게 썼는데 오류 표시인 빨간 전구가 뜨고 계속 인식이 안되길래 index.html의 상위 폴더에 있는 이미지파일이라 그런건가?하고 앞에 ../ 을 붙였더니
빨간 전구는 사라졌는데 그래도 출력이 안됩니다 ㅠㅠ
혹시 이유가 뭘까요?
고양이를 눌러보세요의 고양이이미지 버튼은 똑같이 'static/cat.png' 로 입력했을때 출력이 됐었어요!
작성한 코드 및 에러 메세지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="고양이 정보남기기" />
<meta property="og:description" content="사랑스러운 고양이의 정보 입력하세요" />
<meta property="og:image" content="../static/sd.jpg" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap" rel="stylesheet">
<title>고양이 정보 기록하기</title>
<style>
* {
font-family: 'Gowun Batang', serif;
color: white;
}
body {
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../static/sd.jpg");
background-position: center;
background-size: cover;
}
h1 {
font-weight: bold;
}
.info {
width: 500px;
margin: 60px auto 0px auto;
padding-bottom: 60px;
}
.mybtn {
width: 100%;
}
.order > table {
margin: 40px 0;
font-size: 18px;
}
option {
color: black;
}
</style>
<script>
$(document).ready(function () {
show_info();
});
function show_info() {
$.ajax({
type: 'GET',
url: '/mars',
data: {},
success: function (response) {
let rows = response['orders']
for (let i = 0; i < rows.length; i++) {
let name = rows[i]['name']
let address = rows[i]['address']
let age = rows[i]['age']
let type = rows[i]['type']
let color = rows[i]['color']
let temp_html = ` <tr>
<td>${name}</td>
<td>${address}</td>
<td>${age}</td>
<td>${type}</td>
<td>${color}</td>
</tr>`
$('#order-box').append(temp_html)
}
}
});
}
function save_info() {
let name = $('#name').val()
let address = $('#address').val()
let age = $('#age').val()
let type = $('#type').val()
let color = $('#color').val()
$.ajax({
type: 'POST',
url: '/mars',
data: {name_give: name, address_give: address, age_give: age, type_give: type, color_give:color},
success: function (response) {
alert(response['msg'])
window.location.reload()
}
});
}
</script>
</head>
<body>
<div class="mycat"></div>
<div class="info">
<h1 style="margin-left: 30px;">전국 고양이 정보 수집하기!</h1>
<h4 style="margin-left: 15px;">내가 사는 지역에는 어떤 고양이가 살고 있을까?</h4>
<p style="margin-left: 80px;">
귀여운 고양이들의 나이와 이름, 주소를 알려주세요<br/>
키우는 고양이, 밥주는 고양이 모두 기록 가능합니다
</p>
<button type="button" id="btn" data-bs-toggle="modal" data-bs-target="#exampleModal" style="margin-left: 200px;">
<img class="btn-img" src="static/cat.png" width="100" height="100">
</button>
<p style="color: orange; font-weight: bold; margin-left: 180px; text-shadow:1px 1px 0px #000000;">고양이를 눌러보세요!</p>
<div class="cats-info" style="width: 350px; margin-left: 80px">
<div class="input-group mb-3">
<span class="input-group-text">이름</span>
<input id="name" type="text" class="form-control">
</div>
<div class="input-group mb-3">
<span class="input-group-text">주소</span>
<input id="address" type="text" class="form-control">
</div>
<div class="input-group mb-3">
<label class="input-group-text">나이</label>
<select class="form-select" id="age">
<option selected>-- 고양이의 나이를 고르세요 --</option>
<option value="1살 미만">1살 미만</option>
<option value="1살">1살</option>
<option value="2살">2살</option>
<option value="3살">3살</option>
<option value="4살">4살</option>
<option value="5살">5살</option>
<option value="6살">6살</option>
<option value="7살">7살</option>
<option value="8살">8살</option>
<option value="9살">9살</option>
<option value="10살">10살</option>
<option value="10살 이상">10살 이상</option>
</select>
</div>
<div class="input-group mb-3">
<label class="input-group-text">품종</label>
<select class="form-select" id="type">
<option selected>-- 고양이의 종류를 고르세요 --</option>
<option value="코리안숏헤어">코리안숏헤어</option>
<option value="랙돌">랙돌</option>
<option value="뱅갈">뱅갈</option>
<option value="먼치킨">먼치킨</option>
<option value="러시안블루">러시안블루</option>
<option value="브리티시숏헤어">브리티시숏헤어</option>
<option value="터키쉬앙고라">터키쉬앙고라</option>
<option value="그 외">그 외</option>
</select>
</div>
<div class="input-group mb-3">
<label class="input-group-text">털색</label>
<select class="form-select" id="color">
<option selected>-- 고양이의 털색를 고르세요 --</option>
<option value="치즈태비">치즈태비</option>
<option value="고등어태비">고등어태비</option>
<option value="삼색">삼색</option>
<option value="턱시도">턱시도</option>
<option value="젖소무늬">젖소무늬</option>
<option value="카오스">카오스</option>
<option value="하얀색">하얀색</option>
<option value="올검정">올검정</option>
</select>
</div>
<button onclick="save_info()" type="button" class="btn btn-warning mybtn">기록하기</button>
</div>
<table class="table">
<thead>
<tr>
<th scope="col">이름</th>
<th scope="col">주소</th>
<th scope="col">나이</th>
<th scope="col">품종</th>
<th scope="col">털색</th>
</tr>
</thead>
<tbody id="order-box">
</tbody>
</table>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel" style="color: gray; font-style: oblique; margin-left: 20px;">순돌이 이야기</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p style="color: black; margin-left: 20px;">안녕! 나는 2020년에 용인에서 구조되서<br>
강원도 춘천에서 살고 있는 순돌이야.<br>
페이지에 나오는 사진 속 주인공이라구<br>
나는 멋진 수컷고양이지만 예쁘게 생긴 외모때문에<br>
우리 가족들은 나를 '꽃순'이라고 불러.<br>
나는 애교많은 귀여운 고양이야.<br>
너는 어떤 고양이와 어디에서 살고 있니?
</p>
</div>
</div>
</div>
</div>
</body>
</html>
댓글 알림
