[프로젝트 1차] Cha.Dam.Hwa (3/2 - 3일차)

프로젝트 1차 표지

---

1. Sub-nav 만들기

 

nav와 subnav

내가 느낀 기존의 술담화 홈페이지의 불편한 사항은 메인페이지를 스크롤로 내려도, 메뉴가 따라 내려오지 않기 때문에, 다시 메뉴를 보려면 한참을 위로 올려야하는 불편함이 있었다. 그래서 그 사항을 개선하기 위해서, 스크롤을 내려도 메뉴가 위에 있게끔 만들었다. position:fixed 와 z-index 기능을 사용했다. 그랬더니 잘 작동된다. 하지만, 아래의 컨텐츠들이 nav와 subnav를 인식못해서 위로 올라와버리는 현상이 발생했다. 그래서 margin-top값을 줘서 문제를 해결했다.

---

2. Main Page 만들기

 

main 페이지

아직, 미완성의 메인 페이지다. 영상에서 보이는 분홍 부분에 슬라이더 기능을 넣어서 이벤트 배너를 넣으려한다. 
아직 이벤트 배너는 만들지 못했다. 이벤트 배너는 내일 만들 예정이다.
그리고, 아래의 사진 4장이 있는 div는 이 웹페이지에서 계속 같은 형태의 div가 글과 사진만 변경된 채로 반복된다. 
그래서 이 부분을 컴포넌트화 시키면 좋겠다고 생각했다. 아직, 사진자료를 찾는 중이라, 아무 사진이나 집어 넣어보았다.
그리고, 테마에 맞춰서 추천 문구와 이모티콘이 달라지게 설정했다. 또한, 더보기 버튼을 만들어서 해당 테마의 차(tea)들을 꼼꼼히 살펴볼 수 있게 만들 예정이다.

---

성장 포인트
(깨달은 점, 어려웠던 점 등..)

 

• 그동안, 어떤 부분을 계속 컴포넌트화 시켜야하는지 막연했다. 큰 부분들만 컴포넌트화를 시켜주는 것으로 알았는데, 비슷한 부분이 반복되면 그 부분을 컴포넌트화 시키면 되는 것을 알게 되었다. (작게 계속 컴포넌트화 시켜주는 것에 겁먹지 말아야 한다.)
• product-box의 이미지들에 transform 기능을 주면 마우스를 올렸을 때, 다양한 기능을 추가할 수 있다는 것을 배웠다.
• git을 잘 다루지 못 하는데, 이번 작업을 통해서 git의 branch 생성방법 및 branch 변경방법을 더 자세히 알 게 되었습니다. 또한, 작업을 할 때, 해당 branch에 이동시킨 후 작업을 해야 복잡한 일이 생기지 않는다는 교훈을 얻었다. (왜냐면, login브랜치에서 main작업을 다해버려서 다시 main브랜치를 만들고 복붙해서 옮기는 귀찮은 일을 겪은 후, 다신 이런 일 반복되지 않게 해야겠다고 다짐했다.)
• product-box 안의 버튼이 가운데로 정확히 들어맞지 않는다. 너무 거슬려서 line-height값도 줘보고 text-align:center값도 줘보았지만, 먹히질 않는다. 대충 눈대중으로 최대한 비슷한 가운데로 위치할 수 있게 만들어줬지만 계속 거슬려서 답답하다. 가운데 배치방법을 빨리 찾아보아야 할 것 같다.