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