Commit 6f58f20
[ui] 마크다운 스타일링 전면 개선
CSS 변수 시스템 구축:
- --md-spacing-*: 8px base unit 기반 vertical spacing scale
- --md-code-*: 코드 블록 색상 (GitHub 스타일, 다크 모드 지원)
- --md-link-*: 링크 색상 (다크 모드 지원)
코드 블록 개선:
- GitHub 스타일 배경색 및 테두리 적용
- 다크 모드 자동 전환 지원
- 인라인 코드와 코드 블록 명확히 구분
- 코드 블록 여백 및 내부 패딩 증가 (가독성 향상)
- 모노스페이스 폰트 패밀리 명시
링크 스타일 개선:
- 모든 하위 링크에 일관된 파란색 적용
- visited 링크도 동일한 색상 유지 (보라색 변경 없음)
- 다크 모드 링크 색상 지원
- 키보드 네비게이션 접근성 개선 (focus-visible)
Vertical spacing 시스템 적용:
- Proximity principle: 제목과 하위 콘텐츠는 가까이 배치
- Visual hierarchy: h2(48px) > h3(40px) > h4(32px) 상단 여백 차등
- 문단 간격 2배 증가 (8px → 16px) - 가장 큰 체감 변화
- 리스트/인용구 여백 통일 (24px)
- Contextual spacing: 제목+문단, 제목+코드블록 간격 최적화
- Line height 증가 (1.6 → 1.7) - 가독성 향상
BEM 구조 전환:
- #content → .markdown-content 클래스 셀렉터
- 직접 자식 셀렉터(>) 제거하여 중첩 구조 지원
- CSS 선언 순서 최적화 (인라인 코드 먼저, 코드 블록 나중)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>1 parent 9a01a51 commit 6f58f20
1 file changed
Lines changed: 251 additions & 68 deletions
0 commit comments