프론트의 개발에는 기본적인 3가지의 요소가 있다. javascript, html, css 이렇게 3가지가 각각 행동, 뼈대, 치장의 역활을 수행하고 관계가 유기적으로 연동되어 우리가 보는 화면으로서 구현된다.
위와 같은 간단한 웹사이트를 제작하는 것은 위의 3개 만으로도 가능한데, 여기서 조금 더 욕심을 부린다면, JQuery와 Firebase와 같은 데이터 베이스를 추가하거나 Bootsrtrap을 통해 편리한 아트를 진행할 수 있다.
| firebase | jquery | bootsrtrap |
| 데이터 서버 | 데이터 쿼리 | 스타일 프리셋 |
위의 요소들을 종합하면 아래와 같은 코드가 등장한다
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>나만의 추억앨범</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.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">
<style>
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
* {
font-family: 'Gowun Dodum', sans-serif;
}
.mytitle {
color: white;
height: 500px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
font-size: 200px; /* 크기를 줄여보세요 */
font-family: "Playfair Display", serif;
font-optical-sizing: auto;
font-style: normal; /* 폰트 패밀리 수정 */
padding-left: 50px;
font-weight: bold;
background-image: url('https://gongu.copyright.or.kr/gongu/wrt/cmmn/wrtFileImageView.do?wrtSn=11289000&filePath=L2Rpc2sxL25ld2RhdGEvMjAxNS8wMi9DTFM2OS9OVVJJXzAwMV8wNDg2X251cmltZWRpYV8yMDE1MTIwMw==&thumbAt=Y&thumbSe=b_tbumb&wrtTy=10006');
background-position: center;
background-size: cover;
}
.mybottom {
background-color: rgb(22, 11, 46); /* 배경색을 검은색으로 설정 */
color: white;
height: 200px;
/* 내용물을 정렬 */
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding-left: 50px; /* 왼쪽 여백 */
font-weight: bold;
bottom: 0; /* 하단에 배치 */
left: 0; /* 왼쪽에 배치 */
right: 0; /* 오른쪽으로 꽉 차게 */
background-image: url('https://png.pngtree.com/thumb_back/fw800/background/20231006/pngtree-a-3d-illustration-of-space-flight-journeying-amidst-billions-of-stars-image_13537046.png');
background-position: center;
background-size: cover;
}
.mytitle>button {
width: 150px;
height: 50px;
background-color: transparent;
border: none;
color: white;
font-size: 18px;
font-weight: bold;
border-radius: 5px;
border: 1px solid white;
margin-top: 20px;
}
/* 입력 박스 스타일 */
.mypostingbox {
width: auto; /* 고정된 너비 설정 */
padding: 20px; /* 내부 여백 */
border: 1px solid #ccc; /* 테두리 */
border-radius: 5px; /* 모서리 둥글게 */
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* 그림자 */
}
/* 카드 스타일 */
.mycards {
flex: 1; /* 남은 공간을 모두 차지하도록 설정 */
max-height: 400px; /* 고정된 높이 설정 */
overflow-y: auto; /* 세로 스크롤 가능 */
padding: 10px; /* 내부 여백 */
border: 1px solid #ccc; /* 테두리 */
border-radius: 5px; /* 모서리 둥글게 */
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* 그림자 */
}
/* 카드의 이미지 크기 조정 */
.card-img-top {
height: 200px; /* 카드 이미지 높이 고정 */
object-fit: cover; /* 비율 유지하며 자르기 */
}
.mainmypostingbox {
width: auto;
margin: 20px auto;
padding: 20px 20px 20px 20px;
border-radius: 5px;
box-shadow: 0px 0px 3px 0px blue;
}
.semimypostingbox {
background-color: green;
color: white;
height: 300px;
/* 내용물을 정렬 */
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 10px; /* 공백 간격 조정 */
font-weight: bold;
font-size: 25px;
width: 45%; /* 너비 조정 */
margin: 20px 30px 100px 30px; /* 위, 오른쪽, 아래, 왼쪽 여백 */
padding: 20px; /* 패딩 설정 */
border-radius: 5px;
box-shadow: 0px 0px 3px 0px blue;
background-image: url('https://img.freepik.com/free-photo/anime-style-mountains-landscape_23-2151135118.jpg');
background-position: center;
background-size: cover;
}
.mybtn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 10px;
}
.paceimage {
display: flex;
justify-content: space-around; /* Or any alignment you prefer */
margin: 20px 0; /* Adjust the spacing around the images */
}
.paceimage img {
width: 150px; /* Set desired width */
height: 150px; /* Maintain aspect ratio */
border-radius: 10px; /* Optional: adds rounded corners to images */
transition: transform 0.2s; /* Adds a hover effect */
}
.paceimage img:hover {
transform: scale(1.5); /* Scale up on hover */
}
.fade-in {
opacity: 0; /* 초기 투명도 설정 */
transition: opacity 1s ease-in; /* 부드러운 전환 */
}
.mybtn>button {
margin-right: 10px;
}
</style>
<script type="module">
// Firebase SDK 라이브러리 가져오기
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";
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyCz-aTF0iQvQilKJyrTHQxg1T2X_13trtw",
authDomain: "sparta-49ce5.firebaseapp.com",
projectId: "sparta-49ce5",
storageBucket: "sparta-49ce5.appspot.com",
messagingSenderId: "819019173056",
appId: "1:819019173056:web:e47a0781c0b38268923125",
measurementId: "G-0NFWX91DD1"
};
// Firebase 인스턴스 초기화
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
$("#postingbtn").click(async function () {
let image = $('#image').val();
let title = $('#title').val();
let content = $('#content').val();
let date = $('#date').val();
let doc = {
'image': image,
'title': title,
'content': content,
'date': date
};
await addDoc(collection(db, "albums"), doc);
alert('저장완료!');
window.location.reload();
})
$("#savebtn").click(async function () {
$('#postingbox').toggle();
})
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)
})
let docs = await getDocs(collection(db, "albums"));
docs.forEach((doc) => {
let row = doc.data();
let image = row['image'];
let title = row['title'];
let content = row['content'];
let date = row['date'];
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">${content}</p>
</div>
<div class="card-footer">
<small class="text-muted">${date}</small>
</div>
</div>
</div>`;
$('#card').append(temp_html);
});
</script>
</head>
<body>
<div class="mytitle">
<p>No Base</p>
</div>
<div class="mytab">
<button onclick="location.href='teamintroduce.html'" style="width: 100px; height: auto; border: none; background: none; padding: 10px; font-size: 16px;">
팀 소개
</button>
<button onclick="location.href='team_member_2.html'" style="width: 100px; height: auto; border: none; background: none; padding: 10px; font-size: 16px;">
방명록
</button>
<button onclick="location.href='team_member_3.html'" style="width: 100px; height: auto; border: none; background: none; padding: 10px; font-size: 16px;">
팀 수정
</button>
<button onclick="location.href='team_member_4.html'" style="width: 100px; height: auto; border: none; background: none; padding: 10px; font-size: 16px;">
학습 기록
</button>
</div>
<div class="mainmypostingbox" id="postingbox">
<h1>Team Goal</h1>
<p style="margin: 5px 0;">1. javascript, http, css를 이용한 기본적인 웹페이지 개설 능력 강화</p>
<p style="margin: 5px 0;">2. Firebase를 통한 Api의 사용 이해</p>
<p style="margin: 5px 0;">3. 팀활동을 통한 팀워크 개발</p>
</div>
<div class="paceimage">
<a href="teamintroduce.html">
<img src="경훈.jpg" alt="Team Member 1" style="width: 100px; height: auto;">
</a>
<a href="team_member_2.html">
<img src="영균님.jpg" alt="Team Member 2" style="width: 100px; height: auto;">
</a>
<a href="team_member_3.html">
<img src="윤현님.jpg" alt="Team Member 3" style="width: 100px; height: auto;">
</a>
<a href="team_member_4.html">
<img src="경빈님.jpg" alt="Team Member 4" style="width: 100px; height: auto;">
</a>
<a href="team_member_5.html">
<img src="준일님.jpg" alt="Team Member 5" style="width: 100px; height: auto;">
</a>
</div>
<div class="semimypostingbox" id="postingbox" style="display: inline-block;">
<h1>My Strength</h1>
<p style="margin: 10px 0;">1. 타인에 비해 흥미가 많은 편입니다.</p>
<p style="margin: 10px 0;">2. 무언갈 도전하는 것을 즐깁니다.</p>
<p style="margin: 10px 0;">3. 팀활동을 다양하게 해봤습니다.</p>
</div>
<div class="semimypostingbox" id="postingbox" style="display: inline-block;">
<h1>Collaborative Style</h1>
<p style="margin: 10px 0;">1. 팀원들이 하고자 하는 방향을 잡고 일을 완수할 수 있도록 조력</p>
<p style="margin: 10px 0;">2. 학생의 입장으로 서로에게 배우는 자세</p>
<p style="margin: 10px 0;">3. 서로의 의견을 존중하고 배려</p>
</div>
</div>
</body>
</html>
아직 리엑트와 같은 고급 기술은 사용안해봤지만, 기본이라도 역시 쉽지 않은 것 같다.. 좀 더 열심히 해야할 것 같다.
'Back-End (Web)' 카테고리의 다른 글
| FIRE BASE 서버 통신 (0) | 2024.11.06 |
|---|