diff --git a/.prettierrc b/.prettierrc index e69de29b..d1039fbc 100644 --- a/.prettierrc +++ b/.prettierrc @@ -0,0 +1,6 @@ +{ + "trailingComma": "es5", + "tabWidth": 4, + "semi": false, + "singleQuote": true +} \ No newline at end of file diff --git a/README.md b/README.md index e6131df0..f1acb082 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,14 @@ # ☕ **투썸플레이스 클론코딩**🍮✨ -- [투썸플레이스 공식 홈페이지](https://www.twosome.co.kr/main.do) -- [클론코딩 홈페이지](https://64c3a5c4c0ad766d12b18d55--snazzy-crisp-cfab80.netlify.app/) +- [투썸플레이스 공식 홈페이지](https://www.twosome.co.kr/main.do) +- [클론코딩 홈페이지](https://64c3a5c4c0ad766d12b18d55--snazzy-crisp-cfab80.netlify.app/) ## ☕ **프로젝트 기간** + > 2023년 07월 24일 ~ 2023년 07월 28일 ## ☕ **요구 사항 체크** + ✔️ 과제에 대한 설명을 포함한 README.md 파일 ✔️ 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시 ✔️ 실제 서비스로 배포하고 접근 가능한 링크를 추가 @@ -16,42 +18,48 @@ ✔️ JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현 ## ☕ **주요 내용 설명** + #### 1. 전체 페이지 + ![all](https://github.com/moonyah/moonyah.github.io/assets/51106050/99b54601-1076-43b2-9cc2-9e1847a0a5b0) -> - 총 6개의 페이지 ->- 스크롤 기능 추가해 화면 전환 + +> - 총 6개의 페이지 +> - 스크롤 기능 추가해 화면 전환 #### **2. header** + ![header](https://github.com/moonyah/moonyah.github.io/assets/51106050/19c3e89c-0f14-40f3-995d-7318c13de623) -> - header를 hover하면 로고와 메뉴와 언어 설정 아이콘, 전체 메뉴 아이콘 색이 어둡게 변경됨 -> - header 상단 고정 + +> - header를 hover하면 로고와 메뉴와 언어 설정 아이콘, 전체 메뉴 아이콘 색이 어둡게 변경됨 +> - header 상단 고정 #### **3. swiper와 toggleButton** + ![menu_story](https://github.com/moonyah/moonyah.github.io/assets/51106050/86369778-b063-455d-8d7f-90c658f357d9) #### **4. footer** -![footer](https://github.com/moonyah/moonyah.github.io/assets/51106050/15ef8658-bfe9-43d9-89fd-ebb6935ea948) +![footer](https://github.com/moonyah/moonyah.github.io/assets/51106050/15ef8658-bfe9-43d9-89fd-ebb6935ea948) ## ☕ **기술 스택** + - ## ☕ **아쉬운 점** -> - #### 스크롤 다루기 ->>- 13인치 노트북에서 스크롤을 할 때 페이지가 두 칸씩 넘어가는 문제를 발견 ->>- footer 부분이 다른 페이지와 크기가 달라서 스크롤을 다 내렸을 경우, 흰색 공간이 생김 (footer 위치를 내려서 임시로 해결) -> - flex는 많이 사용했는데 grid 활용을 안한 점 -> - js에 아직 미숙해서 구현하고 싶은 기능을 못 넣은 게 아쉽다. -> - css코드가 정리가 안 된 느낌이라서 아쉽다. 공통적인 부분은 합치고 겹치는 부분은 제거해야 해야 할 필요가 있다. -## ☕ **느낀 점** -> - 전체적으로 웹페이지의 구성과 구조를 꼼꼼히 분석해 보는 기회가 되었다. -> - 전체적으로 간단해 보이는 것도 기능 구현이 생각보다 쉽지 않다. -> - CSS부분에서 하나의 기능도 여러 가지 방식을 시도해 보고 더 편리하고 효율적인 것을 비교해 봐야겠다. +> - #### 스크롤 다루기 +> > - 13인치 노트북에서 스크롤을 할 때 페이지가 두 칸씩 넘어가는 문제를 발견 +> > - footer 부분이 다른 페이지와 크기가 달라서 스크롤을 다 내렸을 경우, 흰색 공간이 생김 (footer 위치를 내려서 임시로 해결) +> - flex는 많이 사용했는데 grid 활용을 안한 점 +> - js에 아직 미숙해서 구현하고 싶은 기능을 못 넣은 게 아쉽다. +> - css코드가 정리가 안 된 느낌이라서 아쉽다. 공통적인 부분은 합치고 겹치는 부분은 제거해야 해야 할 필요가 있다. +## ☕ **느낀 점** +> - 전체적으로 웹페이지의 구성과 구조를 꼼꼼히 분석해 보는 기회가 되었다. +> - 전체적으로 간단해 보이는 것도 기능 구현이 생각보다 쉽지 않다. +> - CSS부분에서 하나의 기능도 여러 가지 방식을 시도해 보고 더 편리하고 효율적인 것을 비교해 봐야겠다.