KDT0_KimMinSeob 인터파크 홈페이지 클론코딩

.prettierignore

@@ -0,0 +1 @@
+Readme.md

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 4,
+  "semi": true,
+  "singleQuote": true,
+  "useTabs" : false,
+  "printWidth": 200,
+  "bracketSpacing": true
+}

README.md

@@ -1,45 +1,69 @@
-[참고 내용]
+<img src="https://www.interpark.com/_next/static/media/ci.4836710e.svg" width="100%" height="50%" style="background:white" />
+<br/>
+<br/>
+<br/>
 
-👀 자신이 원하는 사이트 레이아웃 클론
-원하는 사이트(페이지)를 자유롭게 선택하고 레이아웃을 클론 코딩하세요.
-평소에 도전해 보고 싶었거나 혹은 자신의 수준에 맞는 사이트(페이지)를 선택하세요.
-과제 수행 및 리뷰 기간은 별도 공지를 참고하세요!
+# ✈️ 인터파크 홈페이지 클론 코딩 
+ 인터파크 페이지를 클론코딩하였습니다.
+<br/>
 
-과제 수행 및 제출 방법
+## ✅ 사이트 주소
+<a href="https://www.interpark.com/"><img src="https://img.shields.io/badge/✈️INTERPARK-참고사이트-ffffff?style=flat-square&Color=white" width="200px"/></a>
+<a href="https://internparkkimminseob.netlify.app/"><img src="https://img.shields.io/badge/✈️INTERPARK-클론코딩사이트-000000?style=flat-square&Color=black" width="230px"/></a>
 
-1. 현재 저장소를 로컬에 클론(Clone)합니다.
-2. 자신의 본명으로 브랜치를 생성합니다.(구분 가능하도록 본명을 꼭 파스칼케이스로 표시하세요, git branch KDT0_이름)
-3. 자신의 본명 브랜치에서 과제를 수행합니다.
-4. 과제 수행이 완료되면, 자신의 본명 브랜치를 원격 저장소에 푸시(Push)합니다.(main 브랜치에 푸시하지 않도록 꼭 주의하세요, git push origin KDT0_이름)
-5. 저장소에서 main 브랜치를 대상으로 Pull Request 생성하면, 과제 제출이 완료됩니다!(E.g, main <== KDT0_이름)
+## ✅ 프로젝트 소개
+- 인터파크 홈페이지를 클론코딩하였습니다. html과 css와 야간의 js를 활용하여 홈페이지를 제작해보았습니다.
 
+## ✅ 프로젝트간 수행 목표
+### 1. HTML
+- 최대한 원 사이트와 비슷하게 제작을 진행하기
+- Semantic Tag들을 활용해서 html을 구성하기
+- 사용자 경험이 좋은 홈페이지를 만들 수 있는 UI 구성 방법을 체득하기
 
-- main 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요!
-- Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요!
-- Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요!
-- 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요!
+### 2. CSS
+- Flex 기능을 통한 정렬 기능을 숙지하기
+- Relative와 abolute를 통한 버튼과 모달창 같은 기능을 구현하기
+- 원 페이지에서 어떠한 구성을 통해 가독성이 높은 페이지를 제작하였는지 알아내기
 
-필수 요구사항
+## ✅ 구현 화면
+![interpark_header](/assets/image/md/sample.png)<br/>
 
-- 과제에 대한 설명을 포함한 README.md 파일을 제공하세요!
-- 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요!
-- 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요!
-- 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다.
+![interpark_main](/assets/image/md/sample2.png)<br/>
 
-선택 요구사항
+![interpark_footer](/assets/image/md/sample3.png)
 
-- < header >, < section > 등 시멘틱 태그를 최대한 활용해보세요.
-- 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보세요.
-- 부분적으로 BEM 방법론을 도입해보세요.
-- JS가 필요한 부분은 되도록 생략하되 이유를 명시해보세요.(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!)
-- JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요)
+<br/>
 
-손쉬운 이미지 추출 방법
 
-사이트 클론에 필요한 이미지를 좀 더 쉽게 추출하기 위해서 Chrome 확장 프로그램인 Image Downloader를 사용하세요.
+## ✅ 주요기능 및 사용한 것
 
-1. 원하는 사이트 접속
-2. Image Downloader 확장 프로그램 실행
-3. 다운로드 원하는 이미지 선택
-4. 서브 폴더 이름(Save to subfolder) 명시
-5. 다운로드!
+### 1. 스크롤 반응 고정 네비게이션바 구현
+![interpark_header](/assets/image/md/g_header.gif)
+<br/>
+
+### 2. Swiper를 통한 가로방향 슬라이더 구현
+![interpark_main](/assets/image/md/g_main.gif)
+<br/>
+
+### 3. Hovering을 통한 모달창 구현
+![interpark_main](/assets/image/md/g_footer.gif)
+
+## ✅ 배운점
+### 1. HTML 구성하기
+- 처음 클론코딩을 진행해보면서 UI를 사용할 때 최대한 간결하게 자세한 정보보다는 사진과 그래픽 위주로 구현하여 유저가 한눈에 페이지를 볼 수 있게 해야 한다는 것을 느끼게 되었습니다
+
+### 2. Swiper 구성하기
+- Swiper 기능을 통해서 다양한 웹사이트에서 사용되는 슬라이더 기능을 구현해볼 수 있었습니다. 이를통해 앞으로 판매관련 웹사이트를 만들 때 어떠한 구성으로 웹페이지의 슬라이더를 구현할 수 있는 지를 알게 될 수 있었습니다.
+
+### 3. CSS 구성하기
+- CSS를 직접 제작해보면서 tailwind같은 css npm library들이 얼마나 편한 유저에게 제공하는 지를 알 수 있게 되었습니다. 또한 직접 하나하나 구현해보면서 flex를 비롯한 정렬 개념과 relative abolute를 통한 블록배치 기술을 터득할 수 있었습니다.
+
+## ✅ 아쉬운점
+### 1. 반응형 웹사이트 만들기
+- CSS를 통한 반응형 웹사이트를 만드는데있어서 어려움이 있었습니다. 유저들이 모바일을 통한 기기를 많이 사용하기 때문에 수업을 통해서 반응형 웹사이트를 만들 수 있도록 노력할 것 입니다.
+
+### 2. 클린코드
+- html과 css 모두 반복되는 코드들이 상당했습니다. 특히 css의 경우 중복되는 기능들에서 약간의 차이로 인해 다시 css코드를 작성해야하는 어려움이 있었습니다. 그러다보니 코드가 계속해서 dirty해졌습니다. 따라서 학습을 통해 중복된 코드를 최대한 지향하는 클린코드를 만들 수 있도록 노력할 것입니다.
+
+### 3. Align-items를 통한 정렬
+- 각 section을 정렬하면서 align-items를 사용하였지만 제대로 구현되지 않아서 relative와 abolute를 통한 구현을 위주로 하였습니다. 따라서 절대적으로 계산에 의한 디자인이 만들어졌습니다. 이러한 문제를 해결하기위해서 앞으로는 미리 element들에 대한 구상을 진행하고 웹 페이지를 제작해야겠다는 것을 알게되었습니다.