🌈 투 두 리스트가 포함된 시작 페이지

미니 프로젝트 스터디의 두 번째 주제. 바로 To Do List 만들기!
안 그래도 계속 고쳐야지 생각만 하던 내 첫 웹페이지를 다시 만들어 보기로 했다.
마침 투 두 리스트가 주요 기능이었기 때문이다.


이전에 만들었던 페이지 ↓↓↓
https://ddppp.tistory.com/24

노마드 코더 바닐라JS로 크롬 앱 만들기 후기 (11.21~12.04 챌린지 졸업)

먼저, 간단하게 페이지 구성을 해보았다.

 

- 실시간 시계, 날씨 API 받아오기, 로그인, 투 두 리스트, 랜덤 명언 기능은 기존에 구현해 두었던 것을 다시 다듬어 활용하였다. 코드를 천천히 이해해 보고, 구상해 두었던 페이지의 콘셉트에 맞게 CSS를 적용하였다.


- 배경화면은 pixabay에서 받아왔고, 전체적인 구조는 flexbox로 잡아 주었다.


- 캘린더 기능을 추가해 보고 싶어서 찾아보니, 자바스크립트로 직접 구현할 수도 있지만 간단하게 캘린더 라이브러리를 이용할 수도 있다는 것을 알게 되었다. 그래서 그중 많은 사람들이 사용하는 fullcalendar를 써보기로 했다.

그런데 캘린더를 받아오는 것까지는 어떻게 했는데, 달력을 넘길 때마다 크기가 제멋대로 변하는 문제가 발생했다.
→ 캘린더를 받아오는 부분에 스타일을 적용해서 해결하였다.

<div style="float: center; height : 500px; width : 400px;" id='calendar'></div>

- 허전해 보이는 공간이 있어 링크를 걸어 다른 페이지로 갈 수 있는 아이콘들을 넣어 보기로 했다.

fontawesome을 이용해서 아이콘 이미지를 받아 와 링크 안에 위치시켜 주었다. 그리고 fontawesome으로 받아온 아이콘은 폰트로 취급된다는 점을 고려하여 간단한 CSS도 넣어 주었다.

<div class="icon">
	<a href="https://mail.google.com/mail/u/0/#inbox" target="_blank">
		<i class="fa-solid fa-envelope" style="font-size: 30px; color: #1e2b37b0;"></i>  
	</a>
	<a href="https://github.com/" target="_blank">
		<i class="fa-brands fa-github" style="font-size: 30px; color: #1e2b37b0;"></i>
	</a>
	<a href="https://ddppp.tistory.com/" target="_blank">
		<i class="fa-solid fa-book" style="font-size: 30px; color: #1e2b37b0;"></i>
	</a>
</div>

첫 번째 아이콘은 구글 메일, 두 번째 아이콘은 깃허브, 세 번째 아이콘은 내 블로그를 연결해 놓았다.

그리고 target="_blank"를 쓰면, 링크를 클릭했을 때 해당 탭에서 바로 링크로 이동되지 않고, 새 탭이 열리며 링크로 이동하게 된다.

 

투 두 리스트가 포함된 시작 페이지 보러가기 >> https://dd-stack.github.io/momentum/

 

시연 화면 1

 

시연 화면 2

 

 

● 아쉬운 점

  풀 캘린더나 폰트 어썸 사용 시 따로 CSS를 만질 수 있는 것으로 알고 있는데, 왜인지 HTML 파일에 직접 스타일을 적용하는 것은 되는데 따로 CSS 파일에 id 값으로 스타일을 지정하려니 적용이 되질 않았다. 그래서 아주 기본적인 부분만 바꿔볼 수 있었다. 아이콘에 호버 기능을 넣으면 좋을 것 같은데 그러지 못해 아쉬웠다. 그리고 풀 캘린더는 라이브러리 자체에서 다양한 테마를 지원하는 것 같은데, 아무래도 공식 문서를 좀 더 꼼꼼히 읽어봐야겠다.

 

● 느낀 점

  약 두 달 전쯤 만들었던 페이지를 다시 만들어 보며 그동안 내가 조금은 성장했음을 느낄 수 있었다. 그리고 누군가 가르쳐 주는 내용을 떠나 내가 필요로 하는 부분이 있으면 능동적으로 찾아보고 하는 것에 거리낌이 없어졌다는 것도 많이 느꼈다. 아직은 여러모로 어설프지만 꾸준히 노력하다 보면 언젠가 이런 개발 환경에 더 익숙해질 거라는 확신이 든다.