😂 미니 프로젝트 진행
😭 프로젝트의 전체적인 틀 기획
- HTML
- 총 3 부분의 div 태그로 구성
- 팀의 이름인 '2정2윤'을 보여주는 시작 페이지
- 팀 소개를 하는 두 번째 페이지
- 마지막으로 팀원들의 자세한 소개가 나오는 세 번재 페이지
- 해당 페이지에서 팀원들의 소개를 진행
- 적용 사항
-
폰트 적용
-
거의 구글 폰트를 사용하였지만, 좀 더 다양한 폰트를 찾기 위해
눈누사이트 이용 -
사용법
- 눈누 사이트에서 마음에 드는 폰트를 선택한 후, 다음과 같이@font-face부분을 복사
- 나는 현재 프로젝트의 전반적인 산출물에 폰트 적용을 하고 싶어* {font-family: 'GangwonEduPowerExtraBoldA';}를 사용했지만, 일부분만 적용하고 싶으면 그 부분에만 적용하는 것도 가능<head> <style> @font-face { font-family: 'GangwonEduPowerExtraBoldA'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEduPowerExtraBoldA.woff') format('woff'); font-weight: normal; font-style: normal; } * { font-family: 'GangwonEduPowerExtraBoldA'; } </style> </head>
-
-
버튼에
fadeIn()기능을 적용하여 처음 페이지를 로딩했을 때 천천히 나오도록 함$(document).ready()는 문서가 준비되면 매개변수로 넣은 콜백 함수를 실행하라는 의미- 즉, 문서가 준비가 되면 버튼을 각각 2초와 4초의 간격을 두고 화면에 나타내라는 의미
<head> <script> $(document).ready(function () { $('h1.mytitle').fadeIn(2000); $('button.btn').fadeIn(4000); }); </script> </head>
-
마지막 멤버들의 사진을 원래는 가로로 정렬하고 그 하단의 'view detail' 버튼을 누르면 정보가 나오도록 하려 했으나, 회의를 통해 세로로 하는 것이 더 낫다고 판단하여 변경
- 우리 팀은 멤버들의 사진이 세로로 나오도록 하자는 의견이 지배적이었고, 사진을 세로로 한 뒤 해당 페이지에서 사진이 왼쪽으로 움직이며 멤버들의 정보가 나오도록 구현하고 싶어함
- 왼쪽으로 가는 기능은 구현하였으나, 속도 조절이 되지 않았고 옮겨진 후 다시 css를 적용하고 싶었으나 나의 실력 부족과 구글링의 어려움으로 인해 일단 보류함
- 하단의 코드는 하나의
div를 3 개의column형태의div로 나눈 것이다. 우리 멤버들의 사진을 중앙에 넣어놓았고,$('div.first').appendTo($('.member'));함수를 사용해첫 번째 div로두 번째 div를 옮기고첫 번째 div와세 번째 div를 합칠 생각이었다. 하지만첫 번째 div와두 번째 div가 합쳐지게 되면서 나의 생각을 구현할 수 없었다.
<head>
<style>
.column {
float: left;
width: 33.33%;
}
/*The floats after the columns are cleared*/
.row:after {
content: '';
display: table;
clear: both;
}
</style>
<script>
function ccc() {
// $('.member').appendTo($('div.first'))
$('div.first').appendTo($('.member'));
// $('div.first').replaceWith($('.member'));
}
</script>
</head>
<body>
<div class="row">
<div class="column first"></div>
<div class="column member">
<img class="rounded-circle" src="https://ca.slack-edge.com/T039CS8AH0D-U039VKKRRF1-67b76fd7ee7b-512"
alt="Generic placeholder image" width="140" height="140" href="#" role="button">
<h2 class="who"><a id="btnLongtimeinfo" onclick="ccc()" class="plus_btn">윤성신</a></h2>
<img class="rounded-circle" src="https://ca.slack-edge.com/T039CS8AH0D-U03A07H489F-8d51d3be93c5-512"
alt="Generic placeholder image" width="140" height="140">
<h2 class="who"><a id="btnLongtimeinfo" href="" class="plus_btn">윤슬기</a></h2>
<img class="rounded-circle" src="https://ca.slack-edge.com/T039CS8AH0D-U039AJZCWUE-1898f77216d4-512"
alt="Generic placeholder image" width="140" height="140">
<h2 class="who"><a id="btnLongtimeinfo" href="" class="plus_btn">정대근</a></h2>
<img class="rounded-circle" src="https://ca.slack-edge.com/T039CS8AH0D-U03A0MUBSQH-0e4deb8911e1-512"
alt="Generic placeholder image" width="140" height="140">
<h2 class="who"><a id="btnLongtimeinfo" href="" class="plus_btn">정주현</a></h2>
</div>
<div class="column third"></div>
</div>
</body>
😭 느낀 점
- 대학교에서도 팀 프로젝트를 많이 해봤지만, 이번같이 즐겁게 한 적은 진짜로 없었던 것 같다. 뭔가 의견도 잘 맞고 서로 배려해주는 모습이 보기 좋아서인지 기능이 구현되지 않아도 너무 좋았다. 항상 코딩을 하면서 느끼지만 역시 코딩은 내 맘대로 절대 안 된다. 아니 내 맘대로 되면 그건 코딩이 아니다. 변태같은 마인드로 임해야 겠다.
- 서로에 대한 피드백이 온라인으로 진행되었지만 아주 잘 되었다. 너무 좋았다.
- 다음 프로젝트부터는 파트도 잘 나눠서 진행하도록 해야겠다. 팀장으로서 너무 문제를 해결하고 싶다는 생각에 빠져서 팀을 생각하지 못한 것 같다.
https://github.com/nikevapormax