팀과제
⭐ 상세페이지 코드
<!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">
<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>Document</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=Nanum+Myeongjo&display=swap');
* {
font-family: 'Gowun Dodum', sans-serif;
font-family: 'Nanum Myeongjo', serif;
}
.mylogo {
text-indent: 30px;
position: fixed;
color: black;
background-color: #fff;
width: 100%;
height: 150px;
top: 0%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
z-index: 3;
}
.mypost {
width: 1000px;
margin: 20px auto 20px auto;
padding: 20px 20px 20px 20px;
box-shadow: 0px 0px 3px 0px gray;
}
.mytitle {
margin: 20px auto 20px auto;
padding: 20px 20px 20px 20px;
border: solid 2px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.mytxt {
text-align: center;
margin: 20px auto 20px auto;
padding: 20px 20px 20px 20px;
border: solid 2px;
}
.mybtn>button:hover {
border: 2px solid black;
}
.mybtn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.mybtn>button {
width: 300px;
height: 50px;
background-color: transparent;
border: 1px solid black;
color: black;
border-radius: 10px;
margin-top: 20px;
margin-right: 30px;
}
.mypost2 {
width: 500px;
height: 400px;
margin: 20px auto 20px auto;
padding: 20px 20px 20px 20px;
border: 1px solid black;
}
.myposter2 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class=mylogo>
<br>
<h1> 비전5 영화 </h1>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="mypost">
<div class="mytitle">
<br>
<div class="myposter2">
<br>
<div><img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
style="width:300px; height:400px;" /> </div>
<div> <h1> ⭐⭐⭐ </h1> </div>
</div>
<div class="mypost2">
<div> <h2> 제목 </h2> </div>
<br>
<div> <h2> 상세설명 : 상세설명 </h2> </div>
<br>
<div> <h2> 감독/출연진 : 감독/출연진 </h2> </div>
</div>
</div>
<div class="mytxt">
<h1> 코멘트 </h1>
</div>
<div class="mytxt">
<h1> 개인 관람평 </h1>
<div class="form-floating mb-3">
<input type="text" class="form-control" id="name" placeholder="url" />
<label for="floatingInput">닉네임</label>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="comment"
style="height: 100px"></textarea>
<label for="floatingTextarea2">관람평</label>
</div>
<div class="mybtn">
<button type="button" class="btn btn-outline-dark">등록하기</button>
</div>
<br>
<table class="table">
<thead>
<tr>
<th scope="col">닉네임</th>
<th scope="col">관람평</th>
</tr>
</thead>
</div>
</body>웹개발 종합반
⭐ 2주차 복습
📌 함수 만들기 및 버튼에 함수 연결하기
<script> funtion hey(){ alert('안녕!!') } </script> </head> <div class="mytitle" <h1>내 생애 최고의 영화들!</h1> <button onclick="hey()">영화 기록하기</button>
📌 JS & JQuery
<head> <title>자바스크립트 문법 연습하기!</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head><div id="q1">테스트</div> $('#q1').text(a)fruits.forEach((a) => { console.log(a) })function checkResult() { let fruits = ['사과','배','감','귤','수박'] $('#q1').empty() fruits.forEach((a)=>{ let temp_html = `<p>${a}</p>` $('#q1').append(temp_html) }) }
📌 Fetch
데이터를 주는 url이 있다면, 그 url에서 데이터를 가지고 오는 친구.
<script> function q1() { fetch("http://spartacodingclub.shop/sparta_api/seoulair").then((response) => response.json()).then((data) => { $('#names-q1').empty() let rows = data['RealtimeCityAir']['row'] rows.forEach((a) => { let gu_name = a['MSRSTE_NM'] let gu_mise = a['IDEX_MVL'] let temp_html = `<li>${gu_name} : ${gu_mise}</li>` $('#names-q1').append(temp_html) }); }) } </script>
