html완성 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>내일배움카드를 시작하며</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR&display=swap');
body {
height: 100vh;
width: 100vw;
background-image: url(젭3.png);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.mypostingbox {
width: 500px;
margin: 20px auto 20px auto;
padding: 20px 20px 20px 20px;
border-radius: 5px;
box-shadow: 1px 0px 3px 5px rgb(194, 94, 94);
background-color: rgb(199, 68, 90);
font-family: "IBM Plex Sans KR", sans-serif;
}
.mytitle {
display: flex;
margin: 100px auto 70px auto;
flex-direction: column;
align-items: center;
justify-content: center;
color: rgb(12, 22, 22);
font-size: 50px;
font-family: "Do Hyeon", sans-serif;
}
.mytitle>button {
width: 200px;
height: 100px;
background-color: transparent;
border: none;
color: blue;
font-size: 18px;
font-weight: bold;
border-radius: 5px;
border: 1px solid blue;
margin-top: px;
}
.center-content {
display: flex;
align-items: center;
justify-content: center;
}
</style>
<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { collection, addDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
const firebaseConfig = {
apiKey: "AIzaSyDWdxadEG2pRSx3Z6Do0rxPqQWJymGDn9Y",
authDomain: "sparta-98d02.firebaseapp.com",
projectId: "sparta-98d02",
storageBucket: "sparta-98d02.appspot.com",
messagingSenderId: "197578019505",
appId: "1:197578019505:web:a535e44d84ff8097048890",
measurementId: "G-5MT9Y3ZNXV"
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
$("#postingbtn").click(async function () {
let image = $('#image').val().trim();
let title = $('#title').val().trim();
let content = $('#content').val().trim();
let comment = $('#date').val().trim();
let doc = {
image: image,
title: title,
content: content,
comment: comment
};
await addDoc(collection(db, "TIL"), doc);
alert('저장완료!');
window.location.reload();
})
let docs = await getDocs(collection(db, "TIL"));
docs.forEach((doc) => {
let row = doc.data();
let image = row['image'];
let title = row['Title'];
let content = row['content'];
let comment = row['date'];
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">${comment}</p>
<p class="card-text">${date}</p>
</div>
</div>
</div>`;
$('#card').append(temp_html);
});
let url = "http://spartacodingclub.shop/sparta_api/seoulair";
fetch(url).then(res => res.json()).then(data => {
let mise = data['RealtimeCityAir']['row'][0]['IDEX_NM']
$('#msg').text(mise)
})
</script>
</head>
<body>
<div class="mytitle">
<p>Today I Learned</p>
<h4>현재 서울의 미세먼지 : <span id="msg">나쁨</span>
<h4>
</div>
<div class="mypostingbox" id="postingbox">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="image" placeholder="name@example.com">
<label for="floatingInput">오늘의 사진</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="title" placeholder="name@example.com">
<label for="floatingInput">주제</label>
</div>
<div class="form-floating">
<input type="email" class="form-control" id="content" placeholder="name@example.com">
<label for="floatingTextarea">내용</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="date" placeholder="name@example.com">
<label for="floatingInput">한줄평</label>
</div>
<div class="mybtn">
<button id="postingbtn" type="button" class="btn btn-dark">기록하기</button>
<button type="button" class="btn btn-outline-dark">닫기</button>
</div>
</div>
<div class="mycards">
<div id="card" class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card h-100">
<img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">앨범 제목</h5>
<p class="card-text">앨범 내용</p>
</div>
<div class="card-footer">
<small class="text-muted">앨범 날짜</small>
</div>
</div>
</div>
</div>
</div>
</body>
</html>지시사항
- 왕초보 종합반에서 배웠던 내용을 참고하여 copy가능
- 배경이미지 변경하기
- 부트스트랩을 이용한 카드 형태의 소개글 넣기 *(글과 내용은 자유)
- 강의의 컨셉을 맞춰 제작할것
- (선택사항) fetch를 활용해서 실시간 날씨정보 나타내기
프로젝트 설명
기존강의에 있는 파일은 점보트론 부트스트랩에 백그라운드 사진을 넣어지만
공부를 위해 css이용해서 body에 백그라운드 전체 사진을 넣었고, 고정 되어 있는게 아닌 슬라이드로 움직이는
background-attachment: fixed; 코드를 넣었음
구글 폰트 직접 활용
카드 형태 부트스트랩 직접 활용
날씨 정보 직접 활용
css 몇부분은 강의 활용
firebase를 활용하여 포스팅 박스에 입력했던 내용을 저장함 (무단 사용 방지를 위해 주소 지웠음) (강의 활용)
프로젝트 후기
기존강의에 있던 js코드를 복사했는데 버그가 나서 피드백을 받았다. 나는 아직 js코드를 잘 모르기 때문에 분석 및 해결을 못했다. 그리고 분석과 구글링에 너무 많은 시간을 허비했기 때문. 다음주부터 js를 공부하고 익숙해 졌을때 작업 컴퓨터에 있는 html파일중 틀린것을 참고용으로 볼예정이다. 이유는 스크립트 태그에 모듈화를 시키지 않았고, 변수와 함수 안에 기입했던 ''이름들이 문제였던것. 이름이 연결될수 있게 수정을 했고 나머지 피드백 받은 내용은 끌어서 수정 및 정상작동 확인.
'제작날짜'
2024.07.29
(연습 프로젝트)
