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에서 할 수 있음
• 풀 리퀘스트를 받고 코드 리뷰를 제공하며, 특히 오픈소스에 처음 기여하는 참여자를 환영함