- 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을 꾸미므로 특정 프런트엔드 프레임워크에 종속되지 않음
- 가장 빠른 사용법은 unpkg에서 스타일시트를 불러오는 것임
<link rel="stylesheet" href="https://unpkg.com/98.css">;
npm install 98.css
- 기본 외형을 유지하면서 버튼 여백이나 입력 레이블 색상 같은 개별 스타일을 자유롭게 재정의할 수 있음
기본 선택 컨트롤
-
버튼
- 표준 버튼은 75×23px 크기이며 돌출된 외부·내부 테두리와 기본 12px 수평 여백을 가짐
<button>, input[type=submit], input[type=reset]을 지원함default 클래스는 활성 창에서 Enter 키를 눌렀을 때 실행할 기본 동작을 나타냄- 클릭하면 돌출된 테두리가 들어간 형태로 바뀌며, 비활성 버튼은 테두리를 유지한 채 레이블이 흐려짐
- 포커스는 버튼 콘텐츠 안쪽 4px 위치의 점선 테두리로 표시됨
-
체크박스와 라디오 버튼
- 체크박스는 독립적이거나 비배타적인 선택을 나타내며, 선택되면 들어간 패널 안에 체크 아이콘이 표시됨
- 체크박스 뒤에는 입력의
id를 가리키는 for 속성을 가진 <label>이 반드시 필요함
- 이 연결을 통해 보조 기술이 입력을 인식할 수 있음
- Tab 키 탐색과 레이블 전체 클릭을 지원함
- 표준
checked, disabled 속성으로 선택 및 비활성 상태를 지정함
- 여러 입력은
field-row 컨테이너로 감싸 일관된 간격을 적용함
- 라디오 버튼은 제한된 집합에서 하나만 선택하는 컨트롤이며
input[type=radio]로 생성함
- 같은
name 속성을 지정해 상호 배타적 그룹으로 묶고, 체크박스와 마찬가지로 레이블 및 field-row를 사용함
-
그룹 상자
fieldset은 여러 컨트롤을 직사각형 프레임으로 묶고, 들어간 외부 테두리와 돌출된 내부 테두리로 새겨진 상자 같은 모습을 만듦- 내부에
legend를 배치하면 그룹 레이블을 표시할 수 있음
텍스트 입력과 값 선택
-
텍스트 상자
- 한 줄 입력은
input[type=text], 여러 줄 입력은 textarea 로 구성함
- 입력과 올바르게 연결된 레이블을
field-row로 함께 감싸 가로 배치함
field-row-stacked를 사용하면 레이블을 입력 요소 위에 세로로 배치할 수 있음- 표준 HTML의
disabled, value 속성으로 비활성 상태와 초기값을 지정함
-
슬라이더
- 슬라이더는 조정 범위와 현재 값을 나타내며
input[type=range]로 렌더링함
has-box-indicator 클래스는 기본 표시기를 상자형 표시기로 교체함- 슬라이더를
is-vertical 클래스가 적용된 div로 감싸면 세로 방향으로 표시할 수 있음
- 세로 슬라이더 길이는
input의 너비와 컨테이너 div의 높이로 조정함
-
드롭다운
select와 option으로 목록에서 하나의 항목을 선택하는 드롭다운을 만듦- 첫 번째 항목이 기본 선택되며, 다른
option에 selected 속성을 지정해 초기 선택을 바꿀 수 있음
Windows 98 스타일 창
-
제목 표시줄
- 제목 표시줄은 창 상단 전체 너비에 배치돼 내용을 식별하고 일반적인 창 명령 버튼을 포함함
title-bar, title-bar-text, title-bar-controls 세 클래스로 구성함- 명령 버튼의
aria-label에는 Minimize, Maximize, Restore, Help, Close를 사용할 수 있음
aria-label은 버튼의 의도를 보조 기술에 전달하면서 명령에 맞는 아이콘 스타일도 적용함- 별도의
minimize, maximize, restore, help, close 클래스도 제공함
aria-label 텍스트와 시각적 스타일을 분리해 다국어·현지화 과정에서 렌더링이나 접근성 문제가 생기지 않도록 함- 최대화할 수 없는 창은 Maximize 버튼에
disabled를 지정함
title-bar inactive로 여러 창 가운데 비활성 상태인 제목 표시줄을 표현함
-
창 본문과 상태 표시줄
window 클래스는 돌출된 외부·내부 테두리와 여백을 제공하며, 컨테이너 너비를 지정해 창 크기를 바꿀 수 있음- 제목 표시줄 아래의 실제 콘텐츠는
window-body 에 배치함
- 창 아래쪽 상태 표시줄은 현재 상태나 키보드 상태 같은 문맥 정보를 보여줌
- 전체 컨테이너에는
status-bar, 각 텍스트 영역에는 status-bar-field를 사용함
- 상태 표시줄을 활용해 Task Manager, Notepad, File Explorer 같은 인터페이스를 구성할 수 있음
계층·탭·표 인터페이스
-
트리 뷰
ul.tree-view는 객체 간 논리적 계층을 들여쓰기된 목록으로 표현함- 하위
ul을 중첩하면 점선 테두리와 들여쓰기가 적용되며, 내부 li에는 원하는 콘텐츠를 넣을 수 있음
- 펼치고 접을 수 있는 계층은 자식 목록을
details 요소 안에 배치해 구성함
-
탭
- 탭 목록은
menu[role=tablist], 각 탭은 li[role=tab]로 작성함
- 활성 탭에는
aria-selected="true"를 지정함
- 98.css에는 탭 전환 로직이 없으므로 상태 변경은 사용자 JavaScript로 관리해야 함
- 탭 콘텐츠는
role="tabpanel"이 지정된 창 영역에 배치함
menu에 multirows 클래스를 추가하면 여러 행의 탭을 만들 수 있음
-
표 뷰
- HTML
table을 div.sunken-panel로 감싸 적절한 테두리와 스크롤 가능한 영역을 만듦
table.interactive는 본문 행 위에 마우스를 올렸을 때 포인터 커서를 표시함- 선택된 행에는
highlighted 클래스를 적용하며, 실제 행 선택 동작은 별도 스크립트로 구현함
진행 상태와 범용 테두리
-
진행 표시줄
- 긴 작업의 완료 비율은
progress-indicator 안에 progress-indicator-bar를 배치하고 너비로 지정함
- 기본 형태는 단색 막대이며,
segmented 클래스를 추가하면 분할형 진행 표시줄로 바뀜
-
필드 테두리
- 텍스트 상자, 체크박스, 드롭다운, 스핀 상자, 목록 상자는 들어간 외부·내부 테두리의 필드 스타일을 사용함
- 일반 필드는 내부에 버튼 강조 색상을 사용하고, 읽기 전용 또는 비활성 텍스트 필드는 버튼 표면 색상을 사용함
- 상태 필드에는 들어간 외부 테두리만 적용하며, 상태 표시줄이나 동적으로 바뀌는 읽기 전용 콘텐츠에 활용함
- 폼 이외의 작업 영역과 동적 콘텐츠에도 사용할 수 있도록 세 가지 범용 클래스를 제공함
field-border: 일반 작업 영역field-border-disabled: 비활성 작업 영역status-field-border: 동적 상태 콘텐츠
- 이 클래스들은 테두리, 배경색, 최소 여백만 정의하므로 보통 추가
padding 을 직접 지정해야 함
라이선스와 기여
- 98.css는 MIT 라이선스로 배포됨
- 버그 확인과 신고는 GitHub Issues에서 할 수 있음
- 풀 리퀘스트를 받고 코드 리뷰를 제공하며, 특히 오픈소스에 처음 기여하는 참여자를 환영함