[TIL] 포트폴리오 페이지 제작, 깃헙, 부트스트랩

✍ Today I Learned

• 오늘은 포트폴리오 웹 페이지 사이트를 제작했다
• 작성하다 보니 어떻게 만드는가 보다 내가 얼마나 열심히 해야 하는가를 깨닫는 중
• 처음부터 완벽하려는 욕심에 시간이 많이 걸렸다.. 일단 완성하는 게 목표!
• Git 이란? 소스코드 버전 관리 시스템
• 버전 관리란? 수정한 각 파일이 충돌하지 않도록 수정된 사항이 있을 때마다 사진 찍듯이 저장해주는 것
• 원격 repo와 로컬 repo를 연결하려면?
  • 로컬 repo에서 원격 repo로 tracking 하고, 원격 repo commit 내역을 pull 해온다
  • 또는 원격 repo를 clone해온다 (주로 원격 repo에 어떤 내용이 있을 때 사용)
• 내 파일을 원격 repo, 그러니까 Github에 만들어 놓은 repo에 올리려면?
  • 파일 생성(혹은 수정) → 원격 repo와 연결된 폴더로 파일 이동(스테이징 상태) → 로컬 repo에 commit → 원격 repo에 push(1push = 1contribution)
• 협업을 할 때에는 기능별로 branch를 나누어서 작업 후 merge 한다
• 모를 땐 질문하고 반복학습 하자! 1일 1커밋 힘내자!

 

부트스트랩 반응형 페이지 보완점

• 폰트 사이즈는 em, rem 등의 단위로 주는 것이 반응형에 적합함
• transform: translateY(-30%); 이렇게 하면 Y축의 위치를 변경할 수 있음
• 본문이 수직으로 나열되어 있다면 한 컨테이너로 묶는 것이 컨트롤하기 편함(alert+card class="container")
• 한 섹션이 수평으로 나열되어 있다면 row class 사용하기(card class="row")
• 섹션안의 컨텐츠들을 반응형으로 만들고 싶으면 gird clas 사용하기(class="col-sm-6 col-lg-4 col-xl-3”)(참고자료)
• 크기를 상속받는 class들이 있어서 원하는 크기가 적용되지 않았을 수도 있음(ex. fontawsome으로 불러온 <i> 태그)
• 아래와 같이 <i> 태그 자체 class에 font-size: 20px !important; 적용하여 해결
• 줄 정렬이 되지 않은 부분은 vertical-align: middle; 적용하여 해결

.fa-user-circle {
    font-size: 20px !important;
    color: #5900E7;
    vertical-align: middle;
}