커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
API 공유 안됨
undefined주차
손*아
댓글
5
・
추천
0
・
조회수
16
조회수
16
답변 완료
만든 페이지가 링크로 열면 잘되는데 공유할때는 안됩니다..
팬명록도 그렇고 인생영화 페이지 만드는것도 안되네요..ㅠㅠ
http지우고 //를 넣어보거나 <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">를 추가해도 안됩니다..
이걸 추가해보기도 해도 현재기온과 영화 api 붙는게 안되요 ㅠㅠ 도와주세요
<!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, shrink-to-fit=no">
<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"
<script src="jquery-3.6.0.min.js"></script>
<script integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>팬명록 만들기</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<style>
*{
font-family: 'Gurajada', serif;
}
.mytitle{
width: 100%;
height:250px;
background-position:10% 30%;
background-size: cover;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url("아이유 팬명록.jpeg");
color: white;
display:flex;
flex-direction: column;
justify-content: end;
align-items:center ;
}
.mypost{
max-width:500px;
width:95%;
margin: 10px auto 0px auto;
box-shadow:0px 0px 4px 0px gray;
padding: 20px;
}
.card{
max-width:500px;
width:95%;
margin: 5px auto 0px auto;
padding: 3px;
}
.card-body{
size: ;
width:95%;
margin:0px auto 0px auto;
}
.mybtn{
display:flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 10px;
}
.mybtn > button {
margin-right: 10px;
}
.blockquote{
font-size: 13px;
}
</style>
<script>
function hey(){
alert('전송되었습니다.')
}
</script>
<script>
$(document).ready(function(){
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/weather/changwon",
data: {},
success: function(response){
let temp = response['temp']
$('#temp').text(response['temp'])
}
})
});
</script>
</head>
<body>
<div class="mytitle">
<p>현재기온 :<span id ="temp">00.0도</p>
<h1> 아이유(IU) 팬명록 </h1>
</div>
<div class="mypost">
<div class="mb-3">
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="닉네임">
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
style="height: 100px"></textarea>
<label for="floatingTextarea2">응원댓글</label>
</div>
<div class="mybtn">
<button onclick="hey()">응원남기기</button>
</div>
</div>
</select>
<div class="wrap">
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>아이유 너무 예뻐요!💗</p>
<footer class="blockquote-footer">깅깅이야</footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-1">
<p>노래잘해요!!👏👏</p>
<footer class="blockquote-footer">동주</footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-2">
<p>IU❤️IU❤️IU</p>
<footer class="blockquote-footer">팬이유</footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-3">
<p>대박나라 아이유!</p>
<footer class="blockquote-footer">멋진님</footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-4">
<p>아이유>< 최고최고👍👍👍</p>
<footer class="blockquote-footer">코딩이</footer>
</blockquote>
</div>
</div>
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
<!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, shrink-to-fit=no">
<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>
<title> 인생영화 기록하기 </title>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
.mytitle{
background-color: green;
width: 100%;
height:250px;
background-position: center;
background-size: cover;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg");
color: white;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.mytitle>button{
width:200px;
height:50px;
background-color: transparent; /*투명한색*/
color: white;
border-radius: 50px; /*버튼의 테두리라운드*/
border:1px solid white; /*흰색줄*/
margin-top: 10px;
}
.mytitle>button:hover /*버튼에 올리면*/{
border:2px solid white;
}
.mycomment{
color: gray;
}
.wrap{
max-width:1200px;
width:95%;
margin:20px auto 0px auto;
}
.mypost{
max-width:500px;
width:95%;
margin: 10px auto 0px auto;
box-shadow:0px 0px 3px 0px gray;
padding: 20px;
display:none;
}
.mybtn{
display:flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 10px;
}
.mybtn > button {
margin-right: 10px;
}
</style>
<script>
$(document).ready(function(){
listing();
});
function listing() {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/web/api/movie",
data: {},
success: function(response) {
let rows = response['movies']
for (let i = 0; i < rows.length; i++) {
let title = rows[i]['title']
let desc = rows[i]['desc']
let image = rows[i]['image']
let star = rows[i]['star']
let comment = rows[i]['comment']
let star_image = '⭐'.repeat(star)
let temp_html = ` <div class="col">
<div class="card">
<img src="${image}"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">${desc}</p>
<p>${star_image}</p>
<p class="mycomment">${comment}</p>
</div>
</div>
</div>`
$('#cards-box').append(temp_html)
}
}
})
console.log('화면 로딩 후 잘 실행되었습니다');
}
function open_box(){
$('#post-box').show()
}
function close_box(){
$('#post-box').hide()
}
</script>
</head>
<body>
<div class="mytitle">
<h1> 내 생애 최고의 영화들</h1>
<button onclick="open_box()">영화 기록하기</button>
</div>
<div class="mypost" id="post-box">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="url" placeholder="name@example.com">
<label for="flotingInput">영화URL</label>
</div>
<div class="input-group mb-5">
<label class="input-group-text" for="inputGroupSelect01">별점</label>
<select class="form-select" id="inputGroupSelect01">
<option selected>--선택하기--</option>
<option value="1">⭐</option>
<option value="2">⭐⭐</option>
<option value="3">⭐⭐⭐</option>
<option value="4">⭐⭐⭐⭐</option>
<option value="5">⭐⭐⭐⭐⭐</option>
</select>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
style="height: 100px"></textarea>
<label for="floatingTextarea2">코멘트</label>
</div>
<div class="mybtn">
<button type="button" class="btn btn-dark">기록하기</button>
<button onclick="close_box()" type="button" class="btn btn-outline-dark">닫기</button>
</div>
</div>
<div class="wrap">
<div id = "cards-box" class= "row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card">
<img src="미드나잇인파리.jpg"
class="card-img-top" alt= ... ">
<div class="card-body">
<h5 class="card-title">미드나잇인파리</h5>
<p class="card-text">"약혼자 '이네즈'(레이첼 맥아담스)를 두고 홀로 파리의 밤거리를 배회하던 '길'(오웬 윌슨)은 종소리와 함께 홀연히 나타난 차에 올라타게 되고 그곳에서 1920년대를 대표하는 예술가들과 조우하게 된다. 그 날 이후 매일 밤 1920년대로 떠난 '길'은 평소에 동경하던 예술가들과 친구가 되어 꿈 같은 시간을 보내게 되는데...</p>
<p>⭐⭐⭐⭐⭐</p>
<p class="mycomment">이 영화를 보면 파리여행을 꿈꾸게된다..🌠</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="노웨이홈.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">스파이더맨_노웨이홈</h5>
<p class="card-text">2021년 12월 15일 개봉한 마블 시네마틱 유니버스의 27번째 장편 영화. 또한 페이즈 4의 4번째 영화이자 마블 스튜디오 스파이더맨 시리즈의 3번째 작품이다. 또 마블 스튜디오 스파이더맨 시리즈의 첫번째 트릴로지인 홈커밍 트릴로지의 마지막 작품이다.</p>
<p>⭐⭐⭐⭐</p>
<p class="mycomment"> 이건 스파이더맨 팬들을 향한 눈물나는 선물같은 영화🥺</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="기생충.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">기생충</h5>
<p class="card-text">전원백수로 살 길 막막하지만 사이는 좋은 기택(송강호) 가족. 장남 기우(최우식)에게 명문대생 친구가 연결시켜 준 고액 과외 자리는 모처럼 싹튼 고정수입의 희망이다. 온 가족의 도움과 기대 속에 박사장(이선균) 집으로 향하는 기우. 글로벌 IT기업 CEO인 박사장의 저택에 도착하자 젊고 아름다운 사모님 연교(조여정)가 기우를 맞이한다. 그러나 이렇게 시작된 두 가족의 만남 뒤로, 걷잡을 수 없는 사건이 기다리고 있었으니…</p>
<p>⭐⭐⭐⭐⭐</p>
<p class="mycomment"> 시나리오, 연출, 배우 모두 좋았다.소름끼치게...⛺</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="알라딘.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">알라딘</h5>
<p class="card-text">키우는 원숭이 아부와 함께 살아가는 아그라바의 좀도둑 알라딘은 어느 날 궁궐을 탈출한 술탄의 딸 자스민에게 한눈에 반한다. 술탄의 자리를 노리고 있는 사악한 마법사 자파는 알라딘을 눈여겨보고 그에게 마법의 램프를 가져다주면 부자로 만들어주겠다고 말한다. 동굴에 들어가서 램프를 찾던 알라딘은 도중에 동굴이 무너지는 바람에 갇히게 된다. 위기에 빠진 알라딘은 램프의 요정 지니와 마법 양탄자의 도움으로 동굴에서 탈출하는데...</p>
<p>⭐⭐⭐⭐⭐</p>
<p class="mycomment">ost가 주는 감동을 잊을수 없어요🧞♂</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
댓글 알림
