Docs: README.md 작성

README.md

@@ -1,25 +1,86 @@
-# KDT0_JangYeongMin
-***
+<br>
+
+![Melon](https://i.namu.wiki/i/gYv3IQQKE7WxU7CMkSQLRpfgBrTukY6a-_nMyJ70m4ZzZpQta7QN5cmhFwvcer3uE3i7yiX52yy48y3pWZZXhg.svg)
+<br>
+<br>
+## 🎧 멜론 홈페이지 클론 코딩 🎧
 
-### 프로젝트 개요
+### 🔗 프로젝트 URL 
 
-##### 클론 선정 이유
+- **멜론 홈페이지 URL** : https://www.melon.com/index.htm
 
-### 주요 구현 사항
+- **과제 URL** : 
+
+***
+
+### 📌 필수 요구사항 체크리스트
 
-#### 필수 요구사항 체크리스트
 - [ ] 과제에 대한 설명을 포함한 README.md 파일 작성
 - [ ] 실제 사이트 주소 명시
 - [ ] 과정에서 사용한 프로젝트 폴더,파일 KDT0_JangYeongMin 브랜치에 업로드
 - [ ] netlify를 사용하여 배포 후 클론 사이트 주소 명시
+<br>
+
+### 📌 선택 요구사항 체크리스트
 
-#### 선택 요구사항 체크리스트
-- [ ] 시멘틱 태그를 최대한 사용해보기
+- [ ]  시멘틱 태그를 최대한 사용해보기
 - [ ]  부분적으로 CSS Grid 와 CSS Flex 사용하여 레이아웃
-- [ ]  BEM 방법론 사용해보기
 - [ ]  JS가 꼭 필요한 부분에는 간단하기 구현
-- [ ]  SCSS 전처리 도구 도입
-- [ ]  Parcel bundler를 사용하여 SCSS 컴파일
 
+***
+
+### 🗓️ 개발 기간
+
+**2023.07.24 ~ 2023.07.28**
+
+***
+
+### 🔨 사용 기술 스택
+
+<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/javascript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black"> 
+
+<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">
+
+
+***
+
+### 🧑🏻‍💻 주요 구현 사항
+
+#### HTML
+>   - <`header`> , <`main`>, <`footer`> 등 시맨틱 태그 활용
+>
+>   - 실제 사이트와 거의 비슷한 레이아웃 구현
+
+
+#### CSS
+>   - flex를 활용하여 컨텐츠 요소들 배치 및 디자인 구현
+> 
+>   - :hover를 사용하여 header 태그 및 링크 요소 디자인 구현
+
+
+#### JavaScript
+>   - 자바스크립트 내장함수를 이용하여 클릭, hover, 전환 등 기능 구현
+> 
+>   - fontawesome 라이브러리를 활용하여 아이콘 사용
+
+
+***
+
+### 📝 아쉬운점 & 느낀점
+
+>   - 시간 부족 및 자바스크립트 경험 부족으로 인해 원하는 기능을 구현하지 못했습니다.
+>
+>   - 자바스크립트를 사용하여 이미지 슬라이드, hover 기능을 추가하여 자연스러운 전환이 되어야 하지만 기능을 구현하지 못했습니다.
+>
+>   - 시맨틱 태그의 정확한 사용 용도 파악, css 기능 파악, 자바스크립트 내장 함수 등 아직 공부할 것이 너무 많다고 느꼈고 좀 더 깊이 공부를 해야겠다고 다짐하는 계기가 되었습니다.
+
+### ⌨️ 추후 구현사항
 
-### 프로젝트 상세 설명
+>   - 이미지 슬라이드 적용
+>
+>   - 작업하지 못한 버튼 클릭 시 이미지 전환
+>
+>   - 멜론 차트 크롤링 적용