Day-40 of Coding 요약
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- 웹 개발 초보자
- 난이도: 초보자 수준의 HTML/CSS 기초 기술 적용
핵심 요약
- HTML + CSS만으로 진행 로그 섹션 구현 (JavaScript 미사용)
- 그래디언트 배경과 어울리는 색상 선택 어려움 → 부드러운 스틸 블루 색상 사용
- 커스텀 폰트, 그림자, Flex 레이아웃 적용으로 디자인 완성
섹션별 세부 요약
1. 프로젝트 개요
- 100DaysOfCode 웹사이트의 Progress Log 섹션 설계
- HTML과 CSS만 사용 (JavaScript 미사용)
- 디자인 목표: 일별 카드 형식의 진행 로그 시각화
2. 디자인 과정
- 그래디언트 배경과 어울리는 색상 선택 어려움 → 색상 팔레트 고민
- 최종 선택: Soft Steel Blue 색상 사용 + 그래디언트 테두리 적용
- 스타일링: Flex 레이아웃, 커스텀 폰트, 그림자 효과 적용
3. 결과물
- 일별 카드 형식의 로그 섹션 완성
- 시각적 일관성 유지 (색상, 레이아웃, 폰트)
- 초보자 수준의 실용적 웹 디자인 사례 제공
결론
- 초보자에게 실용적인 팁: 그래디언트 배경과 조화로운 색상 선택은 Soft Steel Blue와 같은 부드러운 색상 사용을 권장하며, Flex 레이아웃은 간단한 레이아웃 구성을 위해 유용함.