🔥팬명록에 날씨 정보 추가하기
- 웹개발 종합반 2주차 숙제를 마무리하며 복습의 시간으로 배운 것 정리 및 궁금한 점 기록하기
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<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=Nanum+Myeongjo&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Nanum Myeongjo', serif;
}
.mytitle {
height: 250px;
width: 100%;
background-image : linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("http://thepublic.kr/news/data/20211211/p1065572405381876_990_thum.jpg");
background-position: center 10%;
background-size: cover;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.mypost {
max-width: 500px;
width: 95%;
margin: 20px auto 0px auto;
box-shadow: 0px 0px 3px 0px gray;
padding: 20px;
}
.last-button {
margin-top: 15px;
}
.card{
max-width: 500px;
width: 95%;
margin: 20px auto 0px auto;
}
</style>
<script>
$(document).ready(function () {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
data: {},
success: function (response) {
let temp = response['temp']
$('#temp').text(temp);
}
})
});
</script>
</head>
<body>
<div class="mytitle">
<h1>십센치(10cm) 팬명록</h1>
<p>현재기온 : <span id="temp">00.0</span>도</p>
</div>
<div class="mypost">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">닉네임</label>
</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="last-button">
<button type="button" class="btn btn-dark">응원 남기기</button>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>새로운 앨범 너무 멋져요!</p>
<footer class="blockquote-footer">호빵맨<cite title="Source Title"></cite>
</footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>새로운 앨범 너무 멋져요!</p>
<footer class="blockquote-footer">호빵맨<cite title="Source Title"></cite>
</footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>새로운 앨범 너무 멋져요!</p>
<footer class="blockquote-footer">호빵맨<cite title="Source Title"></cite>
</footer>
</blockquote>
</div>
</div>
</body>
</html>1 . HTML : 뼈대
2. CSS : 꾸미기
- head>style 에서 사용
- 선택자 : class로 꾸미기 적용
- bootstrap : 예쁜 CSS 꾸러미. (❗️준비)Gettig started에서 CSS, Bundle 복사해서 head 태그 내 붙여 넣기
3. Javascript : 브라우저가 알아들을 수 있는 언어
- jQuery : 편리한 Javascript를 미리 작성해둔 것. 라이브러리! 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것이기에 '임포트'해야 함 (❗️준비)Google CDN에서 복사 후 head 태그 내 붙여 넣기. jQuery에서는 선택자로 id 사용.
- Ajax (1) Javascript를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능. 전체 페이지를 새로 고지지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 (2) jQuery를 임포트한 페이지에서만 동작 가능
☘️Ajax 기본 골격
$.ajax({
type: "GET",
url: "여기에URL을입력",
data: {},
success: function(response){
console.log(response)
}
})✍️ 위 코드 중 "현재 기온" 글자에서 사용된 span 태그는 무엇일까?
div, p 태그는 block level element고, span 태그는 inline level elemenet이다. p 태그는 문단을 이뤄서 줄바꿈+문단을 이루는 줄이 통째로 선택된다. span 태그는 설정한 span 태그마다 다른 기능을 지정해 줄 수 있다.
💕 웹개발 종합반 2주차 마무리 후기
현재까지는 코딩이 매우 재밌다! 쉬운 것만 해서 그런지 아직까지는 흥미있게 하고 있음. 항상 코딩 공부하면서 이걸 다 외워야 하나, 다 이해해야 하나 하는 생각이 있어서 '완벽'을 추구했다. 막상 영상 보니 정리만 잘 해둔 후 가져다만 쓰면 OK인 것 같다. 짜깁기는 또 내가 잘 하지..😎
html, css, bootstrap 등 개념 정리하며 복습 마무리 끝!
