bluemsi/2nd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: complete wikification of War Commander batch 1&2 and final grey dot cleanup

Browse Source
This commit is contained in:
yesung
2026-04-27 18:58:22 +09:00
parent 3424166ea2
commit 6b86b0da4c
2706 changed files with 9074 additions and 7273 deletions
Download Patch File Download Diff File Expand all files Collapse all files
10_Wiki/Topics/Frontend_Mastery/반응형 디자인(Responsive Design).md
+1 -1
View File
@@ -16,7 +16,7 @@
* **성능 및 미디어 최적화:** 로딩 속도 향상과 누적 레이아웃 이동(CLS) 방지를 위해 이미지에 명시적인 `width`와 `height` 속성을 부여하거나 `aspect-ratio`를 사용합니다 [18, 35, 39]. WebP 등 최신 포맷 사용, 반응형 이미지(`srcset`, `sizes`), 지연 로딩(Lazy-loading)을 통해 Core Web Vitals 성능을 최적화합니다 [18, 24, 31, 35, 40, 41].
## 🔗 Knowledge Connections
- **Related Topics:** [[레이아웃 Flexbox / Grid 완전 이해]], [[디자인 시스템 개념]]
- **Related Topics:** 레이아웃 Flexbox / Grid 완전 이해, [[디자인 시스템 개념]]
- **Projects/Contexts:** [[모바일 퍼스트 인덱싱(Mobile-First Indexing)]], [[Core Web Vitals]]
- **Contradictions/Notes:** 모바일 퍼스트(Mobile-first)와 반응형 디자인(Responsive design)은 종종 동일한 개념으로 오해받지만 서로 다릅니다. 모바일 퍼스트는 제한된 공간에서 필수적인 요소를 결정하는 '콘텐츠 우선순위 및 설계 전략'인 반면, 반응형 디자인은 레이아웃이 화면에 맞게 유동적으로 변하도록 만드는 '구현 시스템 및 기술'입니다 [42-44]. 또한 순수 뷰포트 상대 단위(vw)만으로 폰트 크기를 설정하면 사용자의 접근성 줌(zoom) 기능이나 글꼴 기본 설정을 무력화할 수 있어, `calc()`나 `clamp()`를 활용해 사용자 기본 설정(`em`, `rem`)과 혼합하는 방식이 필수적입니다 [45-49].