커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
웹페이지에 만든 모달창이 모바일에서 backdrop 사이즈가 이상하게 나오는데 수정하는 방법을 모르겠어요
undefined주차
강*영
댓글
1
・
추천
0
・
조회수
6
조회수
6
답변 완료
* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
안녕하세요!
5주 강의 다 듣고 배웠던 내용 복습하고 싶어서
튜터님들께 물어물어 화성땅사기 페이지를 제가 만들고 싶은 페이지로 수정 후 도메인만들어서 배포까지 했습니다
(도와주신 튜터님들 정말 감사합니다!)
마지막으로 궁금한게 있어서 도움청하러 왔습니다 ㅜㅜ
부트스트랩에서 모달창만들기를 보고 응용해서 만들어봤는데
pc에서는 예쁘게 잘 나오는데 모바일에서는 모달창 뒷배경(backdrop 이라고 부르는게 맞나요?) 사이즈가 이상하게 나와서
수정하고 싶은데 방법을 모르겠습니다
풀스크린으로 안나오고 저렇게 영역이 잘려서 나오더라구요
그래서 궁금해서 만든 웹페이지에 검사누르고 저부분 요소를 확인해보니
<div class="modal fade show" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" style="padding-right: 100px; display: block;" aria-modal="true" role="dialog">
'modal fade show' 라는 div 이던데 이 div 의
padding-right: 100px;
이 부분때문에 그런것같아서 수정하고 싶은데 제가 작성한 코드상에는 'modal fade' 는 있는데 'modal fade show' 는 없어서
어떻게 수정해야되는지 모르겠어요 ㅠㅠ
사실 이 부분때문에 그런건지 아닌건지도 확실하지않은게 pc로는 잘나와서 뭐때문인지 모르겠습니다
마지막으로 도움구합니다 ㅠㅠ 알려주시면 감사하겠습니다
<!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="https://i.imgur.com/twDn3rb.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("https://i.imgur.com/twDn3rb.jpg");
background-position: center;
background-size: cover;
}
h1 {
font-weight: bold;
text-align: center;
}
h4 {
text-align: center;
}
.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>전국 고양이 정보 수집하기!</h1>
<h4>내가 사는 지역에는 어떤 고양이가 살고 있을까?</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="https://cdn-icons-png.flaticon.com/512/3460/3460276.png" alt="cat_image" 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>
너는 어떤 고양이와 어디에서 살고 있니?
</p>
</div>
</div>
</div>
</div>
<div class="modal-dialog modal-dialog-centered" role="document">
<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>
너는 어떤 고양이와 어디에서 살고 있니?
</p>
</div>
</div>
</div>
</div>
</body>
</html>
댓글 알림
