미니 프로젝트. 3

일단 오늘 프로젝트 작업물 최종본이다.

팀원분들 초상권을 지키기 위해 AI편집기를 이용해 얼굴만 없앴더니 좀 부자연스럽다.

오늘 작업물을 확인해보니 어제 수정한 폰트가 소실(?)되어 재작업하였다.

오늘의 디자인작업

폰트 소실된거 복구
깃허브링크버튼 상단으로 옮김
INFORMATION. LICENSE, WEB MASTER 좌로 옮겨 적절하게 공간배치
슬로건 작성
팀원 개인카드 자기소개 작성

/*
/*구글 폰트 api*/
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Gowun+Dodum&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Gowun+Batang&family=Gowun+Dodum&display=swap');


.black-han-sans-regular { /*팀 제목 폰트*/
    font-family: "Black Han Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.gowun-dodum-regular { /*슬로건 폰트*/
    font-family: "Gowun Dodum", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .gowun-batang-regular { /*팀 카드 폰트*/
    font-family: "Gowun Batang", serif;
    font-weight: 400;
    font-style: normal;
  }
  
  /* 푸터에서 뛰는 이미지를 불러오는 css */
  .footer-img {
    /* 사이즈*/
    width: 700px;
    height: 250px;
    /* 이미지 가져오기 */
    background-image: url('../img/footer.png');
    /* 이미지가 지정 사이즈를 채우도록 함 */
    background-size: cover;
}

.footer-box {
    /* 사이즈, 'vw' 는 'view width'로 현재 보이는 만큼을 채울때 쓰는 단위 */
    width: 100vw;
    height: 250px;
    /* 글씨 왼쪽으로 정렬 */
    text-align: left;
    background-color: #D73E45;
}

.footer-image-container {
    /* 플렉스 박스 디스플레이로 두 요소 양옆으로 정렬 */
    display: flex;
    /* 풋터의 이미지와 박스 사이 갭이없도록 조절 */
    gap: 0;
    position: relative;
}

.link-holder {
    /* 깃헙링그의 가장 바깟요소의 테두리를 둥글게 만듬 */
    border-radius: 13px;
    /* 테두리색 */
    border-color: rgb(235, 171, 171);
}

.btn {
    /* 버튼 누를때 생기는 테두리 없애기 */
    border: none;
}

.link-holder:hover {
    background-color: #f3e0e1;
}

.paragraph-container {
    margin-left: 100px;
    margin-top: 40px;
    display: flex;
    flex-direction: row;
}

.footer-paragraph {
    margin-left: 50px;
}

.line-container {
    color: #fff;
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

.line-container-heading {
    color: #fff;
    display: flex;
    flex-direction: column;
    font-weight: bold;
}

/* 팀 슬로건 */
.card-mb-2 {
    width: 100%;
    height: 350px;
    margin: 0px 0px 20px auto;
    padding: auto 200px 20px;
    padding-left: 150px;
    background-color: #D73E45;
    border-radius: 0px;
    box-shadow: 0px 0px 3px 0px rgb(255, 255, 255);
}

/* 팀원 개인카드 */
.card {
    background-color: #D73E45;
    border-radius: 5px;
    border: 1px solid rgb(255, 255, 255);
    color: white;
    font-weight: 500;
    /*폰트 굵기 추가*/
    font-family: 'Gowun Dodum' !important;
    /*폰트 추가*/
}

.card:hover {
    /* 카보드 마우스 지날때 투명도 65% */
    filter: opacity(0.65);
    /* 마우스 지날때 손포인터 모양으로 변함 */
    cursor: pointer;
}

/* 응원 한마디 */
.mypostingbox {
    width: 800px;
    margin: 20px auto 20px auto;
    padding: 20px 20px 20px 20px;
    border-radius: 5px;
    box-shadow: 0px 0px 3px 0px black;
}

/* 응원의 메세지 */
.card2 {
    width: 800px;
    background-color: white;
    margin: 20px auto 20px auto;
    border-radius: 5px;
    border: 1px solid rgb(0, 0, 0);
    height: 300px;
    /*세로 길이 지정*/
    overflow-y: scroll;
    /*해당 클래스 요소에 세로 방향 스크롤 기능 활성화*/
}

/* 깃허브 링크 */
.card3 {
    background-color: white;
    margin: 20px auto 20px auto;
    border-radius: 5px;
    border: 1px solid rgb(0, 0, 0);
}

/*팀 카드*/
.team-card {
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 1000px;
    padding: 20px;
    box-sizing: border-box;
    margin: 0;
    font-family: 'Gowun Dodum' !important;
    /*폰트 추가*/

}

/* 팝업 모달 */
.team-card .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    border: 5px solid white;
}

.team-card .social-icons {
    margin-top: 10px;
}

.team-card .social-icons a {
    color: #333;
    margin-right: 10px;
    font-size: 24px;
}

.team-card .social-icons a:hover {
    color: #D73E45;
}

/* 게시판 부분 css */
.nickname {
    width: 10%;
}

.cheering {
    text-align: center;
}

/* 가운데 정렬 css */
.wrap {
    margin: auto;
    width: 80%;
    padding: 10px;
}

/* 슬로건 전용 정렬 css */
.header {
    margin: 100px auto;
    width: 80%;
    padding: 0px;
}

/* 스크롤 버튼 css */
#scrollBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 15px 20px;
    color: #fff;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    display: none;
    /* 이 중 필수 요소는
        position: fixed; - 요소를 고정 위치에 배치, 스크롤을 해도 버튼이 항상 화면의 같은 위에 존재한다.
        bottom: 20px; - 화면 하단으로 부터 20px 떨어진 위치에 배치
        right: 20px; - 오른쪽 화면으로 부터 20px 떨어진 위치에 배치
        cursor: pointer; - 요소 위에 마우스를 올렸을 때 커서 모양을 손가락 모양으로 변경
        display: none; - 요소를 처음에는 화면에 안보이도록 숨긴다.
    */
}*/

<!DOCTYPE html>

<head>

<title>Document</title>

rel="stylesheet">

<link

href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Gowun+Batang&family=Gowun+Dodum&display=swap"

rel="stylesheet">

// 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, serverTimestamp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

import { getDocs, query, orderBy } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

// Firebase 구성 정보 설정

const firebaseConfig = {

apiKey: config.apiKey,

authDomain: config.authDomain,

projectId: config.projectId,

storageBucket: config.storageBucket,

messagingSenderId: config.messagingSenderId,

appId: config.appId,

measurementId: config.measurementId

};

// Firebase 인스턴스 초기화

const app = initializeApp(firebaseConfig);

const db = getFirestore(app);

// 데이터 전송

$("#postingbtn").click(async function () { // postingbtn 아이디를 가진 요소가 클릭 이벤트가 발생했을때 함수를 실행

let name = $('#name').val(); // name아이디 요소 안에 있는 값을 변수에 저장

let message = $('#message').val(); // maessage아이디 요소 안에 있는 값을 변수에 저장

/* name과 message가 null값에 업로드되는 현상을 막았습니다*/

if (!name && !message) { // name,message 둘다 입력되어야만 doc값으로 저장된다.

alert('닉네임과 응원메시지는 필수 입력 항목입니다!');

return; // name, message둘다 입력없을시 리턴

}

let doc = { // Firestore에 저장할 문서 객체를 생성

'name': name, // name 컬럼의 name값을 설정

'message': message, // maessage 컬럼의 maessage 데이터 값을 설정

'timestamp': serverTimestamp() // 시간 저장

};

await addDoc(collection(db, "board"), doc); // Firestore의 board 컬렉션에 doc객체를 추가, await 의해 이 작업이 완료될 때까지 대기

alert('저장 완료');

window.location.reload(); // 새로고침

});

// 저장된 게시물 불러오기

let q = query(collection(db, "board"), orderBy("timestamp", "desc")); // 데이터 베이스 db에서 board 컬렉션 참조, 해당 컬럼기준 내림차순으로 정렬하는 쿼리 생성

let docs = await getDocs(q); // 쿼리 q를 실행해서 조건에 맞는 문서를 가져옴

docs.forEach((doc) => { // 반복 작업 시작, doc 각 문서를 나타냄

let row = doc.data(); // 문서 데이터를 객체 형태로 가져옴

let name = row['name']; // 데이터객체 name 필드값 가져오기

let message = row['message']; // 데이터 객체 message 필드값 가져오기

let temp_html = `

<tr>

<td>${message}</td>

</tr>`; // html 태그를 생성해서 데이터를 넣고 싶은 곳에 name, message 값을 넣는다

$('#add').append(temp_html); // 생성한 html 태그 값과 데이터를 add 요소에 삽입한다

});

</script>

</head>

<body>

<h1 class="card-title" style="line-height: 1;"><span

style="font-size: 38px; font-family: '굴림' !important; color: rgb(255, 255, 255);">팔팔하게

개발을 8low</span></h1>

<h1 class="card-title" style="line-height: 1;"><span

style="font-size: 100px; font-family: 'Black Han Sans' !important; color: rgb(255, 255, 255);">팔팔한조</span>

</h1>

viewBox="0 0 16 16">

<path fill="#D73E45"

d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8" />

</svg>

<a href="https://github.com/devmoonjs/TeamIntro" class="btn" target="_blank">Link to

GitHub</a>

</button>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<h4 class="card-role">Back-End Developer</h4>

<a href="https://github.com/devmoonjs" target="_blank"><i

class="fab fa-github"></i></a>

<a href="https://www.instagram.com/mxxnxst" target="_blank"><i

class="fab fa-instagram"></i></a>

<!-- <a href="mailto:username1@gmail.com" target="_blank"><i

class="fas fa-envelope"></i></a> -->

<a href="https://velog.io/@moonjs1018/posts" target="_blank"><i

class="fa-solid fa-square-poll-horizontal"></i></a>

</div>

<br>

<div>

<p><strong>개발 동기:</strong> 인턴 경험 동안 백엔드의 매력을 느끼게 되었다. 많은 이들에게 이로운 개발자가 되고

싶다.</p>

</div>

</div>

</div>

</div>

<h4 class="card-role">Back-End Developer</h4>

<a href="https://github.com/ican0422" target="_blank"><i

class="fab fa-github"></i></a>

class="fab fa-instagram"></i></a> -->

<a href="mailto:ican000422@naver.com" target="_blank"><i

class="fas fa-envelope"></i></a>

<a href="https://hyun-my-it-blog.tistory.com/" target="_blank"><i

class="fa-solid fa-square-poll-horizontal"></i></a>

</div>

<br>

<div>

<p><strong>개발 동기:</strong> 개발을 그냥 할 줄 아는 개발자가 아닌,

좋은 개발자로 성장하고 싶습니다.</p>

</div>

</div>

</div>

</div>

<h4 class="card-role">Back-End Developer</h4>

<a href="https://github.com/pumaclass" target="_blank"><i

class="fab fa-github"></i></a>

<a href="https://www.instagram.com/username3" target="_blank"><i

class="fab fa-instagram"></i></a>

<a href="mailto:kiljjang10@gmail.com" target="_blank"><i

class="fas fa-envelope"></i></a>

<a href="https://pumaclass.tistory.com/" target="_blank"><i

class="fa-solid fa-square-poll-horizontal"></i></a>

</div>

<br>

<div>

<p><strong>개발 동기:</strong> 원하는 삶을 살기위해 필요한 일이라고 생각했습니다.

</p>

<p><strong>장점:</strong> 커뮤니케이션, 몰입, 근성</p>

<p><strong>협업 스타일:</strong>상대방의 상황을 고려하고 프로젝트의 상황을 고려하여 최적의 퍼포먼스를 지향합니다.</p>

</div>

</div>

</div>

</div>

<h4 class="card-role">Future Developer</h4>

<a href="https://github.com/sjkimplus" target="_blank"><i

class="fab fa-github"></i></a>

<a href="https://www.instagram.com/sungju_kim_0909/" target="_blank"><i

class="fab fa-instagram"></i></a>

<a href="https://velog.io/@sjkimplus09/posts" target="_blank"><i

class="fa-solid fa-square-poll-horizontal"></i></a>

</div>

<br>

<div>

<p><strong>개발 동기:</strong> 대학에서 처음들은 파이썬 수업으로 코딩에 입문하게 되었고 무언가를 직접만들고 테스트하는

작업에 매료되어, 개발자로 취업을 전양하게 되었어요! 코딩은 다른 과목들과 달리 이론보단 실기를 위주로 배울수 있어서 좋았어요!

</p>

<p><strong>슬로건/좌우명:</strong> There is no path to happiness, happiness is the

path.</p>

<p><strong>장점:</strong> 소통을 원활히 자주 하고 시간약속을 잘 지킵니다.</p>

<p><strong>협업 스타일:</strong> 치밀히 계획을 짜고 계획 이탈시 자주 소통하는 것을 좋아합니다!</p>

</div>

</div>

</div>

</div>

<h4 class="card-role">Back-End Developer</h4>

<a href="https://github.com/wanduek" target="_blank"><i

class="fab fa-github"></i></a>

<a href="https://www.instagram.com/99_gg_mj?igsh=MTh0Mm11ajgzYzFocg%3D%3D&utm_source=qr"

target="_blank"><i class="fab fa-instagram"></i></a>

<a href="minjoois2@gmail.com" target="_blank"><i

class="fas fa-envelope"></i></a>

<a href="https://minjooig.tistory.com/" target="_blank"><i

class="fa-solid fa-square-poll-horizontal"></i></a>

</div>

<br>

<div>

<p><strong>개발 동기:</strong> 순전히 코딩만 할 줄 아는 개발자가 아닌 소통을 잘 하는 개발자로 거듭나는게 목표이다.

</p>

<p><strong>협업 스타일:</strong> 소통을 중시하고, 내가 더 아는게 있다면 동료들에게 알려주고 모르면 내가 잘나더라도

동료들에게 물어본다.</p>

</div>

</div>

</div>

<thead>

<tr>

</tr>

</thead>

</tbody>

</table>

</div>

<!-- 상단은 성함작성하는 칸 하단은 메세지를 작성하는 칸 입니다.

postingbtn은 해당 버튼을 눌렀을때 상단하고 하단을 작성하였을때 응원의 메시지에 기록이 되어야 합니다.-->

<label for="floatingTextarea">성함을 작성해주세요.</label>

</div>

</div>

</div>

<div>

<a class="line-container-heading">INFORMATION</a> <br>

<a class="line-container">주소 : 서울특별시 강남구 압구정로 88길 88</a>

</p>

<a class="line-container-heading">LICENCE</a>

<a class="line-container">사업자등록번호 : 888-88-88888</a>

<br>

<a class="line-container-heading">WEB MASTER</a>

<a class="line-container">e-mail : admin@palpal.com</a>

<a class="line-container">개인정보 보호책임자 : 문정석 김현 길용진 김성주 김민주</a>

</p>

</div>

</div>

</body>

</html>

오늘의 코드정리

css, html 파일 분리
해당 코딩 기능설명을 주석처리하여 정리

큰 틀을 어제 거의 다 마무리 지었기에 오늘 수정하는 작업이 대부분이였다.

지금은 웹제작보단 깃허브 전송이 어렵다.

'미니 프로젝트 > 자기소개 웹페이지' 카테고리의 다른 글

미니 프로젝트 회고록(KPT) (0)	2024.07.19
미니 프로젝트. 4 (1)	2024.07.18
미니 프로젝트. 2 (0)	2024.07.16
미니 프로젝트. 1 (1)	2024.07.15

'미니 프로젝트 > 자기소개 웹페이지' 카테고리의 다른 글

티스토리툴바