KDT0 Jinjongsu 인터파크 메인페이지 클론코딩

README.md

@@ -1,45 +1,31 @@
-[참고 내용]
+## 진종수 과제 제출 
 
-👀 자신이 원하는 사이트 레이아웃 클론
-원하는 사이트(페이지)를 자유롭게 선택하고 레이아웃을 클론 코딩하세요.
-평소에 도전해 보고 싶었거나 혹은 자신의 수준에 맞는 사이트(페이지)를 선택하세요.
-과제 수행 및 리뷰 기간은 별도 공지를 참고하세요!
+구현하고자 했던 사이트 : 인터파크
+사이트 URL : https://www.interpark.com/ <br>
+나의 배포 사이트 URL : https://jongsujin.github.io/fastcampusfirst/
 
-과제 수행 및 제출 방법
+### 사용 기술
 
-1. 현재 저장소를 로컬에 클론(Clone)합니다.
-2. 자신의 본명으로 브랜치를 생성합니다.(구분 가능하도록 본명을 꼭 파스칼케이스로 표시하세요, git branch KDT0_이름)
-3. 자신의 본명 브랜치에서 과제를 수행합니다.
-4. 과제 수행이 완료되면, 자신의 본명 브랜치를 원격 저장소에 푸시(Push)합니다.(main 브랜치에 푸시하지 않도록 꼭 주의하세요, git push origin KDT0_이름)
-5. 저장소에서 main 브랜치를 대상으로 Pull Request 생성하면, 과제 제출이 완료됩니다!(E.g, main <== KDT0_이름)
+<img src="https://img.shields.io/badge/html5-E34F26?style=for-the-badge&logo=html5&logoColor=white"><img src="https://img.shields.io/badge/css-1572B6?style=for-the-badge&logo=css3&logoColor=white">
+<img src="https://img.shields.io/badge/github-181717?style=for-the-badge&logo=github&logoColor=white">
+<img src="https://img.shields.io/badge/git-F05032?style=for-the-badge&logo=git&logoColor=white">
+<img src="https://img.shields.io/badge/fontawesome-339AF0?style=for-the-badge&logo=fontawesome&logoColor=white">
 
+### 설명 
+1.header
+ : semantic tag를 사용해서 구분했습니다. 전체적으로 margin-left 속성을 주어 간격을 조정했습니다. 
+ : header 라는 클래스로 묶어서 알아보기 쉽게 구분하고자 했습니다.
+ : swiper 기능을 구현하진 않았지만 구현 가능하도록 버튼과 이미지를 container에 담아서 작성했습니다. 
+2. section 
+ : mainDesc 혹은 SubDesc 과 같이 중복 사용 가능한 것은 그대로 가져와 코드의 낭비를 줄이고자 했습니다.
+ : 전체적인 width를 맞추기 위해 전체적으로 width를 주었고 부족한 부분은 실제 웹 사이트 page rulers 기능을 통해 자세하게 주었습니다. 
+3. footer 
+ : 두 개의 큰 틀로 나눈 후 첫 번째는 개인정보이용약관 등을 넣는 곳으로 두었고 display: flex 를 사용했습니다.
+ : 남은 부분은 인터파크트리플과 인터파크커머스에 대한 소개인데 이를 구현하고자 display:flex 를 사용 , flex-direction : column을 통해 서로 구분지어줬습니다. 
+4. 느낀 점 : 처음에 relative와 absolute에 대한 혼동으로 버튼의 이미지가 고정되어서 이를 똑같이 구현하지는 못했는데 이번 기회에 position에 대해 배우게 되었습니다.
+           : 실제 html로 적어 다른 라이브러리 사용했을 때보다 코드의 복잡성과 효율이 떨어졌지만 기본을 다지는데 큰 도움이 되었습니다.
+           : 깃허브와 배포에 대해 배웠습니다. 실제로 네티파이와 깃허브 페이지를 사용해 배포에 성공했고 파일명이 index.html이 아니면 안된다는 점을 배웠습니다.
 
-- main 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요!
-- Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요!
-- Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요!
-- 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요!
 
-필수 요구사항
 
-- 과제에 대한 설명을 포함한 README.md 파일을 제공하세요!
-- 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요!
-- 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요!
-- 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다.
 
-선택 요구사항
-
-- < header >, < section > 등 시멘틱 태그를 최대한 활용해보세요.
-- 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보세요.
-- 부분적으로 BEM 방법론을 도입해보세요.
-- JS가 필요한 부분은 되도록 생략하되 이유를 명시해보세요.(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!)
-- JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요)
-
-손쉬운 이미지 추출 방법
-
-사이트 클론에 필요한 이미지를 좀 더 쉽게 추출하기 위해서 Chrome 확장 프로그램인 Image Downloader를 사용하세요.
-
-1. 원하는 사이트 접속
-2. Image Downloader 확장 프로그램 실행
-3. 다운로드 원하는 이미지 선택
-4. 서브 폴더 이름(Save to subfolder) 명시
-5. 다운로드!