미니 프로젝트. 2

오늘 작업 최종본이다.

(폰트는 팀명엔 :Black Han Sans, 슬로건 : Gowun Batang, 팀원 개인카드 : Gowun Dodum으로 적용했다. use google font)

css

.footer-box {
    width: 100vw;
    margin-top: 100px;
    height: 250px;
    text-align: center;
    background-color: #D73E45;
}

.footer-image-container {
    display: flex;
    margin-top: 100px;
    gap: 0;
    /* Ensure there is no gap between images */
    position: relative;
}

.github-button {
    position: absolute;
    /* Position the button absolutely within the .footer-image-class */
    bottom: 100px;
    /* Distance from the bottom of the .footer-image-class */
    left: 435px;
    /* Center horizontally within the .footer-image-class */
    padding: 10px 20px;
    font-size: 15px;
    color: #D73E45;
    background-color: #ffffff;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
}

.github-button: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);
    color: white;
}

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

.card:hover {
    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: 200px;
    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;
}

/* 팝업 모달 */
.team-card .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50px;
    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;
}

.wrap2 {
    margin: auto;
    width: 80%;
    padding: 10px;
}

.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;
    /* 처음에는 숨김 */
}

해당 css를 통해 폰트, 넓이, 두께, 폰트색, 등등 적용하였다.

// 데이터 전송
		$("#postingbtn").click(async function () {
			let name = $('#name').val();
			let message = $('#message').val();

			/* name과 message가 null값에 업로드되는 현상을 막았습니다*/
			if (!name && !message) {
				alert('닉네임과 응원메시지는 필수 입력 항목입니다!');
				return;
			}
			let doc = {
				'name': name,
				'message': message,
				'timestamp': serverTimestamp() // 시간 저장
			};
			await addDoc(collection(db, "board"), doc);
			alert('저장 완료');
			window.location.reload();
		});

		// 저장된 게시물 불러오기
		let q = query(collection(db, "board"), orderBy("timestamp", "desc"));
		let docs = await getDocs(q);
		docs.forEach((doc) => {
			let row = doc.data();
			let name = row['name'];
			let message = row['message'];

			let temp_html = `${name}${message}
            `;

			$('#add').append(temp_html);
		});

#postingboxbtn에서는 name값과 message값을 넣었을때 firebase에 저장하여 쿼리에 저장된 게시물을 불러오게 하였다.

다만 아무값도 입력하지 않을땐 return하여 무조건 값을 입력해야만 게시물을 올릴수 있게 하였다.

</div>

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

<a href="https://github.com/username3" 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:username3@gmail.com" target="_blank"><i

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

<a href="https://www.naver.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>

<p><strong>장점:</strong> 가나다라마바사</p>

<p><strong>협업 스타일:</strong> 가나다라마바사</p>

</div>

</div>

</div>

</div>

<h4 class="card-role">EX 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="mailto:username4@gmail.com" target="_blank"><i

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

<a href="https://www.naver.com" 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">AI Engineer</h4>

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

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

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

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

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

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

<a href="https://www.naver.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>

<p><strong>장점:</strong> 가나다라마바사</p>

<p><strong>협업 스타일:</strong> 가나다라마바사</p>

</div>

</div>

</div>

</body>

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

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

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

</div>

</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">사업자등록번호 : 652-94-38472</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>

viewBox="0 0 16 16">

<path

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> Link to project

</a>

</div>

modal에 팝업 설정을하여 팀원 카드를 클릭할시 해당 팀원의 프로필이 나오게 설정하였다.

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

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

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

티스토리툴바