- matcha.css는 HTML 요소를 기본 브라우저 스타일시트처럼 바로 꾸며, 빠른 프로토타이핑·정적 HTML·Markdown 생성 문서에서 수동 CSS 작업을 줄여줌
- 빌드 단계, 의존성, JavaScript, 설정 없이
<link rel="stylesheet"> 한 줄로 적용하며, 기본 gzip 크기는 약 8.81kB임
- 문서 구조와 시맨틱 요소를 활용해
<menu> 서브메뉴, 필수 입력 * 표시, 입력 검증 상태별 테두리 색상 같은 동작을 CSS만으로 처리함
- Default, Lite, Utility classes, Istanbul coverage 프리셋과 custom builder를 제공하며, 세부 스타일 디렉터리도 직접 불러올 수 있음
- MIT 라이선스 오픈소스이며, 유틸리티 클래스와 레이아웃 기능은 편리하지만 문서에 클래스를 추가하므로 시맨틱 기반 사용과는 거리가 생길 수 있음
HTML 문서를 바로 꾸미는 드롭인 CSS
- matcha.css는 순수 CSS로 HTML 요소를 스타일링하는 드롭인 라이브러리임
- 사용자가 문서를 직접 패치하지 않아도 기본 브라우저 스타일시트와 비슷하게 HTML 요소를 보기 좋게 만드는 데 초점을 둠
- 빠른 프로토타이핑, 정적 HTML 페이지, Markdown에서 생성된 문서, CSS 세부사항을 깊게 다루지 않고 HTML 요소 전체 범위를 활용하려는 개발자에게 적합함
- 이 페이지 자체도 matcha.css로 스타일링됨
한 줄로 도입하고 쉽게 되돌릴 수 있음
- 빌드 단계, 의존성, JavaScript, 설정, 문서 리팩터링 없이 사용할 수 있음
- gzip 기준 기본 빌드 크기는
~8.81kB임
- 문서의
<head>에 다음 한 줄을 추가하면 적용됨
<link rel="stylesheet" href="https://matcha.mizu.sh/matcha.css">;
- 제거할 때도 해당
<link rel="stylesheet">를 빼면 되며, 문서 리팩터링이나 정리가 필요 없도록 설계됨
- 에셋은 Vercel에서 호스팅되며, npm 패키지를 배포하는 CDN 서비스인 JSdelivr에서도 사용할 수 있음
- 모든 공개 버전은 /v/ 디렉터리에서 제공되며, 기본적으로
main 브랜치가 서빙됨
시맨틱 구조를 활용한 스타일링
- matcha.css는 문서 구조와 요소 계층을 기준으로 스타일을 조정함
-
자동 동작 예시
<menu> 요소를 중첩하면 암시적 서브메뉴를 만듦<label>이 <input required>와 함께 쓰이면 필수 필드 표시 *를 자동으로 붙임[data-color-scheme="light"]는 라이트 모드를 강제하고, [data-color-scheme="dark"]는 다크 모드를 강제함[data-color-scheme]은 특정 요소에 적용해 선택적으로 색상 스킴을 강제할 수 있음:root는 CSS 변수를 설정하고, @media (prefers-color-scheme)는 사용자 환경설정에 따라 모드를 설정함!important 규칙을 쓰지 않아 필요한 경우 스타일을 덮어쓰기 쉬움
빌드와 배포 선택지
- 기본 빌드 외에 목적별 프리셋 빌드를 제공함
- Default
~8.81kB: @istanbul-coverage를 제외한 모든 시맨틱 스타일링과 추가 기능
- Lite
~5.59kB: 모든 시맨틱 스타일링, @break-words, @discrete-scrollbars
- Utility classes
~3.43kB: @root, @utilities
- Istanbul coverage
~1.94kB: @root, @syntax-highlighting, @istanbul-coverage
- 필요한 기능만 선택하려면 custom builder를 사용할 수 있음
- 더 복잡한 커스터마이징은 fork 후 직접 패치하는 방식도 가능함
- github.com/lowlighter/matcha/styles의 각 하위 디렉터리는 웹사이트에서 직접 서빙됨
- 예를 들어
@syntax-highlighting만 쓰려면 해당 mod.css를 직접 포함할 수 있음
- 자체 CSS 변수를 제공하지 않는다면
@root 패키지가 필요할 가능성이 큼
- 모든
mod.css 파일은 편의를 위해 부모 디렉터리 별칭으로도 제공됨
스타일링되는 HTML 요소 범위
-
문서 구조
section, article, header, footer, aside, nav, menu, hgroup, 제목 요소 등을 스타일링함<article>은 부모 컨테이너가 display: flex인 경우와 자연스럽게 통합되도록 설계됨<nav> 안의 <ol>은 breadcrumb처럼 표시되고, <ul>은 내비게이션 목록처럼 표시됨
-
텍스트와 인라인 요소
<blockquote>, <pre>, <code>, <abbr>, <q>, <cite>, <dfn>, <em>, <strong>, <small>, <ruby>, <sup>, <sub>, <mark>, <ins>, <del>, <kbd>, <samp>, <output> 등에 스타일을 제공함- 브라우저 기본 툴팁은 스타일링할 수 없으므로, CSS 툴팁에는
[title] 대신 [data-title] 속성을 쓰도록 함
-
폼 요소
<form>, <button>, <label>, <fieldset>, <input>, <select>, <textarea>, <progress>, <meter>를 스타일링함- 입력 요소는 브라우저가 수행하는 검증 외의 별도 검증을 하지 않음
:user-valid는 --success 테두리, :user-invalid는 --danger 테두리를 적용함<label><input></label> 패턴을 쓰면 required 여부를 자동 감지할 수 있지만, <label for><input> 패턴에서는 불가능함
-
표와 미디어
<table>은 border collapse를 적용하며, 부모에 폭이 있으면 자동 overflow를 사용함.table-responsive 컨테이너로 감쌀 수 있음<img>, <video>, <iframe>에는 둥근 모서리 스타일을 적용함
-
<details>와 <dialog>
<details>와 <dialog>도 기본 스타일링 대상임<dialog>의 ::backdrop은 dialog.showModal() 사용 시 표시됨- 제출 시 브라우저가 JavaScript 없이 dialog를 닫도록
<form method="dialog"> 사용을 권장함
레이아웃 기능의 편의성과 비용
- matcha.css는 문서 레이아웃 옵션도 제공함
.layout-simple 클래스를 요소에 추가하면 단순 레이아웃을 활성화함- 요구 구조에는
.layout-simple, header:first-of-type, main:only-of-type, aside, nav, footer:last-of-type 등이 포함됨
- 미디어 조건에 따라 구조가 달라짐
- 기본 화면에서는
header와 main 중심으로 구성됨
min-width: 960px에서는 aside와 main 구성이 됨min-width: 1280px에서는 두 개의 aside와 main 구성을 사용함
- 작은 화면에서
aside:nth-of-type(1)은 숨겨지며, data-expand로 다시 보이게 하거나 data-expandable로 접을 수 있게 만들 수 있음
- 레이아웃 사용은 문서 리팩터링이 필요할 수 있으며, 나중에 matcha.css 사용을 중단할 때 다시 리팩터링이 필요할 수 있음
유틸리티 클래스는 보조 기능에 가까움
- matcha.css는 편의를 위해 일부 유틸리티 클래스도 제공함
- 색상 관련 클래스는 다음과 같음
.default, .muted, .accent, .active, .variant, .success, .attention, .severe, .dangerbd-*는 테두리 색상, bg-*는 배경색, fg-*는 전경 스타일을 바꿈
.flash는 주의를 끄는 블록을 만들며, 색상 클래스와 조합할 수 있음- 텍스트, 크기, 위치, display, flex, overflow, cursor, selection, pointer-events, sizing, resize, shadow, SVG fill/stroke 관련 유틸리티를 제공함
- 여백과 패딩은
0, .125, .25, .5, .75, 1, 1.25, 1.5, 1.75, 2, 3, 4 값을 기반으로 하는 번호형 클래스를 사용함
- 유틸리티 클래스는 문서에 클래스를 추가해야 하므로 나중에 matcha.css에서 빠져나오기 어렵게 만들 수 있음
- 제공 유틸리티가 부족하거나 제한적이라면 유틸리티 우선 CSS 프레임워크 사용 또는 전환을 고려해야 함
- matcha.css는 완전한 CSS 프레임워크가 되는 것을 목표로 하지 않음
코드 표시, 편집기 모양, Shadow DOM
- matcha.css는
@media (prefers-color-scheme)를 따르는 문법 강조 클래스를 제공함
- 코드 편집기 형태를 만들기 위한 클래스도 포함함
- 요구 구조는
.editor, > textarea, > div.highlight
- 이 추가 스타일은 실제 문법 강조를 수행하지 않고, 코드 편집기 모양만 스타일링함
- 실제 강조에는 highlight.js 같은 문법 강조 라이브러리가 필요함
- matcha.css는
:host 의사 클래스를 사용해 CSS 변수도 정의하므로 Shadow DOM과 호환됨
- Shadow DOM 안에서는 matcha.css를 다시 import하고 별도 custom styles를 적용해도 문서 나머지와 충돌하지 않도록 격리할 수 있음
브라우저 지원과 라이선스
- matcha.css는 모든 현대 브라우저와 호환되도록 만들어졌다고 밝힘
- 지원 표에는 Chrome 92%, Edge 96%, Safari 94%, Firefox 95%, Opera 95%, Android Chrome 96%, iOS Safari 93%, Samsung Internet 96% 등이 포함됨
- 오픈소스로 공개되어 있으며 MIT License를 사용함
- 저장소는 github.com/lowlighter/matcha에 있음