[Javascript] Momentum 만들기 - 배경화면 완성

오늘의 기본으로 돌아가는 Javascript, Momentum 만들기 구현 작업 내용

1. 시간과 인사말, todo가 잘 보이도록 글씨 색깔 변경
2. 시간과 인사말에 'fade in' 애니메이션 부여
3. 배경화면 완전한 이미지가 될 수 있도록 설정 # background 지정 방식을 태그로 조정

배경화면 기능을 완성하고, 날씨 api를 활용하는 것으로 nomadcoder에서 제시한 momentum 작업을 끝내고, 이후에는 추가로 구현해보고 싶은 기능들을(선택한 나라의 인사말 적용, 등) 구현하고, 디자인을 입히는 것으로 마무리하려고 한다. 6월 안에는 마무리할 수 있기를.

1. 시간과 인사말, todo가 잘 보이도록 글씨 색깔 변경

사용되는 배경화면이 전체적으로 어둡기 때문에 글씨가 잘 보일 수 있도록 하얀색으로 변경

* index.css : body 태그의 color 속성을 white로 변경

 

가시성이 한 결 개선되었다.

 

- 글씨체가 검은색이라 보기 어려웠던 이전과는 다르게 확실히 조금 더 보기 좋아졌다.

- 단, 아직 해결해야 하는 이슈가 있다.

1. 사용자 이름을 수정할 수 있는 버튼이 보이지 않도록 해야 한다.
2. todo 추가 및 현재 todo list들이 잘 보이지 않는다.

- 1번은 배경화면이 없을 때, 이름 수정 버튼이 보이지 않도록 하기 위해서 임시적으로 취했던 조치이기 때문에 display 속성을 없애고 마우스가 올라왔을 때만 보일 수 있도록 수정할 생각이다.

- 2번은 기능을 필요한 모든 기능을 작성한 이후, 전체적인 디자인을 작성할 때, 잘 보일 수 있도록 해볼 생각이다.

2. 시간과 인사말에 'fade in' 애니메이션 부여

사용자 경험(UX) 개선을 위해 페이지 로딩 시 애니메이션 부여

* index.css : 
  1. fade-in 효과를 위한 @keyframes fadeIn 작성
  2. fade-in 클래스에 작성한 애니메이션 반영
* background.js : body의 classList에 fade-in 클래스 추가

 

페이지의 아이템을이 fade-in 하며 나타난다.

 

- 페이지에 표시되는 아이템들이 정상적으로 fade in되며 나타나는 것을 확인할 수 있다.

- 3번의 작업이 진행된 상태로 이미지를 캡쳐해버렸는데, 배경 화면도 정상적으로 되어 있(는 것처럼 보인)다.

3. 배경화면 등장 방식 조정

배경화면으로 사용할 이미지의 일부가 아닌 전체 이미지가 보일 수 있도록 코드 수정

* index.css : .background-image 클래스에 background-size 속성을 cover로 설정

 

- 배경화면을 body 태그의 backgroundImage 속성을 통해서 제공했다.

- 크기를 맞추기 위해 background-size : cover 속성을 제공하였다. 결과적으로는 위 gif 이미지에서 확인할 수 있듯이, 정상적으로 전체 이미지가 배경화면에 반영되는 것을 확인할 수 있다.

- 단, 해결해야 하는 이슈가 있다.

 

완전히 배경화면이 적용되지는 않았다.

 

- 그림과 같이 창의 크기를 줄였을 때는 이미지가 정상적으로 적용되지 않는 것을 확인할 수 있다.

- 반응형에 맞출 수 있도록 수정이 필요할 것 같다.