98.css - Windows 98 UI를 재현하는 CSS 라이브러리

23 hours ago 3

98.css는 의미론적 HTML과 접근성을 바탕으로 Windows 98처럼 보이는 웹 인터페이스를 구현하는 CSS 디자인 시스템임 JavaScript 없이 HTML에 스타일만 적용하므로 React와 바닐라 JavaScript를 비롯한 다양한 프런트엔드 환경에서 사용할 수 있음 버튼, 입력창, 선택 컨트롤부터 창·탭·트리·표·진행 표시줄까지 폭넓은 Windows 98 UI 구성요소를 제공함 레이블 연결과 aria-label, ARIA 역할을 지원하며, 기본 외형을 유지하면서 여백이나 색상 같은 스타일도 재정의할 수 있음 unpkg, npm, GitHub Releases로 설치할 수 있고 MIT 라이선스로 배포돼 수정과 오픈소스 기여가 가능함 프로젝트 구성과 설치 98.css는 Windows 98 인터페이스를 충실하게 재현하는 CSS 라이브러리임 의미론적 HTML을 기반으로 버튼에는 <button>, 입력 요소에는 <label>, 아이콘 버튼에는 aria-label을 사용함 주요 목표에 접근성이 포함되며 키보드 탐색과 보조 기술 사용을 고려함 JavaScript 없이 CSS로만 HTML을 꾸미므로 특정 프런트엔드 프레임워크에 종속되지 않음 React 사용 예제 바닐라 JavaScript 사용 예제 가장 빠른 사용법은 unpkg에서 스타일시트를 불러오는 것임 <link rel="stylesheet" href="https://unpkg.com/98.css">; GitHub Releases나 npm으로도 설치할 수 있음 npm install 98.css 기본 외형을 유지하면서 버튼 여백이나 입력 레이블 색상 같은 개별 스타일을 자유롭게 재정의할 수 있음 기본 선택 컨트롤 버튼 표준 버튼은 75×23px 크기이며 돌출된 외부·내부 테두리와 기본 12px 수평 여백을 가짐 <button>, input[type=submit], input[type=reset]을 지원함 default 클래스는 활성 창에서 Enter 키를 눌렀을 때 실행할 기본 동작을 나타냄 클릭하면 돌출된 테두리가 들어간 형태로 바뀌며, 비활성 버튼은 테두리를 유지한 채 레이블이 흐려짐 포커스는 버튼 콘텐츠 안쪽 4px 위치의 점선 테두리로 표시됨 체크박스와 라디오 버튼 체크박스는 독립적이거나 비배타적인 선택을 나타내며, 선택되면 들어간 패널 안에 체크 아이콘이 표시됨 체크박스 뒤에는 입력의 id를 가리키는 for 속...

Read Entire Article