2022-11-09: 클론 코딩 챌린지 - 뉴스 페이지 만들기

Tailwind CSS 학습을 마치고, Keyframe도 공부했다. 이제 감각을 잊지 않게 다시 사이트를 만드는 연습을 하기 위해 클론 코딩 챌린지를 진행하려 한다.

이번 챌린지는 뉴스 페이지이며, 아래의 이미지를 바탕으로 똑같이 구현하면 된다.

모바일도 당연히 있는데, 모바일 우선 개발이 목적이므로 처음 만들 땐 아래의 이미지를 우선적으로 참고하여 진행했다.

이 프로젝트를 진행하는데 고려해야할 사항들을 스스로 정리해보니 다음과 같았다.

모바일
- 페이지 영역이 일렬로 정렬됨. display의 변경을 grid나 flex로 1줄로 정렬해볼 수 있음.
- 상단 헤더 메뉴 버튼을 누르면 메뉴 팝업창이 출력됨.
PC 브라우저
- 상단 헤더 메뉴 버튼이 삭제되며, 팝업창에 있던 메뉴들이 상단 헤더에 추가됨.
- 일부 버튼들에 hover가 출력됨.
- 모바일에서 넓어지면서 display 구성이 달라짐. grid나 flex를 자유자재로 쓰는 걸 고려해봄.
추가로 고려해볼 것
- 이번에 keyframe을 공부해봤으니 일부 head 폰트들에 keyframe 효과를 넣는 건 어떨까?
- 스크롤을 내리면 그걸 인지하고 화면에 출력되도록 하는 걸 구현해보는 것은?
- 뉴스 페이지인 만큼, 각 페이지의 내용들에 접근성을 고려해보는 것은?

본래는 페이지를 똑같이 제작하기만 하면 되는 챌린지였지만, 얼마 전부터 keyframe을 공부하고 또 접근성을 좀 더 자세하게 알고 싶어 Sementic Tag를 학습하고 싶은 것도 있었다.

그래서 이번에는 추가로 고려해볼 내용들에 좀 더 집중하여 챌린지를 진행했다.