KDT1-FE · cuconveniencestore · Apr 7, 2023 · Apr 9, 2023 · Apr 23, 2023 · Apr 23, 2023
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -1,45 +1,76 @@
-# 👀 자신이 원하는 사이트 레이아웃 클론
+# 월간 공진단 페이지 클론코딩
 
-원하는 사이트(페이지)를 자유롭게 선택하고 레이아웃을 클론 코딩하세요.  
-평소에 도전해 보고 싶었거나 혹은 자신의 수준에 맞는 사이트(페이지)를 선택하세요.   
-과제 수행 및 리뷰 기간은 별도 공지를 참고하세요!
 
-## 과제 수행 및 제출 방법
 
-1. 현재 저장소를 로컬에 클론(Clone)합니다.
-1. 자신의 본명으로 브랜치를 생성합니다.(구분 가능하도록 본명을 꼭 파스칼케이스로 표시하세요, `git branch KDT0_ParkYoungWoong`)
-1. 자신의 본명 브랜치에서 과제를 수행합니다.
-1. 과제 수행이 완료되면, 자신의 본명 브랜치를 원격 저장소에 푸시(Push)합니다.(`main` 브랜치에 푸시하지 않도록 꼭 주의하세요, `git push origin KDT0_ParkYoungWoong`)
-1. 저장소에서 `main` 브랜치를 대상으로 Pull Request 생성하면, 과제 제출이 완료됩니다!(E.g, `main` <== `KDT0_ParkYoungWoong`)
+원본페이지 : [월간 공진단](https://webzine.kotpa.org/vol54?mod=document&uid=3919l)
 
-- `main` 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요!
-- Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요!
-- Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요!
-- 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요!
 
-## 필수 요구사항
+클론코딩 페이지 : [leesiwoo 클론 코딩 페이지](https://stately-meerkat-5fd972.netlify.app/)
 
-- [ ] 과제에 대한 설명을 포함한 `README.md` 파일을 제공하세요!
-- [ ] 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요!
-- [ ] 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요! 
-- [ ] 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다.
 
-## 선택 요구사항
 
-- [ ] `<header>`, `<section>` 등 시멘틱 태그를 최대한 활용해보세요.
-- [ ] 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보세요.
-- [ ] 부분적으로 BEM 방법론을 도입해보세요.
-- [ ] JS가 필요한 부분은 되도록 생략하되 이유를 명시해보세요.(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!)
-- [ ] JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요)
-- [ ] SCSS 등의 CSS 전처리도구를 도입해보세요.
-- [ ] SCSS 컴파일에 Webpack이나 Parcel 같은 번들러를 활용해보세요.
+---
+
+
+#### 클론 코딩 목표
+
+
++ HTML/CSS를 활용한 페이지 레이아웃 구조 만들어보기
+
+
+  + 다양한 방법으로 시도 후 **원리 이해하기**
+
+
++ 페이지 클론코딩에대한 감 잡아보기
+
+
+___
+
+
+### 과정 진행 설명
+
+
++ position 활용하는 방법에 대해 공부하면서 진행했습니다
+
+
++ 과정을 진행하는데 있어 기존 페이지의 CSS와 HTML을 보지 않고 어떻게 하면 저 구조가 나올지에 대해 최대한 생각하려고 시도하였습니다
+
+
+  + 어려운 점만 참고하며 진행함 
+
+
++ 효율적으로 페이지를 구성할 수 있는지, CSS 파일을 최대한 효율적으로 구성하도록 하였습니다
+
+
+___
+
+
+### 추가할 사항
+
++ header main menu 부분의 hover 효과를 구현하는데 있어 호버시 아이콘(기호)를 추가하는 부분에 있어서 구현하지 못했습니다
+
+
++ 하단의 추가 기술 hover 효과 구현에 있어서 색상이 변화하는 부분을 구현하지 못했습니다
+
+
++ JS를 필요로하는 부분은 진행하지 못하였습니다
+
+
+___
+
+
+### 23.04.23 리팩토링
+
++ 이전 과제를 진행할때 사용해 보지 않았던 BEM 방법론을 사용해 보았습니다
+
+
++ 중복되는 스타일은 하나의 class명으로 지정하여 불필요한 코드들을 삭제하였습니다
+
+
++ 시맨틱 태그를 수정 보완하였습니다
+
+
++ 하지만 아직도 JS가 들어가는 부분은 진행을 하지 못했습니다 ㅜㅜ
 
-## 손쉬운 이미지 추출 방법
 
-사이트 클론에 필요한 이미지를 좀 더 쉽게 추출하기 위해서 Chrome 확장 프로그램인 [Image Downloader](https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj?hl=ko)를 사용하세요.
 
-1. 원하는 사이트 접속
-1. Image Downloader 확장 프로그램 실행
-1. 다운로드 원하는 이미지 선택
-1. 서브 폴더 이름(Save to subfolder) 명시
-1. 다운로드!
diff --git a/images/.DS_Store b/images/.DS_Store
diff --git a/images/53_people.jpg b/images/53_people.jpg
diff --git a/images/54_people.jpg b/images/54_people.jpg
diff --git a/images/55_people.jpg b/images/55_people.jpg
diff --git a/images/56_people.jpg b/images/56_people.jpg
diff --git a/images/bg_visual.gif b/images/bg_visual.gif
diff --git a/images/default (2).webp b/images/default (2).webp
diff --git a/images/default.webp b/images/default.webp
diff --git a/images/follow_icon.png b/images/follow_icon.png
diff --git a/images/gzd_logo.png b/images/gzd_logo.png
diff --git a/images/ico_mobile_menu.png b/images/ico_mobile_menu.png
diff --git a/images/ico_nav3.png b/images/ico_nav3.png
diff --git a/images/ico_nav4.png b/images/ico_nav4.png
diff --git a/images/ico_nav_sns1.png b/images/ico_nav_sns1.png
diff --git a/images/ico_nav_sns2.png b/images/ico_nav_sns2.png
diff --git a/images/ico_nav_sns3.png b/images/ico_nav_sns3.png
diff --git a/images/ico_nav_sns4.png b/images/ico_nav_sns4.png
diff --git a/images/ico_nav_sns5.png b/images/ico_nav_sns5.png
diff --git a/images/ico_nav_srch.png b/images/ico_nav_srch.png
diff --git a/images/ico_top1.png b/images/ico_top1.png
diff --git a/images/ico_top2.png b/images/ico_top2.png
diff --git a/images/ico_top3.png b/images/ico_top3.png
diff --git a/images/ico_top4.png b/images/ico_top4.png
diff --git a/images/img1_2.jpg b/images/img1_2.jpg
diff --git a/images/img1_3.jpg b/images/img1_3.jpg
diff --git a/images/img1_4.jpg b/images/img1_4.jpg
diff --git a/images/img1_5.jpg b/images/img1_5.jpg
diff --git a/images/img1_6.jpg b/images/img1_6.jpg
diff --git a/images/img1_7.jpg b/images/img1_7.jpg
diff --git a/images/img3_1.jpg b/images/img3_1.jpg
diff --git a/images/img3_2.jpg b/images/img3_2.jpg
diff --git a/images/img3_3.jpg b/images/img3_3.jpg
diff --git a/images/img3_4.jpg b/images/img3_4.jpg
diff --git a/images/img4_1.jpg b/images/img4_1.jpg
diff --git a/images/img4_2.jpg b/images/img4_2.jpg
diff --git a/images/img4_3.jpg b/images/img4_3.jpg
diff --git a/images/sddefault.jpg b/images/sddefault.jpg
diff --git a/images/sns1.png b/images/sns1.png
diff --git a/images/sns2.png b/images/sns2.png
diff --git a/images/sns3.png b/images/sns3.png
diff --git a/images/sns4.png b/images/sns4.png
diff --git a/images/sns5.png b/images/sns5.png
diff --git a/images/sub_list_logo_black.png b/images/sub_list_logo_black.png
diff --git a/images/sub_tit.png b/images/sub_tit.png
diff --git a/images/tit_rec.png b/images/tit_rec.png
diff --git a/images/다운로드 (1).svg b/images/다운로드 (1).svg