It's going to be one day 🍀

안녕하세요! 매일 매일 공부하려고 노력하는 백엔드 개발자 지망생의 공부 흔적입니다.

Project/FE 미니 프로젝트

[FE] 개인 프로젝트 3일차

2jin2 2024. 1. 18. 17:44

오늘은 프로젝트를 (거의) 다 완성했다!

show more(무한 스크롤) 효과 넣기

탑버튼 & hover 제작

email, nav, span 등의 세부적인 요소들을 정리하는 작업을 했다.

 

완성 절대 못할거라 생각했는데 또 배운 내용이랑 구글링 하니까 어찌저찌 되긴 된다 ㅋㅋㅋㅋㅋㅋㅋㅋ

 

다만 아직

부족한 부분은 

 

1. html과 js 연결이 안되는 문제

-> 계속 찾아본 결과 js 파일을 따로 불러왔을 때 무한 스크롤 부분에서 뭔가 문제가 있는듯. 추가로 지도도 안나옴.

지금 그런부분에 신경 쓸 만한 실력이 아니라.. 일단 완성 했다는 거에 의의를 둔다..

2. 무한 스크롤 이게 맞나..?

3. 모달창이 튀어나올 때 벌어지는 하얀 간격은 대체 무엇인가

 

내일 프로젝트 계획은 readme 작성, 깃허브 페이지스 만들기, 그리고 추가적인 디자인을 어떻게 해볼지 고민해봐야겠다.

+) 지금 생각하고 있는 디자인은 커서 가져다대면 사진 움직이는거랑 무한 스크롤 해오는 사진 변경 정도? 배경에 눈꽃 날리는 것도 예쁘던데.. 이것저것 해봐야지

 

 

탑버튼 참고 링크

https://gurtn.tistory.com/137

 

[JS] 페이지 상단(하단)으로 이동하는 버튼 구현하기

버튼 클릭 하나만으로 웹 페이지의 상단으로 이동하는 기능을 구현해보겠습니다. 코드 맨 위로 .moveTopBtn { position: fixed; bottom: 1rem; right: 1rem; width: 4rem; height: 4rem; background: #000; color: #fff; } 간단한 H

gurtn.tistory.com

 

hover 이미지 겹치게 하기 참고 링크

https://velog.io/@zunyange/%EB%A7%88%EC%9A%B0%EC%8A%A4-%EC%98%A4%EB%B2%84%EC%8B%9C-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EB%B6%80%EB%93%9C%EB%9F%BD%EA%B2%8C-%EB%B3%80%ED%99%98%EC%8B%9C%ED%82%A4%EA%B8%B0

 

[CSS] 마우스 오버시 이미지 부드럽게 변환시키기

마우스 오버시 이미지 부드럽게 변환시키기

velog.io

'Project > FE 미니 프로젝트' 카테고리의 다른 글

[FE] 개인 프로젝트 4일차 (끝!)  (0) 2024.01.19
[FE] 개인 프로젝트 2일차  (0) 2024.01.17
[FE] 개인 프로젝트 1일차  (0) 2024.01.16