HTML, CSS, JS를 이용한 미니 웹 프로젝트

 

소개

• html, css, js를 이용한 웹 제작 (노마드코더 웹 클론 페이지 응용 프로젝트)
• 제작 기간: 2023.08.24 ~ 2023.09.07
• 깃허브: https://github.com/HJ2828/Web_studyProject01
• 링크: https://hj2828.github.io/Web_studyProject01/

기능

• 사용자 이름 입력 하여 띄우기
• 년, 월, 일, 요일, 시간 띄우기
• 시간에 따른 인삿말 변경(morning, afternoon, evening, night)
• 날씨(아이콘, 위치, 온도) 띄우기
• 스톱워치
• 랜덤 배경 변경, 이미지 파일 업로드, 배경 이미지 주소를 입력 통한 배경 변경
• 투두 리스트
  
  
• 네비게이션바 버튼
  1. 날씨, 날짜 on/off
  2. 스톱워치 on/off
  3. 투두 리스트 on/off
  4. 배경 이미지 변경
  5. 이름 변경

기술/스택

• html, css, js
• OpenWeatherApi

사용 소스

• https://wallpaperaccess.com/lofi-gif
• https://fonts.google.com/icons

 

 

 
 
 
후기
이전부터 만들고 싶었던 페이지 https://www.lifeat.com/category/lofi를 비슷하게 만들어봤다.
노트북으로 켜두고 공부를 할 때마다 딴짓을 많이 해서 화면에 무언가 띄워 둘 때 내가 만든 페이지를 띄우고 공부해도 좋을 것 같다.
내가 원하는 기능들을 만들 수 있어서 좋았다. 특히 배경 이미지를 변경할 때 랜덤으로도 변경하고 이미지 주소를 넣어서도 변경하고 이미지 파일을 불러서도 변경할 수 있게 만든 게 다양한 이미지를 띄울 수 있어 좋은 것 같다.
어디서 div를 많이 사용하면 안좋다? 클린 코드가 아니다? 라는 글을 봤었는데, div를 많이 사용하면 좋지 않은 건가 의문이 들었다. 
CSS 작성하면서 display, float 등 아직 개념이 많이 부족하다는 것을 느꼈다.