Skip to content

Commit 6f58f20

Browse files
krsy0411claude
andcommitted
[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

File tree

0 commit comments

Comments
 (0)