-
멜론 홈페이지 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
<
header
> , <main
>, <footer
> 등 시맨틱 태그 활용실제 사이트와 거의 비슷한 레이아웃 구현
flex를 활용하여 컨텐츠 요소들 배치 및 디자인 구현
:hover를 사용하여 header 태그 및 링크 요소 디자인 구현
자바스크립트 내장함수를 이용하여 클릭, hover, 전환 등 기능 구현
fontawesome 라이브러리를 활용하여 아이콘 사용
시간 부족 및 자바스크립트 경험 부족으로 인해 원하는 기능을 구현하지 못했습니다.
자바스크립트를 사용하여 이미지 슬라이드, hover 기능을 추가하여 자연스러운 전환이 되어야 하지만 기능을 구현하지 못했습니다.
시맨틱 태그의 정확한 사용 용도 파악, css 기능 파악, 자바스크립트 내장 함수 등 아직 공부할 것이 너무 많다고 느꼈고 좀 더 깊이 공부를 해야겠다고 다짐하는 계기가 되었습니다.
이미지 슬라이드 적용
작업하지 못한 버튼 클릭 시 이미지 전환
멜론 차트 크롤링 적용