# 98.css – 오래된 사용자 인터페이스를 충실하게 재현하는 디자인 시스템

> Clean Markdown view of GeekNews topic #17628. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=17628](https://news.hada.io/topic?id=17628)
- GeekNews Markdown: [https://news.hada.io/topic/17628.md](https://news.hada.io/topic/17628.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2024-11-07T10:01:15+09:00
- Updated: 2024-11-07T10:01:15+09:00
- Original source: [jdan.github.io](https://jdan.github.io/98.css/)
- Points: 3
- Comments: 1

## Topic Body

- **Intro**
  - 98.css는 Windows 98 스타일의 인터페이스를 구축하기 위한 CSS 라이브러리임.
  - 이 라이브러리는 접근성을 주요 목표로 하며, HTML의 시맨틱 사용을 권장함.
  - JavaScript 없이 HTML을 스타일링하며, 다양한 프론트엔드 프레임워크와 호환 가능함.

- **Components**
  - **Button**
    - 명령 버튼은 사용자가 클릭할 때 애플리케이션이 특정 작업을 수행하게 하는 컨트롤임.
    - 기본적으로 75px 너비와 23px 높이를 가지며, 클릭 시 테두리가 눌린 상태로 변함.
  - **Checkbox**
    - 체크박스는 독립적이거나 비독점적인 선택을 나타냄.
    - 체크박스와 라벨을 함께 사용하여 접근성을 높임.
  - **OptionButton**
    - 옵션 버튼은 제한된 선택지 중 하나를 선택할 수 있는 라디오 버튼임.
    - 같은 그룹의 옵션 버튼은 동일한 name 속성을 공유하여 그룹화함.
  - **GroupBox**
    - 그룹 박스는 컨트롤 세트를 조직화하는 데 사용되는 사각형 프레임임.
    - fieldset 태그를 사용하여 구현하며, 레이블을 추가할 수 있음.
  - **TextBox**
    - 텍스트 박스는 사용자가 텍스트를 입력하거나 편집할 수 있는 직사각형 컨트롤임.
    - 여러 줄을 지원하려면 textarea 요소를 사용함.
  - **Slider**
    - 슬라이더는 조정 범위를 정의하는 막대와 현재 값을 나타내는 표시기로 구성됨.
    - 수직 슬라이더를 만들려면 is-vertical 클래스를 사용함.
  - **Dropdown**
    - 드롭다운 리스트 박스는 목록에서 단일 항목을 선택할 수 있게 함.
    - select와 option 요소를 사용하여 구현함.

- **Window**
  - **Title Bar**
    - 제목 바는 창의 상단 가장자리에 위치하며, 창의 내용을 식별함.
    - title-bar, title-bar-text, title-bar-controls 클래스를 사용하여 구현함.
  - **Window contents**
    - 창의 경계를 정의하는 window 클래스를 사용하여 창을 구성함.
    - window-body 클래스를 사용하여 창의 내용을 그림.
  - **Status Bar**
    - 상태 바는 창의 하단에 위치하여 현재 상태나 기타 정보를 표시함.
    - status-bar 클래스를 사용하여 구현함.
  - **TreeView**
    - 트리 뷰 컨트롤은 객체를 계층적 관계에 따라 들여쓰기된 개요로 표시함.
    - ul 요소와 tree-view 클래스를 사용하여 구현함.
  - **Tabs**
    - 탭 컨트롤은 파일 캐비닛이나 노트북의 구분자와 유사함.
    - menu 요소와 [role=tablist] 속성을 사용하여 구현함.
  - **TableView**
    - 테이블 뷰는 table 요소를 사용하여 렌더링함.
    - sunken-panel 클래스로 테두리와 오버플로우 컨테이너를 제공함.

- **Issues, Contributing, etc.**
  - 98.css는 MIT 라이선스를 따름.
  - GitHub 이슈 페이지에서 버그를 보고하거나 새로운 버그를 제보할 수 있음.
  - 오픈 소스에 대한 기여를 환영하며, 코드 리뷰를 제공함.

## Comments



### Comment 30946

- Author: neo
- Created: 2024-11-07T10:01:15+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=42056918) 
- 한 사용자는 다양한 운영체제의 기본 색상 테마를 포함한 프로젝트를 만들었으며, 현대 시스템에서도 잘 작동하고 미적으로 보이도록 SVG로 아이콘과 심볼을 재창조했음
  - 프로젝트를 Show HN에 게시했으나 큰 주목을 받지 못했음
  - 프로젝트 제목이 매력적이지 않을 수 있다고 생각함

- 다른 사용자는 이 프로젝트가 번아웃 회복 프로젝트였으며, 최근 이에 대한 생각을 기록했음

- 여러 운영체제와 관련된 CSS 스타일을 수집한 사용자가 있음
  - The Sims, Windows 98, Windows XP, Windows 7, Edward Tufte 스타일을 포함함

- 98.css는 Hacker News에서 클래식으로 여겨지며, 여러 차례 논의된 바 있음
  - HyperCard Simulator와 Decker도 참고할 만함

- 비원본 DPI 설정에서는 스타일이 잘 작동하지 않을 수 있으며, 브라우저 콘솔에서 특정 코드를 실행하여 물리적 픽셀에 맞출 수 있음

- 한 사용자는 Windows 95와 Windows 98에서 MS Sans Serif가 아닌 것 같다고 언급함

- 또 다른 사용자는 botoxparty.github.io/XP.css와 khang-nd.github.io/7.css를 확인할 가치가 있다고 말함

- 90년대 후반 Microsoft는 Windows 데스크탑 테마와 색상에 맞춘 CSS 색상을 제공했으며, 이를 통해 웹 UI를 사용자의 데스크탑과 일치시킬 수 있었음

- 한 사용자는 현재의 UX/UI 연구와 개선보다 과거의 스타일이 더 낫다고 주장함
  - 버튼, 탭, 텍스트 필드가 명확하게 보이는 것을 선호함

- Obsidian 테마를 98.css 소스를 사용하여 만들었으나 현재는 중단된 상태임