1주차 프로젝트 (기간 04.15 ~ 04.18)
목적
- 사전캠프 및 웹개발 종합반 강의를 배웠던 부분을 토대로 팀원과 협업을 통해 팀원을 소개하는 페이지만든다.
개인 과제
- 팀원 이미지 출력 및 이미지 고정, 버튼 형성
- GitHub 생성 및 브랜치, 배포
작성 코드
<style>
/* 프로필 이미지*/
.team-introduction {
margin: auto auto 20px auto;
height: 1100px;
width: 1500px;
display: flex;
}
.rigth {
width: 300px;
height: 300px;
border: 1px solid black;
float: left;
box-sizing: border-box;
}
.cardbox {
width: 700px;
float: left;
margin: 20px;
}
.team-introduction img {
border-radius: 30%;
width: 200px;
height: 200px;
object-fit: cover; /*이미지 크기 고정*/
margin: 15px;
}
.card {
background-color: transparent;
border: transparent;
align-items: center;
margin: 10px;
}
.card-title {
text-align: center;
}
/* 프로필 이미지 끝*/
</style><body>
<!-- profile image cardbox -->
<section class=" team-introduction mb-4">
<div class="cardbox">
<h2 class="text-center mb-4"></h2>
<div class="row">
<div class="col-6">
<div class="card" style="width: 80%;" id="turkeyTeam" type="button">
<a data-tooltip="팀 소개"><img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSy9FcFJW-ZmM1RtnCsmZL20mu53eq4DQopSI6VR3wfxsG7Beo8"
class="card-img-top" alt="Team Member 1"></a>
<div class="card-body">
<h5 class="card-title">7면조</h5>
</div>
</div>
</div>
<div class="col-6">
<div class="card" style="width: 80%;" id="shin" type="button">
<a data-tooltip="대장 칠면조"><img
src="https://velog.velcdn.com/images/dotofi/post/af561952-304a-4b32-9ead-807841b230be/image.jpg"
class="card-img-top" alt="Team Member 1"></a>
<div class="card-body">
<h5 class="card-title">신성훈</h5>
</div>
</div>
</div>
</section>
<!-- profile image cardbox -->
</body>- 출력 된 결과물
GitHub 생성
git init
git config --global user.name <hoon> //Github 사용할 닉네임
git config --global user.email <e-mail> //Github 로그인 이메일 주소
git remote add origin https://github.com/seonghoon90/Turkey.git
git branch -M main
git push -u origin mainGitHub Brach 생성
git branch hoon
git checkout hoon
git add .
git commit -m "new hoon branch"
git push origin hoonGitHub 배포
- GitHub 배포 후 "404 error" 발생하였고 원인 확인 결과 main.html로 이용 하였으나 index.html만 되는 걸 확인 하여 하기 명령어를 통해 변경작업
방법 1 -> 파일명 변경
git mv main.html index.html
git status
git add .
git commit -m "main에서 index로 이름 변경"
git push origin hoon
방법 2 -> index.html 추가 후 main.html로 바꾸는 코드 작성하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style></style>
<script>
// location.href='이동시킬 주소';
location.replace('main.html');
</script>
</head>
<body>
</body>
</html>물론 장단점이 있다고 생각한다.
방법 1번의 경우 페이지가 여러개 있을경우 해당 경로를 사용하는 코드를 찾아 다 변경해줘야 한다.
하지만 페이지가 한 개일 경우 무관하다.
방법 2번의 경우 페이지를 많이 연동하여 사용하는 경우 해당 2번의 방법이 적절하다고 생각한다.
📝오늘의 회고
사전캠프에서 들어오자 마자 프로젝트를 시작하여 힘들었는데 처음에 힘들게 배운 만큼 두번째 프로젝트는 수월하게 진행했던거 같다.
하지만 다른조 시연 발표를 보고 우리조가 너무 심플하게 만들었다는 것을 인지하였고 웹개발 종합반 강의에서 배운 내용을 다 적용하지 못한거 같아 아쉬움이 많이 남았던 프로젝트였고 다음 프로젝트에서는 더 구현해보고싶다는 생각이 들었습니다.
이번에 조장을 하면서 GitHub에 대해서 잘 몰랐던 내가 팀원들에게 GitHub 사용법을 알려주게 되었고, 프로젝트하면서 이미지 크기가 제각각으로 고정이 되지 않아 해결되지 않았던 부분을 해결하고 GitHub배포 후 error를 확인하면서 잘하고 있구나 한발자국 더 나아가본다.
가보자고~~~!!!
조급해하지 말고, 흐름을 만들고, 기록하면서 쌓아가자.