f주 #DaysOfCode: Flexbox, 타이포그래피, 접근성 등!

8일차: 오늘 #freeCodeCamp에서 "사진 갤러리를 구축하여 CSS Flexbox 배우기" 모듈을 완료했습니다! ? Flexbox는 반응형 레이아웃을 위한 필수 도구이며 이미지를 정렬하고, 유연한 그리드를 만들고, 아름답고 반응형 사진 갤러리를 구성하는 방법을 배웠습니다. 레이아웃을 유연하고 적응적으로 만드는 데 있어 Flexbox가 얼마나 강력한지 보는 것은 매우 흥미롭습니다. 이제 좀 더 자신감을 가지세요! ?

9일차: 오늘은 웹 디자인의 타이포그래피에 관한 모든 것이었습니다. 가독성을 높이고 디자인을 더욱 세련되고 전문적으로 보이도록 글꼴 모음, 글꼴 두께 및 문자 간격을 조사했습니다. 타이포그래피에는 미묘한 세부 사항이 너무 많아서 글꼴 크기 및 간격과 같은 요소가 어떻게 사용자 경험을 극적으로 향상시킬 수 있는지 이해하기 시작했습니다. ?

10일차: #freeCodeCamp에서 접근성을 배우기 위한 퀴즈 프로젝트를 완료했습니다. 이 프로젝트는 나에게 웹 접근성과 장애에 관계없이 모든 사람이 웹 사이트를 사용할 수 있게 만드는 방법에 대해 생각해 보게 했습니다. 모든 요소의 스타일이 올바르게 지정되었는지 확인하는 것은 어려웠지만 보다 포괄적인 웹 디자인을 만들고 있다는 사실을 알게 되어 만족스럽습니다. 또한 핵심 개념을 익히려면 HTML과 CSS에 더 깊이 들어가야 한다는 사실도 깨달았습니다. ?

11일차: #W3Schools를 통해 HTML 및 CSS에 대해 자세히 알아보는 데 몇 시간을 보냈습니다. 저는 CSS가 얼마나 광대한지 전혀 깨닫지 못했습니다. 제가 상상했던 것보다 훨씬 더 광범위합니다! 기본적인 스타일링부터 복잡한 애니메이션까지 배울 것이 너무 많습니다. 아직 읽고 있지만 지금까지 배운 내용을 적용하게 되어 기쁩니다. ?

12일차: HTML 및 CSS를 사용하여 Norman Borlaug 박사에게 헌정하는 헌정 페이지 프로젝트를 완료했습니다! ? 이것은 #freeCodeCamp의 또 다른 도전이었습니다. 레이아웃, 이미지 캡션, 반응형 디자인에 대해 많은 것을 배웠습니다. 힘들었지만 보람찼고, 결과도 만족스럽습니다. 요즘 #W3Schools를 통해 CSS에 대해 더 깊이 파고들고 있는데, 이전에는 어려웠던 개념을 더 명확하게 이해하는 데 도움이 되었습니다. CSS는 엄청나지만 지금까지의 여정을 즐기고 있습니다! ?

13일차: "대차대조표 작성을 통한 의사 학습" 프로젝트에 참여했습니다. 이 프로젝트에서는 CSS의 의사 요소와 의사 클래스를 소개했습니다. 꽤 새로운 개념이었지만 추가 HTML을 추가하지 않고 요소의 특정 부분에 스타일을 지정하는 방법을 배우는 것은 정말 놀라운 일이었습니다. 이 프로젝트를 통해 저는 CSS 선택기와 그것이 얼마나 강력한지 더 깊이 이해하게 되었습니다.

14일차: "고양이 그림 만들기를 통한 중급 CSS 학습" 프로젝트를 마무리했습니다. 정말 창의적인 도전이었습니다! CSS를 사용하여 아트웍을 만드는 것은 독특한 경험이었습니다. 모양과 색상을 올바르게 만드는 데 시간이 좀 걸렸지만 그 과정을 통해 CSS가 레이아웃과 스타일을 넘어서 무엇을 할 수 있는지, 즉 예술을 위한 도구이기도 하다는 사실을 새롭게 인식하게 되었습니다!

도전과제:
Flexbox를 익히는 데는 시간이 걸렸지만 이제는 반응형 디자인에 대한 자신감이 더 커졌습니다.
타이포그래피는 겉으로는 단순해 보이지만 텍스트를 읽기 쉽고 시각적으로 매력적으로 만들기 위해서는 많은 미세 조정이 필요했습니다.
접근성이 가장 큰 과제였습니다. 좋은 디자인과 접근성 표준의 균형을 맞추는 것이 어려웠지만 저는 진전을 이루고 있습니다.
의사 요소는 처음에는 까다로웠지만 추가 마크업을 추가하지 않고도 스타일을 향상시킬 수 있는 방법을 이해하기 시작했습니다.
현재까지의 진행 상황:
반응형 레이아웃을 위해 Flexbox를 사용하는 것이 더 편합니다.
타이포그래피가 더 직관적으로 느껴지기 시작했고 더 나은 방법을 구현하고 있습니다.
저는 접근 가능한 웹 디자인에 대해 더 깊이 인식하게 되었고 제 프로젝트에서도 이에 더 많은 관심을 기울이고 있습니다.
CSS 의사 요소와 CSS 아트에 대한 이해가 확대되었으며 이러한 기술을 향후 프로젝트에 적용하고 싶습니다.
#100DaysOfCode 여정을 계속 진행하면서 추가 업데이트를 계속 지켜봐 주시기 바랍니다! ??

지금까지 작업한 HTML, CSS 코드를 살짝 보여드리겠습니다. 모든 진행 상황을 문서화한 GitHub 저장소를 확인하실 수 있습니다: https://github.com/heritech9/100-days-of-code.git

위 내용은 f주 #DaysOfCode: Flexbox, 타이포그래피, 접근성 등!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!