Sparta/Today I Learned
TIL 03) 2022.04.20 (수) | 미니 팀프로젝트 시작 XD
LULULALA_
2022. 4. 20. 22:36
오늘은 처음으로 프로젝트를 하는날!
처음이기 때문에 팀 프로젝트이지만 똑같은 걸 각자하는 게 더 많은 미니 프로젝트를 시작했다.일정은 이틀정도로 되어있지만 하루는 개인페이지 하루는 팀페이지를 만들어야 하기 때문에 빠르게 시작해야했다.
필수로 들어가야하는 내용은 이미 정해져 있기 때문에, 기획단계에서는 주로 레이아웃에 대한 이야기를 많이했다.
필수로 구현해야되는 과제는 필수 이외의 내용 중에 어떤 부가과제를 해결할 지에 대해서 논의했다.
[미니 프로젝트 내용]
더보기
[04/20] 미니 프로젝트: 자기소개 페이지 만들기
⏰ 1차 프로젝트 타임라인(4/20 ~ 4/22)
4/22 (금) 오후 1시까지 : 프로젝트 마무리 및 시연 영상 녹화본 제출(1인 3분 내외)
4/22 (금) 오후 2~4시 : 발표
4/22 (금) 오후 4~6시 : 팀 별 회고
참고 ☞ https://teamsparta.notion.site/220420-AI-40b7753d34cd4aec8e3c3ab347d79524
개인페이지 마감: 21일 오후 3시까지
메인페이지: 개인페이지 마감 이후
자신에 대한 설명 - 메인페이지 멤버카드
- 해시태그에 취미!
- MBTI
- 객관적으로 살펴본 자신의 **장점**
- **협업**을 하는 과정에서의 자신의 스타일
- 각자의 블로그 주소 - 픽토그램 누르면 각자 페이지로 이동!
추가기능)
- 플라스크를 활용한 요청 및 응답기능 추가하기
- 마우스 호버 기능 및 css 애니메이션 추가 - 픽토그램이 커지는 기능?
- 모바일 버전을 고려한 페이지 작성 (미디어 쿼리)
- 배포 및 테스팅
What I Did?
"팀을 소개하는 홈페이지를 만들어보자" - Mini project
- 팀 페이지 - 팀원의 멤버카드
- 개인 페이지 - 각자의 취향껏 꾸민 프로필 페이지
1. 기획
→ "배경" : 본인의 특색을 잘 나타나도록 취향껏!
→ "# 해시태그" : 취미나 본인을 잘 나타내는 키워드
→ "픽토그램" : 개성껏 픽토그램 활용
(+) 픽토그램을 활용한 하이퍼링크
블로그 아이콘은 클릭하면 본인의 블로그로 이동
→ "한줄각오" : 개발자로서의 포부 or 되고싶은 미래상
→ 필수포함내용
1. MBTI 소개
2. 객관적인 본인의 장점 소개
3. 협업할 때 본인의 스타일 소개
2. 프로젝트 진행
- div로 초기 레이아웃을 잡는 것부터 진행 → 각 div에 배경색을 넣어 영역을 확인해가며 수정
- 배경이미지 삽입 → url이 아닌 로컬이미지를 사용해 넣을 때 어려움을 겪었음
- wrap으로 프로필을 올려줄 하얀 페이지 만들기 → 오른쪽 위 대각선으로 잘린 모양 만들기 (팀장님의 하드캐리)
- 프로필 사진 구역 레이아웃 설정 → 지금껏 한줄한줄씩 내려가는 형태로만 작성해봐서 레이아웃을 짜기 어려웠음
- 전체 및 부분 폰트설정 → h1~h4에 폰트 및 폰트크기를 커스텀해줌(폰트설정은 CSS에 취미가 있으신 팀원분의 도움을 받았음)
3. 추가과제 진행
팀에서 토의한 결과 1, 2번의 추가기능을 구현하기로 함
- 플라스크를 활용한 요청 및 응답기능 추가하기 - 플라스크를 이용한 방명록 작성 및 방명록 리스트 추가
- 마우스 호버 기능 및 css 애니메이션 추가 - 버튼을 활용한 호버기능 및 방명록 작성창을 열고 닫을 수 있는 기능 추가
KEEP
- 구글링 및 네이버 검색을 통하여 내가 짠 레이아웃을 구현하기 위해 내가 모르는 HTML, CSS 기능을 검색해서 핑퐁을 통해 하나하나 수정하면서 만들어가면서 배우는 것이 많았음
- 프로젝트 중간중간 팀원 간의 진행사항을 공유하면서 서로의 좋은 아이디어를 배우고 적용함
PROBLEM
[로컬이미지 삽입문제]
index파일과 이미지 폴더가 같은 곳에 있지 않아 생기는 문제였음
같은 디렉토리에서는 "images/이미지이름.png"으로 이미지를 간단하게 넣을 수 있다.
[방명록 작성창 열고닫기 기능이 구현이 안되는 문제]
style 을 작성하다 보니 script를 쓸 때, function 에다가 $('#id값') 을 입력해야하는데 class 값을 입력하는 바람에 생긴 오류였다.
[flex를 이용한 레이아웃 가로배열 문제 + 세로배열과 혼합]
가로로 배열해줄 (파란영역)프로필사진과 나머지 두개영역을 한 div로 묶고
div를 사용하여 세로로 배열해줄 (초록영역)글과 (주황영역)이미지를 한번 묶었음
display: flex;
flex-direction: column or row;
align-items: center;
justify-content: center;flex-direction 방향을 이용해 각각 다른 배열로 맞춰줌
[각 이미지, 글 간의 간격 문제]
각 이미지와 글 간의 간격을 일일이 설정하려니 너무 힘들어서
일일히 간격을 주지 않더라도 자동으로 간격을 잡아주는 방법으로 바꿈
팀장님이 알려준 팁) 부모 div에서 flex를 주면 자식 div들은 자동으로 flex값을 가져감.
"flex: 비율;" 로 각 자식 클래스들이 나눠가질 비율을 설정해주면 알아서 남은 공간에서 적절하게 자리를 차지함
TRY
- 기능을 먼저 구현해야하는 게 맞는데, 자꾸 간격에 대해서 마음 쓰게 되어서 프로젝트가 늦어지는 것 같아서 해야할 일 순서를 정해놓고 각 진행사항 별로 시간을 얼마나 줄 것인지 미리 정해야되겠다고 생각했음
[오늘의 결과물]
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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>
<title>코못죽 | 이현경</title>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&family=Nanum+Pen+Script&display=swap"
rel="stylesheet">
<style>
* {
font-family: 'Nanum Gothic', sans-serif;
}
h1, h2, h3 {
font-family: 'Nanum Pen Script', cursive;
text-align: center;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.7em;
}
h3 {
font-size: 1.7em;
}
h4 {
font-size: 1.3em;
font-weight: bold;
}
hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}
body {
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('images/background1.jpg');
background-size: cover;
}
.wrap{
width: 900px;
background: antiquewhite;
background-position: center;
margin: auto;
margin-top: 10%;
background: linear-gradient(225deg, transparent 45px, white 0);
border-top-left-radius: 50px;
padding: 10%
}
.profile-box{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.profile-image {
width: 200px;
height: 250px;
}
.profile-contents{
width: 550px;
height: 250px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.profile-img{
width: 200px;
height: 200px;
}
.hash-tags > hr {
margin-top: 30px
}
.flaticon-box{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.flaticon-box > div {
margin-top: 30px;
margin-left: 50px;
font-size: smaller;
}
.text-box{
height: 200px;
color: gray;
margin: 30px auto 30px auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.content-box1 {
margin-top: 30px;
}
.mbti-box{
display: flex;
align-items: center;
}
.content-box1 > img {
flex: 1;
}
.mbti-contents{
flex: 2;
}
.mbti-contents > button {
background-color: darkcyan;
color: white ;
width: 35px;
height: 35px;
}
.content-box2{
margin-top: 30px;
}
.content-box3{
margin-top: 30px;
}
.footprints-title{
margin-top: 70px;
}
.footprints-title > button {
width: 300px;
border-radius: 50px;
display: block;
margin: auto;
}
.footprint-box {
margin-top: 30px;
display: none;
}
.comments-btn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin: 30px auto;
}
.comments-btn1 {
width: 300px;
border-radius: 50px;
margin-right: 30px;
}
.comments-btn2{
width: 100px;
border-radius: 50px;
}
.commnets-list{
margin-top: 50px;
}
</style>
<script>
// $(document).ready(function () {
// listing();
// });
//
// function listing() {
// $.ajax({
// type: "GET",
// url: "",
// data: {},
// success: function (response) {
// }
function open_box() {
$('#footprint-box').show()
}
function close_box() {
$('#footprint-box').hide()
}
// fuction posting() {
//
// }
</script>
</head>
<body>
<div class="wrap">
<div class="profile-box">
<div class="profile-image">
<img class="profile-img" src="images/profile1.png"/>
<h1>이현경</h1>
</div>
<div class="profile-contents">
<div class="hash-tags">
<h2># 냥냥이 랜선집사 # 방콕러</h2>
<h2># 웹소설 # 인테리어</h2>
<h2># 프로 칼바람러<img src="images/imoticon.png" width="30" height="30"/> # 스팀게임</h2>
<hr width="60%">
</div>
<div class="flaticon-box">
<div>
<img src="images/influencer.png" width="40" height="40"/>
<p> 냥냥이💕</p>
</div>
<div>
<img src="images/game.png" width="40" height="40"/>
<p>LOL_aram</p>
</div>
<div>
<img src="images/book.png" width="40" height="40"/>
<p>웹소설</p>
</div>
<div>
<a href="https://lululala-2.tistory.com/"><img src="images/blog.png" width="40" height="40"/>
<p>블로그</p></a>
</div>
</div>
</div>
</div>
<div class="text-box">
<img src="images/callout1-1.png" width="30" height="30"/>
<br>
<h3>"만들어 보고 싶은 건 많고 아직은 이룰 능력이 없지만,
<br>언젠가 해보고 싶은건 다 해보고 사는 사람이 되겠어요!"</h3>
<br>
<img src="images/callout2-1.png" width="30" height="30"/>
</div>
<div class="content-box">
<div class="content-box1">
<h4><strong>[MBTI 소개]</strong></h4>
<div class="mbti-box">
<img style="margin: auto 30px auto 20px"
src="https://blog.kakaocdn.net/dna/pWnAL/btq3VNKmQt9/AAAAAAAAAAAAAAAAAAAAAC_s3I4pqMPP5XfZnXklia2eUnFCUAWR8YYFnqaiWymp/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=Qchs2C8MPIm%2FEN3Kq%2BLyeZvXPTY%3D" width="180"
height="300"/>
<div class="mbti-contents">
<h2># ISFJ # 용감한 수호자 # 관리자형</h2>
<br><button type="button" class="btn btn btn-info">I</button>
낯을 가리고 있어도 간혹 티가 안날 수 있어요 😢
<br>I들 사이에서는 인싸이지만, E들 사이에서는 얌전히 고개만 끄덕이는 아웃사이더입니다.
<br><button type="button" class="btn btn btn-info">S</button>
현재에 즐기는게 최우선 목표에요 💁♀️🎉
<br><button type="button" class="btn btn btn-info">F</button>
친구가 이야기하는 것에 머릿속은 해결책부터 내놓지만, 말과 행동은 항상 친구편을 들어줍니다 🙃
<br><button type="button" class="btn btn btn-info">J</button>
이 사람은 성실하게 게으른 프로계획러입니다. 게을러서 마감시간 전까지 최대한 놀 수 있을 만큼 놀고 성실해서 마감전까지 어떻게 됬던 일을 끝내기로 계획해요 😫
</div>
</div>
</div>
<div class="content-box2">
<h4><strong>[타인이 본 나의 장점은?]</strong></h4>
<p>이러한 성격입니다.</p>
</div>
<div class="content-box3">
<h4><strong>[팀프로젝트에서 나는 어떤 스타일?]</strong></h4>
<p>이러한 스타일입니다</p>
</div>
</div>
<div class="footprints-title">
<h1>발도장<img src="images/footprints.png" width="45" height="45"></h1>
<button onclick="open_box()" type="button" class="btn btn-outline-secondary">발도장 찍으러가기!</button>
</div>
<div class="footprint-box" id="footprint-box">
<div class="form-group">
<label for="exampleInputEmail1"></label>
<input type="text" class="form-control" id="exampleInputEmail1" placeholder="Name">
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1"></label>
<textarea class="form-control" id="exampleFormControlTextarea1" placeholder="comments" rows="3"></textarea>
<small id="emailHelp" class="form-text text-muted">방문하신 기념으로 짧게 코멘트를 남겨주세요~ 들려주셔서 감사해요!</small>
</div>
<div class="comments-btn">
<button onclick="posting()" type="button" class="btn btn-outline-secondary comments-btn1">발도장 남기기!</button>
<button onclick="close_box()" type="button" class="btn btn-secondary comments-btn2">닫기</button>
</div>
</div>
<div class="commnets-list">
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Comments</th>
</tr>
</thead>
<tbody>
<tr>
<td>number</td>
<td>name</td>
<td>comments</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>