[ 1주차 기본/심화/생각 과제 종합 ]

[Chanwoo-Jeong]

✨ MyStore 구현 기능 명세

- 구현 결과물

Mystore.mp4

- 기본 과제

1. header , nav, card section으로 나누어 구현합니다.✔️
   1. header
      1. 상표와 메뉴 아이콘을 가지며 space-between를 사용합니다.✔️
      2. 스크롤이 되어도 상단 고정입니다.✔️
         - position : fixed 를 통해 구현
   2. nav
      1. 카테고리는 전체, 분류1, 분류2, 분류3 총4가지로 구현됩니다.✔️
2. nav, card section 은flex 또는 grid를 사용하여 배치합니다. ✔️
3. 상품 카드 안에는 상품제목, 해시태그 목록, 이미지, 하트 찜 누르기 가 들어있습니다.✔️
   1. 가운데 정렬은 필수 입니다.✔️
   2. 해시태그를 보여주는 곳은 특정 길이를 벗어나면 뒤의 태그는 안보입니다.✔️
      - overflow:hidden ; word-break: keep-all; 를 통해 구현

- 심화 과제

1. hover
   1. header
      1. 가려져있던 메뉴바가 옆에 나타나고, 상품 추가와 찜 목록 리스트가 나타납니다.✔️
      2. 특정 너비를 가지며, 높이는 100vh 입니다.✔️
   2. nav
      1. 배경과 글자색이 변경됩니다.✔️
2. 반응형레이아웃
   1. header, nav는 세로 정렬✔️
   2. 상품 카드들은 5→ 4→3 → 2 → 1 로 줄어든다✔️
      단 . 마지막 한줄 정렬시 가운데로 상품 카드 레이아웃이 변경됩니다.✔️

- 생각 과제

Think.md에 작성 ✔️

🌼 PR Point

• header 바에 있는 전체 , 새상품 추가 , 찜목록을 처음에는 노출시킨 후 브라우저 너비가 1000px 이하로 줄어들면 햄버거 버튼생성으로 반응형으로 작업하였습니다.

• 차후 찜버튼을 누르면 찜목록페이지에서 확인할 수 있어야하는 것 까지 고려해 찜버튼을 input checkbox와 label 을 결합하여 찜데이터를 이용할 수 있도록 구성하였습니다.

• 왼쪽 카테고리 네비게이션도 position : sticky를 통해 scroll을 따라다니게 구현하였습니다.

• 단조로운 css가 싫어 카드 주변에 에니메이션 효과를 줘보았습니다.

🥺 소요 시간, 어려웠던 점

• 6시간 정도 소요

• 다른부분은 많이 어렵지 않았는데 에니메이션 효과에서 거의 3시간 쓴거같습니다.

• 햄버거 버튼 클릭시 main 파트와 햄버거사이드바 파트의 z-index 가 이상하게 충돌되어 햄버거 사이드바 를 가장 앞으로 데려오느라 애좀 먹었습니다.
  (덕분에 z-index보다 중요한 것은 부모요소의 depth를 꼭 확인해야한다는 교훈을 얻었습니다.)

• 현재 브라우저 창이 줄어들면 카드자체의 넓이도 줄어드는 것 같아 차후 보완해보겠슴다.🔥

✨ WebTodoMate 구현 기능 명세

- 구현 결과물

TodoMate.mp4

- 기본 과제

1. header , main (section , section) , footer 로 나누어 구현합니다. ✔️
2. main
   1. 캘린더는 ‼️ grid ‼️ 를 사용해 구현합니다. ✔️
      1. 아래 3개의 정보는 가운데 정렬로 구현합니다. ✔️
         1. 요일
         2. 할일의 숫자가 들어있는 아이콘
         3. 날짜
   2. 카테고리별로 색상이 다르게 표시됩니다. ✔️
      - css class 선택자를 통해 다른 색을 주도록 구현하였습니다
   3. 특정 너비보다 초과하게 되면 다음 행으로 카테고리+할일리스트가 세트로 넘어갑니다 ✔️
      -flex-wrap: wrap; 을 통해 구현하였습니다.
3. footer
   1. 하단 메뉴로 달력 / MY 가 존재합니다.✔️

- 심화 과제

1. 완료한 할일과 완료하지 않은 할일을 색상으로 구분하여 체크표시를 나타냅니다.✔️ 하트색(흰색-빨간색)으로 구현
2. 입체감있는 그림자를 설정해 이쁜 🌼 디자인으로 만듭니다.✔️ 이쁜가요...? ㅎㅎ

- 생각 과제

Think.md에 작성 ✔️

🌼 PR Point

• 투두 section 은 너비를 넘어가면 다음행으로 세트가 넘어감과 더불어 일정 높이를 넘어서면 scroll 이 생기며 scroll 바도 커스텀 해보았습니다.

🥺 소요 시간, 어려웠던 점

• 3시간 정도 소요

• 어려웠던 점은 딱히 없었습니다.

• 다양한 기기로 확인해보니 화면이 조금 깨지더군요.... 보완해보겠습니다.🔥