[2023 동계 모각코] 2024-01-08(월) 결과

 

Github 프로젝트 관리 방법 스터디

 

다른 친구들과 프로젝트 성으로 홈페이지 제작을 진행하기 위해 github에 레포지토리를 생성했다.

프로젝트 진행과 관련하여 아래 사항들을 학습하여 정리하였다.

 

1. branch 관리

앞서 정의한 사이트 맵을 토대로 페이지별로 브랜치를 생성하고, 각 페이지가 완성될 때 main에 머지하는 방식으로 진행하려 한다.

페이지별로 브런치가 생성된 후에 github 홈페이지에서 보면 아래와 같다.

 

2. commit convention

• Subject
  
• Body
• Footer
  • Fixes: 이슈 수정중 (아직 해결되지 않은 경우) 
  • Resolves: 이슈를 해결했을 때 사용 
  • Ref: 참고할 이슈가 있을 때 사용 
  • Related to: 해당 커밋에 관련된 이슈번호 (아직 해결되지 않은 경우)

 

3. commit 예시

 

index.html 구현

 

HTML Tempalte을 이용하여 기존 컴포넌트를 수정하는 방식으로 진행하였다.

코드 수정 중 특이한 부분이 2가지 있어 해당 부분을 정리하고자 한다.

 

1. floating image 분석

 

템플릿에 이미지가 위아래로 움직이는 부분이 있는데 해당 부분이 신기해서 어떻게 사용되는지 코드를 분석해봤다.

 

JS로 움직임을 구현한 줄 알았는데 CSS로 간단하게 구현 가능하다.

아래 처럼 @keyframes을 사용해서 updown 함수를 정의하여 원하는 이미지에 class를 붙여주면 적용할 수 있다.

.slider_section .img-box img {
  width: 100%;
  -webkit-animation: upDown 5s infinite;
          animation: upDown 5s infinite;
}

@keyframes upDown {
  0% {
    -webkit-transform: translateY(-45px);
            transform: translateY(-45px);
  }
  50% {
    -webkit-transform: translateY(45px);
            transform: translateY(45px);
  }
  100% {
    -webkit-transform: translateY(-45px);
            transform: translateY(-45px);
  }
}

 

2. padding과 margin

위 페이지를 구현하면서 굵게 표시된 제목의 길이가 각각 달라 전체 박스의 크기가 다르게 나왔다.

문제는 박스의 패딩과 제목 부분의 마진을 고정값으로 줌으로써 해결할 수 있었다.

 

해당 부분을 수정하면서 부족했던 padding과 margin의 개념을 이해하는데 아래 글을 참고했다.

📎 [ofcourse] margin,padding 속성 

 

3. 최종 작업 결과