🎧 멜론 홈페이지 클론 코딩 🎧

🔗 프로젝트 URL

• 멜론 홈페이지 URL : https://www.melon.com/index.htm

• 과제 URL : yeongmin-melonclone.netlify.app

---

📌 필수 요구사항 체크리스트

• 과제에 대한 설명을 포함한 README.md 파일 작성
• 실제 사이트 주소 명시
• 과정에서 사용한 프로젝트 폴더,파일 KDT0_JangYeongMin 브랜치에 업로드
• netlify를 사용하여 배포 후 클론 사이트 주소 명시

📌 선택 요구사항 체크리스트

• 시멘틱 태그를 최대한 사용해보기
• 부분적으로 CSS Grid 와 CSS Flex 사용하여 레이아웃
• JS가 꼭 필요한 부분에는 간단하기 구현

---

🗓️ 개발 기간

2023.07.24 ~ 2023.07.28

---

🔨 사용 기술 스택

---

🧑🏻‍💻 주요 구현 사항

HTML

• <header> , <main>, <footer> 등 시맨틱 태그 활용

• 실제 사이트와 거의 비슷한 레이아웃 구현

CSS

• flex를 활용하여 컨텐츠 요소들 배치 및 디자인 구현

• :hover를 사용하여 header 태그 및 링크 요소 디자인 구현

JavaScript

• 자바스크립트 내장함수를 이용하여 클릭, hover, 전환 등 기능 구현

• fontawesome 라이브러리를 활용하여 아이콘 사용

---

📝 아쉬운점 & 느낀점

• 시간 부족 및 자바스크립트 경험 부족으로 인해 원하는 기능을 구현하지 못했습니다.

• 자바스크립트를 사용하여 이미지 슬라이드, hover 기능을 추가하여 자연스러운 전환이 되어야 하지만 기능을 구현하지 못했습니다.

• 시맨틱 태그의 정확한 사용 용도 파악, css 기능 파악, 자바스크립트 내장 함수 등 아직 공부할 것이 너무 많다고 느꼈고 좀 더 깊이 공부를 해야겠다고 다짐하는 계기가 되었습니다.

⌨️ 추후 구현사항

• 이미지 슬라이드 적용

• 작업하지 못한 버튼 클릭 시 이미지 전환

• 멜론 차트 크롤링 적용