6월 23일, HTML/CSS 프로젝트 둘째날

📃 오늘 한 것 📃

 

 

🎈Git 공동 작업 공간 생성 및 branch 에 대한 이해

 

https://github.com/h2s0/detective_22

GitHub - h2s0/detective_22: 멋쟁이 사자처럼 프론트엔드 스쿨 6기 프로젝트 2조 - 탐정 2조 작업 공간입

 

총 3개의 브랜치 생성 : main, dev, 개인 branch

 

개인 branch ➡ dev 후 pull request 를 보내면 확인 후 confirm / reject 하여 dev 폴더에 취합 후,

맨 마지막 최종 파일을 main 브랜치에 올린다.

 

사용 구역별로 이미지를 나누어 폴더를 만들었고, a11y와 초기값 셋팅에 필요한 css 파일을 같이 업로드 해 당겨와 쓸 수 있도록 업로드 해드렸다.

 

공동으로 써야 할 부분들은

git add .
git commit -m "공동 파일 업로드"
git push origin dev

이렇게 dev 브랜치에 업로드한 뒤, pull request 를 수락해주고,

git pull origin heeso

로 당겨와 쓸 수 있었다.

 

호님이 나 포함 git 초보인 팀원들에게 친절히 branch 의 개념에 대해 설명해주시고, push, pull 하는 방법을 알려주셔서 수월하게 진행되었다.

 

 

 

🎈header 마크업 개별 작성, 리뷰, 코드 수정 및 완료

• aria-label 과 alt 의 차이점 : 모든 곳에 들어갈 수 있는 aria-label, 이미지만의 속성인 alt
  
  
• 로고추가 방법 : HTML 이미지 ( 주요컨텐츠 ) / CSS 백그라운드 ( 주로 아이콘 )
  내 생각 : 로고는 "컨텐츠"는 아니기 때문에 CSS 백그라운드로 넣는게 더 적절하다.
  
  
• | 작성 방법 : HTML span 요소로 넣기 / CSS 가상요소로 넣기
  내 생각 : html에 넣어도 구조를 크게 헤치지 않는다. 개인의 편의대로

 

🎈파트 분배

 

우리 조가 선택한 시안은 마켓컬리 !!!

 

파트별로 나누려다가 결국 헤더 + 푸터는 공동 작업 후 페이지별로 분배 하기로 했다.

 

 + 헤더는 각자 작성 후 코드 리뷰, 마크업 1개만 pull 해와 라이브 화면으로 놓고 함께 class 명 수정 및 마크업 완성 단계로 진행하였다. 마크업 구조가 크게 차이가 나지 않았고, 푸터는 더더욱 차이가 나지 않을 것 같았고 시간도 없어서 파트 배분에 넣기로 하였다.

 

시간을 많이 잡아먹었음에도 같이 해보며 접근성에 대한 토론, 모르는 것 바로 이야기 나누어보기, 각 팀원의 이해도 파악에 아주 값진 시간이었다.

메인, 회원가입, 로그인

상품리스트, 제품리스트1, 2

장바구니, 후기, 문의 작성 팝업

 

윤후 : 로그인, 팝업, add-cart, 카테고리 hover
희소 : 회원가입, 푸터, ( 상품 리뷰문의 팝업 )
혜인 : 메인
송이 : 상품리스트
호 : 장바구니, ( 상품 상세페이지 )

 

주말에 마크업 작성 끝내기, CSS 최대한 많이 완성하기

 

 

🎈약속

 

kebab-case🌯, bem__patten🐍 사용

scss , windtail, css 중 css 사용해 스타일링

각각의 페이지 별 폴더 생성, 폴더 안에 html, css 파일 만들기

페이지 이름으로 파일 만들기 ex ) login.html , login.css / detail.html , detail.css

 

---

프로젝트가 진행되니 불안하고 막막한 마음이 사라졌다. 내 파트 열심히 만들고 연구해서 팀에 도움이 되고 싶고, 팀원들에게 좋은 조장이 되고 싶다. 나만의 몫을 챙기고, 프로젝트를 완성"만" 하는 결과보다는 시간이 더 걸리더라도 팀원 모두가 모르는 것을 다 이해하고 지식을 얻어가는 시간이 되었으면 좋겠고, 외형만 구현하기보다는 강사님이 항상 강조하시던 접근성을 가장 많이 고려한 페이지를 만들고 싶다.