팀 소개 웹페이지를 간단하게 만들어 보았다.
1. Fetch를 이용해 서울시 현재 온도를 이용해 온도표시를 하게 했다.
<script>
$(document).ready(function () {
fetch(url).then(res => res.json()).then(data => {
let temp = data['temp'];
$('#tem').text(temp);
})
})
</script>
<body>
<li><a href="#" class="nav-link px-2 text-white large-text">현재기온 : <span id="tem"></span>도</a></li>
</body>
2. 카드를 만들어 팀원들의 간단한 소개를 적을 수 있게 했다.
function makeCard() {
let image = $('#image').val();
let title = $('#title').val();
let comment = $('#comment').val();
let star = $('#star').val();
let temp_html = `
<div class="col">
<div class="card h-100">
<img src="${image}"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">${star}</p>
<p class="card-text">${comment}</p>
</div>
</div>
</div>`;
$('#card').append(temp_html);
}
3. 컨테이너를 만들어서 팀의 룰 또는 목표를 설정해보았다.
<div class="main">
<div class="p-5 mb-4 bg body-tertialry rounded-3">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">청록(청춘로그)</h1>
<p class="col-md-8 fs-4">소통 잘하고 상처 받는 말 하지 말기.</p>
<p class="col-md-8 fs-4">피드백을 요청하면 긍정/부정에 관계 없이 확실하게 답변하기.</p>
<p class="col-md-8 fs-4">누구 한명이라도 모르는 것이 있으면 짚고 넘어가기.</p>
<p class="col-md-8 fs-4">배운 내용을 잘 활용해보기.</p>
</div>
</div>
</div>
부트스트랩 라이브러리를 이용해 웹페이지를 간단하게 만들어보았다.
나중에는 최소한의 라이브러리를 이용해 웹페이지를 만들어 보야야겠다.
'TIL' 카테고리의 다른 글
| TIL 240812 (자바스크립트 기초문법 다지기 1) (0) | 2024.08.12 |
|---|---|
| TIL 240809 (배운내용으로 웹페이지 수정해 보기) (0) | 2024.08.09 |
| TIL 240808 (파이어베이스 이용해보기) (0) | 2024.08.08 |
| TIL 240806 (제이쿼리, Fetch 연습) (0) | 2024.08.06 |
| TIL 240805 (Javascript 기초문법) 간단하게 훑어보기 (0) | 2024.08.05 |