vladocar/Sumi.css

어떤 프로젝트인가요?

핵심 기능

• 01클래스를 추가하지 않아도 기본 시맨틱 HTML 요소에 스타일을 적용합니다.
• 02JavaScript와 의존성이 없는 단일 CSS 파일로 제공됩니다.
• 03자동 라이트·다크 모드를 지원하며 data-theme으로 모드를 지정할 수 있습니다.
• 04--s- 접두사가 붙은 CSS custom properties로 테마를 설정할 수 있습니다.
• 05specificity가 0인 요소 스타일이라 쉽게 덮어쓸 수 있습니다.
• 06그리드, 플렉스, 컨테이너 레이아웃 클래스를 제공합니다.
• 07포커스 링, ARIA 상태, 동작 줄이기 설정 등 접근성을 지원합니다.

활용 사례

• 빌드 파이프라인 없이 정적 사이트, 문서 페이지, 개인 홈페이지의 스타일을 빠르게 적용할 때.
• 마크업을 거의 바꾸지 않고 폼이나 표가 많은 내부 도구를 프로토타이핑할 때.
• 직접 작성한 HTML이 있는 프로젝트에 일관된 테마를 적용할 때.
• 공유 색상 및 간격 토큰을 바탕으로 사용자 정의 컴포넌트를 만들 때.

빠른 시작

1. 1

   sumi.min.css를 프로젝트에 다운로드합니다

2. 2

   HTML의 head에서 스타일시트를 연결하거나 jsDelivr CDN에서 불러옵니다

사용 전 알아둘 점

• !최신 CSS 기능을 사용하므로, 구형 브라우저에서는 마우스 오버 및 포커스 색상이 단순하게 표시됩니다.

토픽

자주 묻는 질문

Sumi.css은(는) 무엇인가요?

클래스 없이 시맨틱 HTML을 꾸미는 미니멀 CSS 프레임워크로, 빌드 과정 없이 단일 파일로 제공됩니다. Sumi.css는 클래스 없는 스타일링을 중심으로 설계된 CSS 프레임워크입니다. 제목, 폼, 표, 카드, 아코디언, 모달, 내비게이션을 기본 HTML 요소만으로 꾸미며, 클래스는 세부 조정이 필요한 경우에만 사용합니다. minify 및 gzip 적용 시 약 6.7 KB인 단일 파일로 제공되며, JavaScript와 의존성이 없습니다. 파일을 다운로드하거나 jsDelivr CDN에서 불러올 수 있습니다.

Sumi.css은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

Sumi.css은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

Sumi.css은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. Sumi.css의 마지막 커밋은 2026년 10월 21일입니다.

Sumi.css은(는) 어디에 사용할 수 있나요?

빌드 파이프라인 없이 정적 사이트, 문서 페이지, 개인 홈페이지의 스타일을 빠르게 적용할 때. 마크업을 거의 바꾸지 않고 폼이나 표가 많은 내부 도구를 프로토타이핑할 때. 직접 작성한 HTML이 있는 프로젝트에 일관된 테마를 적용할 때. 공유 색상 및 간격 토큰을 바탕으로 사용자 정의 컴포넌트를 만들 때.

Sumi.css는 어떻게 설치하나요?

sumi.min.css를 프로젝트에 다운로드합니다 HTML의 head에서 스타일시트를 연결하거나 jsDelivr CDN에서 불러옵니다

Sumi.css은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/vladocar/Sumi.css