비전공자인 나에게 첫 팀 프로젝트의 기회가 주어졌다.
웹 개발 종합 강의 들은 것을 기반으로 만들어 보기로 했다.
맨땅에 헤딩 하는 느낌이다. 그래도 한번 해 보자!!
주제는 생각보다 쉽게 정했다.
기본틀을 만들기 위해 UI를 검색하던 중 Uizard라는 사이트를 발견하였다.
팀원들을 초대하고 공동 작업으로 UI를 만들었다.
공동 작업을 위한 준비 과정
깃, 깃허브를 다운 받았다. 어떻게 쓰는지 막혀 열심히 검색을 하던 중 깃 팀장이 깃허브에 프로젝트를 생성하였다.
팀원에게 도움을 받아 github Desktop을 통해 연동을 성공하였다.
팀원이 알려준 것: github desktop 에서 파일열기 -> 수정 -> source control 에서 수정부분 메세지 달고 commit -> github desktop 에서 pull 하기
팀원 소개를 분배받고 본격적으로 웹페이지 만들기를 시작했다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>팀원소개</title>
<style>
.icon {
width: 70px;
height: 70px;
background-color: green;
background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR0_60ErDoAcIcGwIIi3cD9wTc5QuivjgngbEEQdRaonvkIdMbZbbgAKi-Lfgyem8z7n6k&usqp=CAU);
background-position: center;
background-size: cover;
}
.header {
top: 0px;
left: 0px;
width: 100%;
height: 96px;
background-color: #c8edfd;
border-bottom: 1px solid #c1c1c1;
box-sizing: border-box;
}
.headtext {
color: #030303;
font-size: 64px;
font-family: "Oswald";
font-weight: 700;
line-height: 83px;
text-align: center;
}
.teamName {
color: #030303;
font-size: 56px;
font-family: "Playfair Display";
line-height: 72px;
text-align: center;
}
.mebermain{
background-color: green;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.meberimage {
margin: 30px auto 0px auto;
width: 200px;
height: 187px;
border-radius: 10000px;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.mainimage {
margin: 30px auto 0px auto;
width: 450px;
height: 400px;
border-radius: 1000px;
border: 1px solid #505050;
box-sizing: border-box;
background-image: url(https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FApUIo%2FbtsGjPDkNsh%2FfI7eViTO0JhhLEj6EayhFK%2Fimg.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<header class=" header">
<div class="headtext">Spring Java 5기</div>
</header>
<h1 class="teamName">
<div> <img class="icon"
src=https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ2UQ0RieM_rPh5jKzbUKMDjF6nCxbpm0Dpnw&s alt="">
한잔해(17조)</div>
</h1>
<h2 class="mainimage"> </h2>
<div class="mebermain">
<ul class="member1">
<img class="meberimage"
alt="병익사진">
<li class="list-group-item">팀장</li>
<li class="list-group-item">이병익</li>
<li class="list-group-item">INTP</li>
</ul>
<ul class="member2">
<img class="meberimage"
alt="정근사진">
<li class="list-group-item">팀원</li>
<li class="list-group-item">류정근</li>
<li class="list-group-item">INTP</li>
</ul>
<ul class="member3">
<img class="meberimage"
alt="성훈사진">
<li class="list-group-item">팀원</li>
<li class="list-group-item">조성훈</li>
<li class="list-group-item">INTP</li>
</ul>
</ul>
<ul class="member4">
<img class="meberimage"
alt="지환사진">
<li class="list-group-item">팀원</li>
<li class="list-group-item">김지환</li>
<li class="list-group-item">ISFJ</li>
</ul>
</div>
</body>
</html>
오늘의 결과물~ 나머지는 내일
'미니 프로젝트' 카테고리의 다른 글
| 칵테일 저장용(소주) (0) | 2024.04.05 |
|---|---|
| 파이어 베이스 연동기(1) (0) | 2024.04.04 |
| 칵테일 이미지, 정보 저장용(보드카) (0) | 2024.04.04 |
| 칵테일 이미지, 정보 저장용(위스키) (0) | 2024.04.04 |
| 사진 업로드용 (0) | 2024.04.02 |