☃️❄️Winter Solstice 웹: 동지에서 영감을 받은 웹페이지❄️☃️

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

에 대한 제출물입니다.

☀️❄️ 간략한 소개(내가 만든 것에 대해)

서늘한 느낌과 하늘과 같은 디자인을 제공하는 겨울 테마로 아름답게 제작된 웹사이트 'Winter Solstice Web'에 오신 것을 환영합니다. 이것은 Winter Solistice 테마, 크리스마스 정신, 눈 내리는 것에서 영감을 받았습니다. 이 사이트는 사용자를 위한 부드러운 스크롤링과 대화형 기능을 혼합합니다.

? 라이브 데모

내 코드 링크 - https://github.com/Divya4879/winter-solistice_web-glam.git

라이브 사이트 - https://divya4879.github.io/winter-solistice_web-glam

내 코드 사이트 미리보기:-
https://codepen.io/divya-2002/pen/xbKgYZY

여기서 이번 시즌의 추운 날씨와 쌀쌀함을 느끼고, 동지 이벤트에 대한 정보를 알아가시기를 바랍니다.

??‍?? 설계

이 웹사이트는 동지(Winter Solistice)를 주제로 디자인되었으며, 서리가 내린 파란색, 흰색, 어두운 배경의 멋진(말 그대로 그리고 비유적으로??) 색상 팔레트를 사용합니다. 전체적으로 눈 내리는 애니메이션 배경과 눈 내리는 장면을 모든 섹션에 추가해 매력을 더했고, 섹션에는 투명 오버레이, 제목에는 텍스트 그림자를 적용해 가독성을 높이고 대비를 높였습니다.

?️?️ 주요 기능

제가 정말 좋아하고 열심히 노력한 웹사이트의 주요 기능은 다음과 같습니다.-

1. 부드러운 스크롤링 및 시차 효과: GSAP 연속 스크롤 기능을 사용했습니다. 이를 통해 사용자는 섹션을 아래로 또는 위로 스크롤할 때 부드러운 스크롤 동작을 경험할 수 있습니다.

2. 헤더 및 탐색: 사용자가 내 사이트를 이동할 때 탐색 표시줄이 고정/고정되도록 고정 헤더를 추가했습니다. 내비게이션은 반응형으로 만들었고 화면 크기에 따라 레이아웃도 달라졌습니다. 또한 탐색 모음에 호버 효과를 사용하여 더욱 매력적인 느낌을 더했습니다.

3. 모바일 반응성: 다양한 화면 크기에 반응하도록 내 사이트에 Flexbox와 수직 탐색 표시줄을 사용했습니다.

4. 겨울 테마 애니메이션/효과: 사이트의 전체 겨울 테마를 만들기 위해 눈 애니메이션을 배경으로 추가했습니다. 그리고 모든 섹션에 개별적으로 약간 기발하면서도 재미있는 "눈폭풍"을 추가했습니다.

5. 타이포그래피 및 색상: 이번 챌린지를 위해 Google 글꼴에서 "Cinzel", "Itim", "Mountains of Christmas"와 같은 몇 가지 새로운 글꼴을 시험해보고 사용했습니다. 웹사이트의 전반적인 색상 테마에는 파란색과 흰색, 보라색과 같은 겨울 테마 색상과 다양한 색조가 포함되어 있습니다.

6. 사용자 정의 애니메이션 및 효과: 또한 사이트 전체에 애니메이션, 스크롤 효과 등을 추가하여 현대적인 느낌을 주고 사람들이 모든 것을 탐색하도록 유도했습니다.

?️?☹️ 나의 여정- 배움, 좋은 ​​점과 나쁜 점

솔직히 이 일로 인해 많은 것을 배웠습니다. 저는 이전에 GSAP를 사용해 본 적이 없었기 때문에 몇 가지 기본 사항과 기초를 다시 살펴보고 제가 원하는 것이 가능한지 조사해야 했습니다. 그리고 어떻게 시도하고 올바르게 작동하도록 가능한 한 여러 번 변경해야 했습니다.

저에게는 정말 좋은 학습이자 창의적인 경험이었습니다. 저는 정말 많은 것을 배웠고, 밤을 새워서 마무리하고 제출하고, 여러 가지 시도를 하고 마침내 이것을 만들었습니다.

?? 이번 챌린지에서 무엇을 배웠나요??

이번 챌린지를 통해 다음을 이룰 수 있었습니다.-

1. 스크롤 애니메이션 기술(GSAP)을 쌓으세요.

2. 웹사이트의 "상호작용" 부분을 강화, 개선 및 실천하세요.

3. 동지(Winter Solistice)에 대한 많은 재미있는 사실을 알게 되었고 특정 테마에 따른 글꼴 및 색상 팔레트에 대한 연구도 했습니다.

4. CSS 기술을 연습하고 JS 부분에 대해 연습하고 배웠습니다.-> 폭설, 스크롤 애니메이션, DOM 조작.

5. 웹 개발의 기초인 HTML, CSS, JS를 사용하여 미적인 느낌과 대화형 및 기능적인 웹사이트를 만듭니다.

주요 콘텐츠가 이미 HTML이라는 템플릿으로 되어 있다는 것을 알고 있지만 디자인도 제작 과정에서 여러 번 반복되었습니다. 저에게는 정말 좋은 경험이었습니다.

?️? 왜 "Winter Solstice Web"이라는 이름이 붙었나요?

솔직히 좀 당연한 이야기지만 동지 전야를 기반으로 하고 기본 정보를 제공하는 웹사이트이기 때문입니다.

❄️☃️결론

기본적인 프론트엔드 기술을 연습하고 싶어서, 그리고 항상 "Dev.to Challenges"에 참여하고 싶어서 이 챌린지를 시작했습니다. 이 기간 동안 나는 극도로 열정적이고, 쾌활하고, 기대되고, 행복하고, 좌절하고, 실망하고, 만족했습니다. 이 "Winter Solstice Web"은 저에게 단순한 프로젝트가 아니라, 제가 이 작품을 만드는 동안 겪은 여정을 상기시켜주는 동시에 아름다운 서리 테마의 Web Solistice 이벤트 기반 창작물입니다.

부담이 아니길 바랍니다. 어느 플랫폼에서든 내 프로젝트에 대한 블로그를 쓰는 것은 처음입니다.
그리고 저는 이것을 만들면서 정말 놀라운 여정을 겪었습니다. 제가 만든 것만큼 여러분도 즐거운 시간을 보내시기 바랍니다.

?️? 피드백

앞서 언급했듯이 저는 이 플랫폼에 처음으로 프로젝트를 제출했으며 이전에 그런 블로그를 작성한 적이 없습니다.

내 Winter Solstice 웹 및/또는 내 블로그에 대한 귀하의 의견에 진심으로 감사드립니다. 아래 댓글 섹션에서 여러분의 생각을 알려주세요.

여기까지 읽어주신 분들께 감사드립니다. 제 블로그와 웹사이트에도 소중한 시간을 보내주셔서 감사합니다.

위 내용은 ☃️❄️Winter Solstice 웹: 동지에서 영감을 받은 웹페이지❄️☃️의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!