[fix/ui/css] breacrumb, content내 code 섹션, nav/aside 스타일링 수정 #175
+307
−91
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- XSS 방지를 위한 escapeHtml 함수 추가 - renderBreadcrumbItem 함수로 렌더링 로직 분리 (순수 함수) - 링크 색상을 Tailwind 클래스로 명시 (파란색, 다크 모드 지원) - linkable=false 항목을 회색으로 시각화 (클릭 불가 표시) - nav 요소의 색상 클래스를 자식 요소로 이동하여 색상 관리 개선 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- index.html: #content에 .markdown-content 클래스 추가 - CSS를 ID 셀렉터(#content)에서 클래스 셀렉터(.markdown-content)로 전환 - BEM 네이밍 컨벤션 적용으로 다른 요소와의 충돌 방지 - 테스트 환경에 .markdown-content 클래스 추가 - tests/markdown.test.ts - tests/table-contents.test.ts Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
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>
Contributor
There was a problem hiding this comment.
Pull request overview
마크다운 콘텐츠 영역의 스타일링을 .markdown-content 기반으로 정리하고, breadcrumb 렌더링/레이아웃(sticky top) 관련 UI를 개선하는 PR입니다. 추가로 Claude용 GitHub 이슈 생성 커맨드/에이전트 설정 파일이 포함됩니다.
Changes:
#content중심 CSS를.markdown-content중심으로 리팩터링하고 코드/링크/리스트/인용구 스타일을 확장- breadcrumb 렌더링 로직을 함수로 분리하고 표시 스타일을 조정
- sidebar/aside sticky offset 조정 및 테스트 DOM에
.markdown-content클래스 반영
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| tests/table-contents.test.ts | 테스트 DOM의 #content에 .markdown-content 클래스 추가 |
| tests/markdown.test.ts | 테스트 DOM의 #content에 .markdown-content 클래스 추가 |
| src/styles/content_style.css | 마크다운 전용 스타일을 .markdown-content로 전환하고 코드/링크/여백 체계 개선 |
| src/scripts/breadcrumb.ts | breadcrumb HTML 생성 로직 분리 및 XSS 방지 목적의 escape 도입 |
| index.html | #content에 .markdown-content 클래스 추가, sidebar/aside sticky top 값 조정 |
| .claude/commands/issue.md | Claude 커맨드(이슈 생성) 추가 |
| .claude/agents/gh-issue-creator.md | GitHub CLI 기반 이슈 생성 에이전트 정의 추가 |
This was
linked to
issues
Feb 4, 2026
sticky header의 높이가 top-16(64px)으로 변경되면서 좌측 네비게이션과 우측 TOC가 헤더와 겹치는 문제를 수정했습니다. nav#sidebar와 aside#aside-toc의 top 값을 top-12에서 top-16으로 조정하여 일관성을 유지합니다. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Copilot PR 피드백을 반영하여 보안 취약점을 개선했습니다. - escapeHtmlAttribute() 함수 추가: href 속성값을 안전하게 이스케이프 - item.path를 escapedPath로 변환하여 XSS 공격 벡터 차단 - 특수문자(&, <, >, ", ')를 HTML 엔티티로 치환 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Copilot PR 피드백을 반영하여 CSS 코드 품질을 개선했습니다. - 인라인 코드 셀렉터 정밀도 향상: .markdown-content :not(pre) > code (pre 태그 내부 코드 블록 제외, 직접 자식만 선택) - 유효하지 않은 CSS 속성 제거: max-height: auto - 주석 개선: 직접 자식 셀렉터(>)와 자손 셀렉터(공백) 사용 전략 명확화 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.