프론트엔드 챌린지에 대한 나의 제출물(12월&#-CSS 튜토리얼-php.cn

프런트엔드 챌린지 - 12월 에디션, Glam Up My Markup: Winter Solstice

에 대한 제출물입니다.

내가 만든 것

웹사이트는 여기 있습니다: https://plutonium-239.github.io/dev.to-frontend-challenge/
내 목표는 주어진 일반 HTML을 더욱 대화식으로 만드는 것이었습니다. 그리고 유용합니까?. 모든 섹션에 일관된 스타일을 추가하고, 중요 용어를 강조하여 콘텐츠를 더 빠르게 파악하는 동시에 대비를 더 추가했습니다. 또한 모바일 레이아웃에 맞게 사이트를 최적화했으며 상호 작용이 적음에도 불구하고 사이트의 테마가 잘 구성되어 있고 유용합니다.

데모

소스 코드는 https://github.com/plutonium-239/dev.to-frontend-challenge에서 공개적으로 제공됩니다

여행

테마/CSS

동지가 북반구에서 일년 중 낮이 가장 짧은 날을 경험하게 되기 때문에 밤하늘을 테마로 하고 싶었습니다. 그래서 저는 우리의 오랜 친구인 Particles.js를 기억했습니다. 지금은 메모리 누수 수정, 최적화 및 TypeScript 재작성을 통해 tsParticles로 변환되었습니다. 이는 페이지의 배경을 형성합니다. 산만하지 않으면서도 생기있고 심미적으로 보기 좋게 구성했습니다. 이 설정을 얻는 것은 예상하지 못한 고통이었습니다. 최신 버전에는 필요한 모든 것이 포함되어 있고 한 줄로 시작할 수 있도록 전역을 내보내는 tsparticles.bundle.js가 있지만 그렇지 않았습니다. tsparticles.engine.js를 사용하는 동안 수동으로 설정을 호출하려고 했지만 소용이 없었습니다. 이는 유용한 문서 부족으로 인해 어려움을 겪고 있습니다. 나는 또한 하나의 예제 사용법이 있는 슬림 버전을 시도했지만 작동하지 않았습니다. 나는 버전을 이전 버전으로 교체하려고 시도했고(필요한 것은 대부분 새로운 기능이 아니라 기본적인 동작이었기 때문에) 1.43.1로 금을 얻었습니다. Readme의 지침을 따르면 라이브가 가능할 것으로 예상할 수 있지만 여기서는 그렇지 않았습니다.

색 구성표를 선택한 것은 일종의 재미있는 우연이었습니다. 나는 텀블러 게시물/밈의 스크린샷을 보았고 그 안에 있는 색상이 정말 마음에 들었습니다. 말 그대로 Google Lens를 통해 고해상도 이미지를 검색하고 색상을 추출했습니다. 이를 통해 3가지 기본 색상(표면, 기본, 활성)이 제공되었습니다. 다른 색상의 경우 그중 하나는 빨간색-분홍색 음영이고 다른 하나는 녹색/청록색이기를 원했습니다. 나는 이 범위에서 몇 가지 색상을 선택하고 현재 색상 팔레트와 일치하도록 음영을 일치시켰습니다. 대체 색상 팔레트를 사용해 볼 수 있는 Colormind와 같은 훌륭한 도구에 대해 배웠습니다.

My submission for the Frontend Challenge (Dec

타이포그래피에 관해서는 오랫동안 Readex Pro 글꼴을 알고 있었는데 정말 마음에 듭니다. 제목의 표시 글꼴과 일반 텍스트의 기본 글꼴로 모두 잘 작동합니다. 나는 다른 몇 가지(Noto, Raleway)를 시도했지만 결국 Readex Pro를 사용하게 되었습니다. 모든 텍스트에 고정 폭 글꼴을 사용하는 것도 고려했지만 이 페이지의 콘텐츠가 해당 스타일과 호환되지 않았습니다.

다음은 스크롤 기반 애니메이션입니다! 나는 이것을 한동안 실제 웹사이트에서 사용하고 싶었고 목차와 제목에 포함시켰습니다. Firefox (여전히) 애니메이션 범위를 지원하지 않는 문제(그리고 스크롤 기반 애니메이션 자체는 기본적으로 플래그 뒤에서 비활성화됩니다¹). 그래서 해킹을 구현해야 했습니다. -ish 수정(그러나 여전히 플래그를 활성화해야 함).

콘텐츠/HTML(JS를 통해)/CSS

콘텐츠에 와서 저는 두 가지 방법으로 이를 수행했습니다.

JS를 통해 텍스트에 하이라이트 추가 - 본질적으로 innerHTML을 대체해야 하는데 기분이 좋지 않지만 HTML을 수정할 수 없다는 점은 상당히 제한적입니다. JS를 사용하여 요소를 삽입하여 소개에 이미지도 추가했습니다. 약간의 페이드인 효과를 추가하고 싶어서 이렇게 했습니다. 처음에는 섹션의 ::after에서 CSS 배경을 통해 이 작업을 수행했지만 다양한 데스크톱 크기와 모바일에서 페이드가 일관되게 (즉, 이미지의 상단 가장자리가 눈에 띄게 선명하지 않도록) 되도록 했습니다. 불가능한 것으로 밝혀졌습니다. 그래서 섹션에 새 요소를 추가한 다음 이미지 자체에 제한된 ::after 의사 요소의 스타일을 지정해야 했습니다. 이는 매우 잘 작동합니다.
CSS를 통해 축하 이미지 추가 - 네 가지 축하 각각에 대해 다양한 소스(제공)를 통해 적합한 그림을 찾아 의사 요소를 통해 추가했습니다. 나는 그들에게 멋진 시차 스타일을 부여하고 호버 상호 작용에 대한 전체 이미지 표시도 추가했습니다. 이미지가 다양하기 때문에 최선을 다해 고해상도의 이미지를 찾은 후 ImageMagick을 사용하여 800px의 균일한 너비를 갖도록 크기를 조정했습니다. 저는 .celebration 클래스를 사용하여 프레임워크를 정의하고 각 특정 축하에 대한 CSS 변수를 사용하여 이미지 URL(및 크레딧 텍스트)을 정의하는 영리한 방법으로 이를 구현했습니다.

전통 페이지의 경우 목록 마커를 사용자 정의 @counter 스타일로 변경하고 사용 방법을 배웠습니다. 이는 매우 멋진 기능입니다!

상호작용: IntersectionObserver API를 사용하여 TOC에 스크롤 표시기를 추가했습니다. 이는 매우 간단했습니다. 교차로를 확인하고 클래스를 설정하면 끝입니다!

또한 축하 목록 항목에 호버 효과가 있어 해당 이미지 전체가 드러납니다. CSS를 통해 이미지를 ::after의 콘텐츠로 설정하고 마우스 오버 시 표시되도록 하여 이 작업을 수행했습니다.

?~~페이지 마지막에 멋진 작은 비밀을 추가했을 수도 있습니다~~?

캔버스 API와 스크롤 리스너를 사용합니다. 꽤 멋있어 보이지만 나머지 스타일링과도 잘 어울리는지는 100% 확신할 수 없었습니다.

결론

저는 직업상 UI 디자이너/웹 개발자가 아닙니다. 사실 저는 ML 연구원입니다. 하지만 저는 앱/웹사이트를 디자인했고 창의적인 것을 좋아합니다!

그래서 챌린지 포스팅을 보고 재미있겠다는 생각은 들었지만 너무 심각하게 받아들일 생각은 없었습니다. 그런데 우연히 위에서 얘기한 스크린샷과 오래된 입자.js 효과를 사용하는 웹사이트를 보았는데, 그 둘은 어느 순간 클릭됐을 겁니다. 그것을 크리스마스의 기적이라고 부르세요! ?

향후 계획은 딱히 없고, 계획했던 일 이상을 한 것 같은 기분이에요.

다른 사람들의 제출물을 살펴보면 HTML을 직접 편집할 수 없다는 것이 명확하지 않은 것 같습니다. 저는 이 설정된 규칙을 따르고 실제 마크업 콘텐츠를 편집하지 않고 CSS용 스크립트 태그와 링크 태그만 추가했습니다.

코드는 MIT 라이선스에 따라 사용할 수 있습니다.