본문 바로가기

Web

FE - 모멘텀 페이지 개선 기록

21.05.17

이 페이지는 이렇게 마무리 하려고 한다. 만족스럽진 않지만 위에 있는 일주일 전 모습을 보니 그래도 많이 나아진 거 같다.^^ 검색 기능이 있으면 약간 더 완성도 있어 보일것 같아 추가하려고 했는데 url입력창에서 내장 검색을 사용할 수 있으니 굳이 추가할 필요가 없다고 생각해서 안 만들었다.

깃허브에 공개로 올릴 생각인데 js에 작성한 api키를 그대로 공개하는 게 찝찝해서 config파일로 api키 (open weather map이랑 unsplash를 위한 것 두 가지가 사용되고 있다.)들을 빼고 나머지를 깃에 배포하려고 한다.


21.05.10

css 너무 헷갈리고 어렵다.. 노답 상태인데 뭐로 공부해야 될지 모르겠다.

문제는 두 개로 나뉜다 1. 일단 css를 잘 모른다 2. 디자인 연습이 안 되어 있다.

여러 웹앱 포트폴리오를 만들면서 연습하다 보면 좀 나아지려나.. 책을 보면 나아지려나..

웹서핑만 해도 쏟아지는 게 래퍼런스이니 관찰도 열심히 해야겠다고 다짐한다.

좌 -> 우 개선된 사항

  1. 로컬에서 불러오던 배경 사진 소스 -> unsplash api를 사용하여 무작위 사진을 가져오도록 변경.
  2. 따라서 화면 좌측 하단에 사진 작가의 unsplash 프로필 하이퍼링크를 추가함.

todo가 박스를 초과하면 스크롤바도 생긴다... ... ㅎ

추가하고 싶은 기능은

  • 구글 검색 api 추가
  • todo의 done을 표시할 수 있는 체크박스 & 취소선 표현, done필드 추가

정도이고, css 개선을 좀 (많이, 빡세게) 해주면 일단 만족할 정도로 나올 듯 하다.

개선할 사항 list

  1. width만 100로 맞추고 auto인 상태 -> 사진 가운데를 중심으로 잘라서 스크롤바 없이 표현되도록 & 반응형으로 수정
  2. location span을 top에 딱 붙도록 고치기