개발하고자 하는 프로젝트의 View 페이지(HTML,CSS)와 JavaScript 연결 테스트용 작성
CSS, JavaScript 모듈화(Static) 및 참조 링크 설정
1. HTML
경로 : (project_root)bucket/templates/index.html
Body는 Header / Content 로 구분
•
Header : 타이틀(title), 백그라운드 이미지
•
Content :
◦
input(#bucket) 텍스트 입력 박스 / 기록하기 버튼 onclick "save_bucket()" 함수 호출
◦
div(#bucket-list)>li*n 형태로 에 추후 save_bucket() 함수의 결과가 1행씩 추가될 예정(이전 프로젝트까지 Footer로 표현했지만 사실상 Footer의 역할은 하지 않기 때문에 content로 포함시킴)
•
Footer : None
<!-- HTML Doctype선언문 --><!DOCTYPE html>
<html lang="en">
<head>
<!-- 인코딩 캐릭터셋 UTF-8지정 --><meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 부트스트랩 css 참조 --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<!-- jquery 참조 --><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- 부트스트랩 javascript 참조 --><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>
<!-- Google Font 참조 --><link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet" />
<!-- JS 모듈화 참조 --><script src="{{ url_for('static', filename='js/script.js') }}"></script>
<!-- CSS 모듈화 참조 --><link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<title>인생 버킷리스트</title>
</head>
<body>
<!-- Header --><div class="mypic">
<h1>나의 버킷리스트</h1>
</div>
<!-- Content --><div class="mybox">
<div class="mybucket">
<input id="bucket" class="form-control" type="text" placeholder="이루고 싶은 것을 입력하세요" />
<button onclick="save_bucket()" type="button" class="btn btn-outline-primary">기록하기</button>
</div>
</div>
<div class="mybox" id="bucket-list">
<li>
<h2>✅ 호주에서 스카이다이빙 하기</h2>
</li>
</div>
<!-- Footer --><!-- NONE --></body>
</html>
XML
복사
2. CSS
•
(project_root)mars/static/css/style.css로 분리 모듈화
•
Google Fonts "Gowun Dodum" 글씨체 전체 적용
•
Image 배경 어둡게 적용, 높이 200px고정
•
Content부분인 .mybox에 하늘색 테두리 그림자 효과 적용
•
버킷리스트 목록으로 나타날 li>h2태그에 줄로 구분될 수 있도록 line-through 적용
•
기타 요소별 디자인은 index.html에 참조된 Bootstrap 테마 사용
* {
font-family: "Gowun Dodum", sans-serif;
}
.mypic {
width: 100%;
height: 200px;
background-image: linear-gradient(0deg,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)),
url("https://images.unsplash.com/photo-1601024445121-e5b82f020549?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80");
background-position: center;
background-size: cover;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.mypic>h1 {
font-size: 30px;
}
.mybox {
width: 95%;
max-width: 700px;
padding: 20px;
box-shadow: 0px 0px 10px 0px lightblue;
margin: 20px auto;
}
.mybucket {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.mybucket>input {
width: 70%;
}
.mybox>li {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-bottom: 10px;
min-height: 48px;
}
.mybox>li>h2 {
max-width: 75%;
font-size: 20px;
font-weight: 500;
margin-right: auto;
margin-bottom: 0px;
}
.mybox>li>h2.done {
text-decoration: line-through;
}
CSS
복사
3. JavaScript
•
(project_root)bucket/static/js/script.js로 분리 모듈화
•
show_bucket() 함수는 $(document).ready()를 통해 View 페이지가 생성 될 때 바로 실행되며
•
localhost:5001/bucket URL로 GET 요청을 보낸다.
•
(->백엔드가 수신-> /bucket URL의 GET 요청을 응답하는 메서드가 실행되고 결과가 반환된다.)
•
반환 받은 데이터를 json으로 변환시켜 알림창에 보여준다.
// [Read]
$(document).ready(function () {
show_bucket();
});
function show_bucket() {
fetch('/bucket').then(res => res.json()).then(data => {
console.log(data)
alert(data["msg"]);
})
}
// [Create]function save_bucket() {
let formData = new FormData();
formData.append("sample_give", "샘플데이터");
fetch('/bucket', { method: "POST", body: formData, }).then((response) => response.json()).then((data) => {
alert(data["msg"]);
window.location.reload();
});
}
JavaScript
복사
View 페이지 화면 상태(테스트용 하드 코딩 상태)