KDT1-FE · mysdpy30s · Jul 29, 2023 · Jul 31, 2023 · Jul 31, 2023 · Aug 7, 2023
diff --git a/README.md b/README.md
@@ -1,45 +1,71 @@
-[참고 내용]
+<p></p>
 
-👀 자신이 원하는 사이트 레이아웃 클론
-원하는 사이트(페이지)를 자유롭게 선택하고 레이아웃을 클론 코딩하세요.
-평소에 도전해 보고 싶었거나 혹은 자신의 수준에 맞는 사이트(페이지)를 선택하세요.
-과제 수행 및 리뷰 기간은 별도 공지를 참고하세요!
+# ☕️ 폴바셋(Paul Bassett) 홈페이지 클론 코딩
 
-과제 수행 및 제출 방법
+카페 프랜차이즈 '폴바셋(Paul Bassett)' 공식 홈페이지를 클론 코딩한 개인 프로젝트입니다.
+
 
-1. 현재 저장소를 로컬에 클론(Clone)합니다.
-2. 자신의 본명으로 브랜치를 생성합니다.(구분 가능하도록 본명을 꼭 파스칼케이스로 표시하세요, git branch KDT0_이름)
-3. 자신의 본명 브랜치에서 과제를 수행합니다.
-4. 과제 수행이 완료되면, 자신의 본명 브랜치를 원격 저장소에 푸시(Push)합니다.(main 브랜치에 푸시하지 않도록 꼭 주의하세요, git push origin KDT0_이름)
-5. 저장소에서 main 브랜치를 대상으로 Pull Request 생성하면, 과제 제출이 완료됩니다!(E.g, main <== KDT0_이름)
+## 🖱 프로젝트 관련 사이트 주소
 
+<p align="center">
 
-- main 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요!
-- Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요!
-- Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요!
-- 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요!
+* 원 사이트 주소 : https://www.baristapaulbassett.co.kr/Index.pb
+* **클론 코딩 사이트 주소** : https://superlative-puppy-9a8f2a.netlify.app/
 
-필수 요구사항
+</p>
 
-- 과제에 대한 설명을 포함한 README.md 파일을 제공하세요!
-- 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요!
-- 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요!
-- 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다.
+## 📑 프로젝트 간략 설명 및 주제 선정 이유
 
-선택 요구사항
+평소 커피를 즐겨 마셔서 카페 프랜차이즈 중 한 곳의 사이트를 직접 구현해보고 싶었고, 그 중 폴바셋 웹사이트가 시각적으로 굉장히 인상 깊게 다가왔습니다. 하지만 폴바셋 메인 페이지의 대부분이 반응형으로 제작되어 있어, 제가 현재 사용 가능한 수준인 `HTML`과 `CSS`, 그리고 약간의 `JavaScript` 를 최대한 활용하여 클론 코딩을 진행하고자 하였습니다.
 
-- < header >, < section > 등 시멘틱 태그를 최대한 활용해보세요.
-- 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보세요.
-- 부분적으로 BEM 방법론을 도입해보세요.
-- JS가 필요한 부분은 되도록 생략하되 이유를 명시해보세요.(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!)
-- JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요)
+## 💡 프로젝트 수행 목표
 
-손쉬운 이미지 추출 방법
+### 1. HTML
 
-사이트 클론에 필요한 이미지를 좀 더 쉽게 추출하기 위해서 Chrome 확장 프로그램인 Image Downloader를 사용하세요.
+```js
+- 사이트 레이아웃을 직접 구현하고, 실제로 각 영역에 맞는 <header>,<footer> 등 시멘틱 태그 활용하기
+- HTML 문서가 CSS 파일과 JavaScript 파일과 함께 어떻게 구현되는지 보기
+```
 
-1. 원하는 사이트 접속
-2. Image Downloader 확장 프로그램 실행
-3. 다운로드 원하는 이미지 선택
-4. 서브 폴더 이름(Save to subfolder) 명시
-5. 다운로드!
+### 2. CSS
+
+```js
+- 각 영역별 클래스 지정 및 부모 요소 & 자식 요소 간 적용 속성 이해하기
+- position 속성의 relation, absolute, z-index 등의 상관 관계 이해하기
+- margin, padding, justify-content 등 속성을 활용해 각 요소별 정렬 양상 확인하기
+- 특정 메뉴 영역 또는 이미지 hover 효과 적용시 필요한 코드 감 익히기
+```  
+
+## 📑 구현한 내용
+
+- Navbar 내부 로고 및 세부 메뉴 hover 효과 적용
+![navbar](https://github.com/KDT1-FE/Y_FE_HTML_CSS/assets/137375435/0fcfb900-413b-493b-a6f7-7387f91cb0a6)
+
+- Sidebar 이미지 hover 효과 및 툴팁 적용
+![sidebar](https://github.com/KDT1-FE/Y_FE_HTML_CSS/assets/137375435/07adefbd-d375-48bb-bfef-1c81ed5434f2)
+
+- 이벤트 배너 부분 hover 효과 적용
+![footer](https://github.com/KDT1-FE/Y_FE_HTML_CSS/assets/137375435/e85857f7-c9d3-42e8-86ec-07ab3f6bf7b5)
+
+
+## 🥈 아쉬운 점
+
+  > ### 1. CSS 속성에 대한 전반적인 이해도 부족
+
+`CSS`의 세부 속성들에 대한 이해와 실습 경험이 아직 부족하여, 제가 실제 구현하고자 했던 많은 기능들이 생략되거나 비교적 간단한 형태로만 구현하게 된 것이 아쉬웠습니다.
+
+> ### 2. 각 부모 요소/자식 요소에 대한 속성 활용의 어려움
+페이지 레이아웃 내에서 특정 요소들을 추가/수정/삭제 할 때마다 전체적인 구조가 틀어지거나, 생각지 못했던 특정 부모 요소 / 자식 요소가 영향을 받아 매번 원인을 추적하는 데에 많은 시간을 할애할 수 밖에 없었던 점이 아쉬웠습니다. 
+
+
+## 📢 앞으로 개선할 방향
+
+
+
+### 1. '실험'해본다는 생각으로 최대한 여러 가지 코드를 많이 써보고, 각 속성이 바뀔 때마다 실제 화면에 어떻게 출력되는지 자주 보고 익숙해지기
+
+
+### 2. 비슷한 부분에서 실수나 어려움이 계속 반복된다면, 그 부분에 대한 이해가 아직 많이 부족하다는 뜻이니 기본기부터 확실히 짚고 넘어가기
+
+
+### 3. '내가 원하는 사이트를 최대한 비슷하게 만들어냈다'라는 것에 안주하기보다는, 계속 부지런히 나만의 아이디어로 새로운 웹사이트 만들어보기
diff --git a/images/.DS_Store b/images/.DS_Store
diff --git a/images/app.png b/images/app.png
diff --git a/images/app_h.png b/images/app_h.png
diff --git a/images/bg1.jpg b/images/bg1.jpg
diff --git a/images/bg2.jpg b/images/bg2.jpg
diff --git a/images/bg3.jpg b/images/bg3.jpg
diff --git a/images/bg4.jpg b/images/bg4.jpg
diff --git a/images/bgb.png b/images/bgb.png
diff --git a/images/bgbg.png b/images/bgbg.png
diff --git a/images/coffeedist.png b/images/coffeedist.png
diff --git a/images/event1.jpg b/images/event1.jpg
diff --git a/images/event2.jpg b/images/event2.jpg
diff --git a/images/favicon.png b/images/favicon.png
diff --git a/images/fb.png b/images/fb.png
diff --git a/images/fb_h.png b/images/fb_h.png
diff --git a/images/footer_b1.png b/images/footer_b1.png
diff --git a/images/footer_b2.png b/images/footer_b2.png
diff --git a/images/insta.png b/images/insta.png
diff --git a/images/insta_h.png b/images/insta_h.png
diff --git a/images/logo.png b/images/logo.png
diff --git a/images/logo_h.png b/images/logo_h.png
diff --git a/images/newsug.png b/images/newsug.png
diff --git a/images/next.png b/images/next.png
diff --git a/images/notice_btn.png b/images/notice_btn.png
diff --git a/images/prev.png b/images/prev.png
diff --git a/images/recom.png b/images/recom.png
diff --git a/images/recom_h.png b/images/recom_h.png
diff --git a/images/store.png b/images/store.png
diff --git a/images/yt.png b/images/yt.png
diff --git a/images/yt_h.png b/images/yt_h.png