원본사이트 ←
클론사이트 ←
최대한 그리드와 플렉스를 활용하려고 노력했으며
신문사 페이지인만큼 시멘틱 태그를 활용하기가 좋았습니다.
원본사이트가 20칼럼 그리드를 사용하여 섹션을 나누었는데, 저도 비슷하게나마 같은 느낌으로 구현해보았습니다.
위의 3개의 섹션 모두 처음에는 다르게 레이아웃를 짠 줄 알았는데
위의 그림처럼 그리드로 위에서 옆으로 추가되는 형식을 모든 섹션이 공통점을 가지고 있었습니다.
그래서 해당 컴포넌트를 기반으로 거의 모든 컬럼을 구성했습니다.
상단바가 스크롤되면 내려오는 간단한 스크립트를 구현했습니다.
또한 지수를 보여주는 부분 또한 css만으로는 힘들어서 스크립트로 구현했습니다
아쉬웠던점.
scss 같은 css 전처리기를 제대로 활용하지 못한점이 아쉽고.
그리드를 활용하고 싶어서 사이트를 선택했으나 레이아웃 짜는데 있어 공부가 되었지만
다양한 기능을 구현하기에는 생각보다 단조로운 사이트여서 아쉬웠습니다.