스파르타 코딩클럽_내일 배움 캠프 spring 트랙 6기
[프로젝트] 팀 소개페이지 미니 프로젝트
2023.05.15 ~ 2023.05.19
<프로젝트 정보>
개발도구 : Visual Studio Code
프로그래밍 언어 : Python
데이터베이스 : MongoDB
프레임워크 : Flask
라이브러리 : venv
와이어프레임 : Figma
<프로젝트 내용>
작일 회의하고 제작했던 와이어 프레임과 S.A.를 바탕으로 각자 영역을 나누어서 코드 작성을 진행했다.
프론트엔드와 백엔드 구분이 아닌, 영역으로 구분하여 팀원 모두가 다양하게 작업을 해볼 수 있었다.
내가 맡았던 영역은 멤버 사진과 이름, 그리고 멤버 사진을 클릭하면 멤버 개인 상세프로필로 연결되는 기능을 구현하는 것이었다.
onclike 메소드를 이용하여 작업하였고, git push를 이용해 branch 연결하고, commit update하는 기능도 연습해보았다.
<index.html>
<!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>Member</title>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
<style>
.title{
padding: 30px;
}
.member{
padding-left: 70px;
padding-right: 70px;
}
.name{
margin: auto;
}
.card {
border-color: white;
}
.click_img{
border-radius : 100%
}
</style>
<script type="text/javascript">
function profile() {
popupWindow = window.open();
popupWindow.resizeTo(430, 660);
popupWindow.onresize = (_=>{
popupWindow.resizeTo(430,660);
})
}
</script>
</head>
<body>
<div class="title">
<h2>MEMBER</h2>
</div>
<div class="member">
<div class="row row-cols-1 row-cols-md-5 g-2">
<div class="col">
<div class="card h-100">
<img src="멤버이미지url"
class="click_img" alt="..." onclick="profile()">
<div class="name">
<h3>팀장</h3>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="멤버이미지url"
class="click_img" alt="..." onclick="profile()">
<div class="name">
<h3>멤버1</h3>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="멤버이미지url"
class="click_img" alt="..." onclick="profile()">
<div class="name">
<h3>멤버2</h3>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="멤버이미지url"
class="click_img" alt="..." onclick="profile()">
<div class="name">
<h3>멤버3</h3>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="멤버이미지url"
class="click_img" alt="..." onclick="profile()">
<div class="name">
<h3>멤버4</h3>
</div>
</div>
</div>
</div>
</div>
</body>
</html>'🏕️내일배움캠프 > 📂팀원 소개 페이지 만들기(23.05.15)' 카테고리의 다른 글
| 귀여운 Spring A반 5조 모음 :) (0) | 2023.05.19 |
|---|---|
| 팀원 소개 페이지 5일차-코드 발표 및 회고 (1) | 2023.05.19 |
| 팀원 소개 페이지 4일차-몽고 DB에 개인 데이터 저장하고 연결해보기+멤버 이미지 연결 코드 수정(git 사용) (0) | 2023.05.18 |
| 팀원 소개 페이지 3일차-멤버 소개 git으로 코드 합치기 (0) | 2023.05.17 |
| 팀원 소개 페이지 1일차_S.A.와 와이어프레임 제작 (0) | 2023.05.15 |