Today I Learned (미니 프로젝트)

오늘 한일

• 다른 팀원분의 방명록 페이지 레이아웃이 아쉬워서 팀장과 팀원들에게 디자인적인 요소를 작업하여 보여준 뒤 컨펌이 나서 코드 작성하여 완성시켰다.
• 구조적으로 html을 생각하고 짜지 않아서 css에서 굉장히 복잡해져서 팀원들에게 어떤 식으로 구조를 짜면 좋을지 물어보고 다시 코드 작성을 하였다. 오래 걸리던 부분이 금방 해결되었다.
• 수정한 방명록 html, css 부분을 수정하여 처음으로 브랜치를 파서 pull을 해서 파일을 올려보았다. 역시 유튜브가 최고다!

여기서 배운 점

• 구조적인 부분이 부족하여 팀원들이 보내준 링크가 도움이 되었다.
• CSS Grid 이 부분을 참고했다.
• 여기서 container로 큰 틀을 잡고 그 안에 박스 형태로 A, B, C, D를 잡아서 CSS 부분에서 display:grid로 하여 columns와 rows를 사용하여 완성시켰다.

HTML

<div class="guide-container">
      <div class="first-box">
        <div class="first-num">➊</div>
        <div class="first-txt">응원 === default</div>
      </div>

      <div class="second-box">
        <div class="second-num">➋</div>
        <div class="second-txt">피드백 Accept</div>
      </div>

      <div class="third-box">
        <div class="third-num">➌</div>
        <div class="third-txt">악플 Not defined</div>
      </div>

      <div class="fourth-box">
        <div class="fourth-num">➍</div>
        <div class="fourth-txt">무플 lgnore</div>
      </div>
    </div>

CSS

.guide-container {
  width: 570px;
  height: 180px;
  border: 5px solid black;
  border-radius: 30px;
  margin: 0 auto;
  justify-content: center;
  display: grid;
  grid-template-columns: 190px 190px;
  grid-template-rows: 60px 60px;
  grid-column-gap: 20px;
  grid-row-gap: 10px;
  padding-top: 20px;
  margin-top: 30px;
}

• 1. grid-template-columns 두 개의 기둥의 간격을 190px로 잡아주었다.
• 2. grid-template-rows 두 개의 행의 간격을 60px로 잡아주었다.
• 3. grid-row-gap 사용하여 행의 갭을 20px로 잡아주었다.

• 위 강의를 들어보라고 추천을 받았다!
• 드디어 git에 브랜치를 따로 만들어서 수정 파일을 push 올려놓았다!
• 일단 새로운 파일을 만들어서 터미널에 git clone http주소를 입력해서 파일을 다운로드한 뒤 수정파일을 업뎃해서 올렸다.
• git checkout -b park 을 쳐서 새로운 park이라는 공간 브랜치를 생성해 준다. 그리고 푸시를 해준다.

• 이 영상을 참고했다 정말 이해 쉽게 알려준다.

내일 할 일

• 대망의 발표의 날! 잘 준비해서 첫 팀 프로젝트 끝내보쟈!
• VS Code로 최종 파일 클론해서 외부 cmd를 사용해 파이썬 가상개발 환경 만들어보자!