Day 17 - ReactJS로 TodoList 만들기 #4

2023/01/11 투두 리스트 작업 화면이다.

2022/12/29에 작업한 화면과 비교해보면... 정말 많이 발전하였다.

 

https://studywithzpqmdh.tistory.com/94

Day 16 - ReactJS로 TodoList 만들기 #3

2023/01/09에 게시한 포스팅과 비교해보면 가장 큰 차이점은 container의 위치와 폰트인 것 같다.

기존 TodoList는 왼쪽 화면에 위치했다. 이는 화면 대칭이 맞지 않아 작업하면서 불편함을 느꼈다.

따라서 중앙정렬로 수정하였다!

훨씬 가독성이 높아졌다. (대만족)

 

그리고 <hr /> 태그를 활용하여 line을 그어 구분하였는데 디자인이 마음에 들지 않아 수정하였다.

Line componenet를 생성하여 Line을 그어주었다.

그리고 대망의 폰트!

사용한 폰트는 "휴먼 범석체"이고, https://noonnu.cc/font_page/1039 여기에서 다운로드 받았다. (너무 예뻐요 감사합니다)

src 폴더 안에 fonts 폴더를 생성하고 거기에 다운로드 받은 폰트를 위치시켰다.

저장한 폰트는 css 파일에서 font-family로 적용 가능하다.

 

아직 코드의 완성도는 매우 낮다. 겉으로 보기에는 괜찮은데? 싶다가도 작성한 코드를 보면.. 왜 이렇게 비효율적인 코드인지.. 수정할 것이 많아 보인다. 차근차근 발전시켜 보자!

 

작업한 코드는 https://github.com/zpqmdh/React-TodoList 에서 확인 가능하다!

작업한 결과물은 https://chipper-otter-1ed96a.netlify.app/ 에서 실행해볼 수 있다! ^ㅁ^