1. Git & Roll
간단한 미니 프로젝트로 웹사이트를 HTML과 CSS만을 사용해 각자 한 페이지씩 따라 만들어보게 됐다.
Git 을 활용해 모르는 사람과 협업하게 되었는데 아주 간단한 방식으로 진행하려고 한다.
팀장을 정해 Git organization 으로 리포지토리를 생성 후 README.md, common.css 등 기초 설정을 한 뒤
Git clone을 통해 가져와 각자의 브랜치에서 작업하기로 했다.
따라하기로 한 웹사이트는 픽사
그 중에서 내가 고른 페이지는 CAREERS 페이지
사진과 텍스트가 모두 적절히 섞여 있어 선택했다.
Pixar Animation Studios
A COLLABORATION BETWEEN ART & TECHNOLOGY At Pixar, our goal is to make great films with great people. We are proud of our tradition of creative and technical excellence and are always looking for talented people to enrich our work and our community. We b
www.pixar.com
각자 맡을 페이지를 정한 후
모든 페이지에 공통적으로 적용되는 헤더와 푸터를 다함께 정할 지 고민했는데
연습을 위해 모두 만들어본 뒤 하나를 선택하기로 했다.
반응형은 시간이 되면 다같이 해상도를 정하기로 했는데
막상 작업하다 보니 좀더 세밀하게 계획을 세우지 못한 것 같아 아쉬움이 남는다.
다음 팀프로젝트에서는 미리 회의 항목을 정해가야겠다.
2. 첫날 회고
1) 작업 방식 개선 필요
처음 HTML 구조를 잡은 후
위에서부터 마진과 패딩, 폰트 사이즈 등을 잡아가면서 작업했는데
집 오면서 생각해 보니
좀더 큼직하게 flexbox, block, 정렬 등 전반적인 배치를 잡은 후
패딩, 마진이나 폰트, 컬러와 같은 디테일을 잡는 것이 효율적일 듯 하다.
그랬다면 오늘 푸터까지 배치는 끝내지 않았을까 싶다.
2) 좀더 효율적이고 깔끔한 HTML 구조
우선 웹사이트의 화면단만 참고하여 작성 중인데
마음만 앞서서 세밀한 계획 없이 만들다 보니 중간에 감싸는 태그를 추가하는 일이 생겼다. 물론 플러그인 덕분에 수정이 어렵진 않았지만 한 번에 만드는 연습이 필요하지 않을까.
코드부터 작성하지 말고 따로 구조부터 분석해야 겠다.
3) 문제
- 폰트 적용
그동안 구글폰트 등 웹폰트나 PC에 기본적으로 저장되어 있는 글꼴을 사용해왔으나
픽사 사이트에 적용된 폰트는 웹폰트로 찾지 못해서 적당한 무료폰트를 다운받아 사용하게 됐다.
해결 : 설치한 ttf파일명과 동일한 이름을 font-family 속성에서 사용하면 적용된다.
- 이미지 위치 조정
ul>li img 를 ul 에서 display: flex 로 n행 m열로 배열했을 때 원하는 부분만 보여주려고 한다.
img 태그에 position으로 조정한 뒤 특정 img만 다르게 조정하려고 했더니 모두 적용되는 현상이 발생했다.
해결 중 : last-child, 명시도 점수, img 관련 개별 클래스를 만들고 position 사용 등 시도 중이다.
- git 백업
clone 해왔기 때문에 이미 organization의 리포지토리로 원격 연결되어 있는 상태.
집에서 좀더 살펴보기 위해 push 하려고 하는데
백업을 목적으로 팀장에게 pull request 보내는 것은 아닌 듯 해서 고민했다.
해결 : 개인 리포지토리를 추가로 remote add 했다.
원격 이름을 origin 처럼 통상적으로 사용하는 이름을 제외하고 만들어 연결한 뒤
push [추가한 원격 이름] [현재 브랜치 이름] 으로 오류 없이 push 되었다.
