KDT0_JangMunYong 투썸플레이스 홈페이지 클론 코딩

.prettierrc

@@ -0,0 +1,6 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": false,
+    "singleQuote": true
+}

README.md

@@ -1,45 +1,65 @@
-[참고 내용]
+# ☕ **투썸플레이스 클론코딩**🍮✨
 
-👀 자신이 원하는 사이트 레이아웃 클론
-원하는 사이트(페이지)를 자유롭게 선택하고 레이아웃을 클론 코딩하세요.
-평소에 도전해 보고 싶었거나 혹은 자신의 수준에 맞는 사이트(페이지)를 선택하세요.
-과제 수행 및 리뷰 기간은 별도 공지를 참고하세요!
+-   [투썸플레이스 공식 홈페이지](https://www.twosome.co.kr/main.do)
+-   [클론코딩 홈페이지](https://64c3a5c4c0ad766d12b18d55--snazzy-crisp-cfab80.netlify.app/)
 
-과제 수행 및 제출 방법
+## ☕ **프로젝트 기간**
 
-1. 현재 저장소를 로컬에 클론(Clone)합니다.
-2. 자신의 본명으로 브랜치를 생성합니다.(구분 가능하도록 본명을 꼭 파스칼케이스로 표시하세요, git branch KDT0_이름)
-3. 자신의 본명 브랜치에서 과제를 수행합니다.
-4. 과제 수행이 완료되면, 자신의 본명 브랜치를 원격 저장소에 푸시(Push)합니다.(main 브랜치에 푸시하지 않도록 꼭 주의하세요, git push origin KDT0_이름)
-5. 저장소에서 main 브랜치를 대상으로 Pull Request 생성하면, 과제 제출이 완료됩니다!(E.g, main <== KDT0_이름)
+> 2023년 07월 24일 ~ 2023년 07월 28일
 
+## ☕ **요구 사항 체크**
 
-- main 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요!
-- Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요!
-- Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요!
-- 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요!
+✔️ 과제에 대한 설명을 포함한 README.md 파일  
+✔️ 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시  
+✔️ 실제 서비스로 배포하고 접근 가능한 링크를 추가  
+✔️ 시멘틱 태그를 최대한 활용  
+✔️ 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용  
+✔️ 부분적으로 BEM 방법론을 도입  
+✔️ JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현
 
-필수 요구사항
+## ☕ **주요 내용 설명**
 
-- 과제에 대한 설명을 포함한 README.md 파일을 제공하세요!
-- 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요!
-- 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요!
-- 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다.
+#### 1. 전체 페이지
 
-선택 요구사항
+![all](https://github.com/moonyah/moonyah.github.io/assets/51106050/99b54601-1076-43b2-9cc2-9e1847a0a5b0)
 
-- < header >, < section > 등 시멘틱 태그를 최대한 활용해보세요.
-- 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보세요.
-- 부분적으로 BEM 방법론을 도입해보세요.
-- JS가 필요한 부분은 되도록 생략하되 이유를 명시해보세요.(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!)
-- JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요)
+> -   총 6개의 페이지
+> -   스크롤 기능 추가해 화면 전환
 
-손쉬운 이미지 추출 방법
+#### **2. header**
 
-사이트 클론에 필요한 이미지를 좀 더 쉽게 추출하기 위해서 Chrome 확장 프로그램인 Image Downloader를 사용하세요.
+![header](https://github.com/moonyah/moonyah.github.io/assets/51106050/19c3e89c-0f14-40f3-995d-7318c13de623)
 
-1. 원하는 사이트 접속
-2. Image Downloader 확장 프로그램 실행
-3. 다운로드 원하는 이미지 선택
-4. 서브 폴더 이름(Save to subfolder) 명시
-5. 다운로드!
+> -   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)
+
+## ☕ **기술 스택**
+
+<img src="https://img.shields.io/badge/html5-E34F26?style=for-the-badge&logo=html5&logoColor=white">
+
+<img src="https://img.shields.io/badge/css3-1572B6?style=for-the-badge&logo=css3&logoColor=white">
+
+<img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=JavaScript&logoColor=white">
+
+## ☕ **아쉬운 점**
+
+> -   #### 스크롤 다루기
+>     > -   13인치 노트북에서 스크롤을 할 때 페이지가 두 칸씩 넘어가는 문제를 발견
+>     > -   footer 부분이 다른 페이지와 크기가 달라서 스크롤을 다 내렸을 경우, 흰색 공간이 생김 (footer 위치를 내려서 임시로 해결)
+> -   flex는 많이 사용했는데 grid 활용을 안한 점
+> -   js에 아직 미숙해서 구현하고 싶은 기능을 못 넣은 게 아쉽다.
+> -   css코드가 정리가 안 된 느낌이라서 아쉽다. 공통적인 부분은 합치고 겹치는 부분은 제거해야 해야 할 필요가 있다.
+
+## ☕ **느낀 점**
+
+> -   전체적으로 웹페이지의 구성과 구조를 꼼꼼히 분석해 보는 기회가 되었다.
+> -   전체적으로 간단해 보이는 것도 기능 구현이 생각보다 쉽지 않다.
+> -   CSS부분에서 하나의 기능도 여러 가지 방식을 시도해 보고 더 편리하고 효율적인 것을 비교해 봐야겠다.

css/common.css

@@ -0,0 +1,32 @@
+/* COMMON */
+body {
+    background: transparent;
+
+    font-family: 'Noto Sans KR', sans-serif;
+    /* font-family: 'Noto Sans', sans-serif; */
+    color: #333;
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 1.5;
+
+    overflow-x: hidden;
+}
+
+img {
+    display: inline-block;
+}
+
+a {
+    text-decoration: none;
+}
+
+button {
+    padding: 0;
+
+    border: 0;
+
+    font-family: inherit;
+    background-color: transparent;
+
+    cursor: pointer;
+}