1. 기능 목적
   • 매일의 웹 개발 학습 내용(HTML, CSS, JavaScript, Git 등)을 카드 형식으로 기록·관리
   • 실습 결과물 링크 공유, 학습 통계 확인, 검색/필터링을 통한 효율적인 정보 탐색
2. 주요 섹션
   • 헤더: 제목, 검색바, 월별 필터 (JavaScript로 검색 및 필터링 기능 구현)
   • 통계 카드: 총 학습 일수, 월별 학습 일수 표시
   • 학습 카드:
     • 날짜별 학습 목표, 배운 내용, 실습 결과물, 느낀점, 트러블 슈팅 기록
     • 태그 시스템(#CSS, #Git)으로 키워드 분류
   • 푸터: 마지막 수정 시간 동적 표시 (JavaScript 기반)
3. 기술 스택
   • HTML: 시맨틱 태그(<header>, <section>, <article>) 활용
   • CSS: 반응형 레이아웃(.container, .card), Flexbox/Grid 사용
   • JavaScript: 검색, 필터링, 마지막 수정 시간 로직 (app.js 연동)
   • 호스팅: 로컬 파일 기반 (상대 경로로 리소스 연결)
4. 디자인 요소
   • 카드 UI: 그림자 효과, 스티커 느낌의 시각적 강조
   • 반응형: 모바일·데스크톱 레이아웃 자동 조정
   • 파비콘: 다중 형식 지원(.ico, .svg, .png), iOS용 apple-touch-icon
5. 주목할 점
   • 학습 메타데이터 강조: 트러블 슈팅을 <details> 태그로 접고 펼칠 수 있게 구성
   • 접근성: <time datetime="">으로 기계 친화적 날짜 표기
   • 확장성: 주석 처리된 샘플 카드(Day 0)를 통해 템플릿 제공

사용 시나리오

• 학습자: 매일 배운 내용을 체계적으로 정리하고 실습 결과물을 아카이빙
• 검토자: 태그/검색으로 특정 주제(예: #Bootstrap)의 학습 기록 추적
• 협업자: 트러블 슈팅 사례를 공유해 문제 해결 방법 전파