기본 레이아웃 작업
•
네비바 고정 레이아웃 잡기
•
헤더 레이아웃 잡기
협업 시 제일 처음 할일!
develop 브랜치로 git clone 받기
•
issue 작성
•
충돌나지 않도록 최신상태의 git 레포 받아온 뒤 브랜치 새로 만들어서 작업하기
◦
git pull origin develop
◦
git branch 브랜치명
◦
git branch // 생성된 브랜치 확인
◦
git switch 만든브랜치명
노트북이랑 핸드폰 네트워크는 보통 공유기로 공유되기 때문에 npm start 했을 때 나오는 On Your Network 주소로 들어가면 화면을 볼 수 있다!
핸드폰 환경 작업시 주의!
•
vh와 svh의 차이 알아두기!!
◦
@media를 넣어주는 이유는 특히 아이폰 사파리 브라우저에서 주소창과 네비바 영역 안에서 컨텐츠가 보일 수 있도록 작업해주기 위함! (이 작업을 안해주면 스크롤이 생겨버림)
<S.Container> → 검은색 box 영역
<Outlet> → 페이지들을 나타내줌
<S.style변수명>
<Outlet>
</S.style변수명>
JavaScript
복사
•
Outlet을 쓰는 이유는 네비바같이 거의 모든 페이지에서 써야하는 컴포넌트들을 한번만 선언하도록 함으로써 반복작업을 줄이기 위함!
숙제~~
오늘 작성한 코드 직접 쳐보고 구조 파악하기!
•
이미 전체 wrapper에서 max-width값을 줬기 때문에 nav의 width를 100%로 줘도 전체 box 영역만큼만 차지하게 된다.
피그마에서 svg 파일 받는 방법!
원하는 아이콘 선택하고 Export 탭에서 svg 파일 선택!
border-box!
•
padding까지 포함해서 패딩값을 넣어줌! 이 속성 안주면 패딩까지 합쳐져서 전체 wrapper보다 사이즈가 커지니 주의할 것!
디자인
•
메인컬러 확정
◦
#495472
•
피그마 디자인 정리 (승미 - 아이콘 정리)
