readable.css

• readable.css는 사이트 전체 디자인 시스템이 아니라, 시맨틱 HTML에 합리적이고 보기 좋은 기본 스타일을 더하는 CSS 프레임워크임
• 핵심 원칙은 일관성이며 색상, 글꼴 스타일, 테두리 두께, 줄 높이가 사이트 전반에 맞춰 적용됨
• 라이트/다크 모드, 반응형 디자인, 세로 리듬, 헤더·푸터·내비게이션·테이블·버튼·폼 스타일을 제공함
• 화려한 애니메이션, 커스텀 글꼴, 유틸리티 클래스, 사용자 브라우저 설정을 덮어쓰는 요소는 포함하지 않음
• 시맨틱 HTML을 전제로 의도를 해석하며 Firefox 84+, Chromium 88+, Edge 88+, Safari 10+를 지원하고 IE는 제외됨

주요 기능과 설계 범위

• readable.css는 사이트 전체 디자인 시스템을 만드는 프레임워크가 아니라, 기본 HTML을 합리적이고 보기 좋게 만드는 CSS 프레임워크임
• 라이트/다크 모드를 수동 또는 prefers-color-scheme으로 지원하고, 반응형 디자인과 세로 리듬을 제공함
• 헤더, 푸터, 내비게이션 바, 이미지, 인용문, aside, 테이블, 버튼, 폼을 스타일링함
• 텍스트 양쪽 정렬은 기본 비활성화 상태이며, serif, sans-serif, monospace 같은 네이티브 글꼴을 지원함
• 화려한 애니메이션, 커스텀 글꼴, 유틸리티 클래스, 사용자 브라우저 설정을 덮어쓰는 요소는 의도적으로 제외함

사용법과 지원 범위

• 최신 CSS 파일은 릴리스 페이지에서 다운로드해 사이트에 추가함 <link rel="stylesheet" type="text/css" href="/path/to/readable.css">
• readable.css는 시맨틱 HTML 사용 방식에 따라 사이트 의도를 해석하므로, 스타일시트를 제대로 활용하려면 시맨틱 HTML을 올바르게 써야 함
• 사용 가이드와 readable.css에 맞는 HTML 작성법은 위키에서 확인 가능함
• Firefox 84+, Chromium 88+, Edge 88+, Safari 10+를 지원하며, IE는 지원하지 않음
• Chromium, Firefox, Edge의 제한 요인은 :not()과 :is() 지원이고, Safari의 제한 요인은 CSS 변수 지원임
• 소스 코드는 Codeberg에 있으며, 문서는 Docs에서 제공됨
• readable.css와 사이트 코드는 0BSD 라이선스이며, 필수 저작자 표시 없이 원하는 용도로 사용할 수 있음
• Freedom to Write는 글쓰기 산업을 위한 자유·오픈소스 소프트웨어 솔루션을 만들고 지원하는 운동임