Sumi.css는 별도 클래스 없이 시맨틱 HTML 요소에 기본 스타일을 적용하는 CSS 프레임워크다. 파일 하나로 사용할 수 있으며 빌드 단계, 자바스크립트, 의존성이 필요 없다. 압축·gzip 적용 크기는 6.7KB다.
방문자의 시스템 설정에 따라 라이트·다크 모드를 적용하고, data-theme 속성으로 특정 모드를 지정할 수 있다. 색상과 글꼴, 크기, 모서리 반경은 CSS 사용자 지정 속성으로 바꿀 수 있다. 요소 스타일의 명시도가 0이어서 !important 없이도 사용자 CSS로 덮어쓸 수 있다.
제목과 문단, 내비게이션, 폼, 표, 카드, 아코디언, 모달 등을 HTML 요소만으로 꾸민다. 그리드와 버튼 스타일처럼 추가 구성이 필요한 경우에는 클래스를 사용할 수 있다. 포커스 표시, aria-invalid, aria-busy, aria-current 상태 지원, 동작 줄이기 설정도 포함한다.
sum i.min.css를 프로젝트에 복사해 연결하거나 jsDelivr CDN에서 불러오면 된다. 개발 중에는 주석이 포함된 sumi.css를 사용할 수 있다. 제작자가 안내한 지원 브라우저는 최신 Chrome, Edge, Firefox, Safari다. 사용하는 :where(), :has(), color-mix()는 Chrome·Edge 111, Firefox 121, Safari 16.2부터 지원되며, 이전 브라우저에서는 페이지를 읽을 수 있지만 호버와 포커스 색상은 단순하게 표시된다.
댓글 (0)
로그인하면 이 기사에 내 생각을 남길 수 있어요