# Pure CSS 디자인 시스템

## Pure CSS 디자인 시스템 인터페이스 미리보기

키트 6개를 필터링하고, 이름순으로 정렬하고, 사용 가능한 항목을 선택하세요. 필터를 바꿔도 선택 항목은 유지됩니다.

## Pure CSS 디자인 시스템 디자인 참고 자료

Pure CSS 3.1.0 컴파일 패키지 모듈. 이는 실제 선택자 값이며, 이름이 지정된 디자인 토큰 API은 아닙니다. Pure는 Chakra나 Pico처럼 의미 기반 CSS 변수 테마를 제공하지 않습니다. 애플리케이션에서 타이포그래피, 레이아웃 간격, 더 뚜렷한 포커스 윤곽선을 추가합니다.

### 공식 버튼 및 폼 값

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| .pure-button padding | 0.5em 1em | 상속된 버튼 텍스트 크기에 맞춰 크기가 조정됩니다. |
| .pure-button radius | 2px | 기본 버튼 모서리 형태. |
| .pure-button background | #E6E6E6 | 중립적인 버튼 배경색. |
| .pure-button-primary background | rgb(0, 120, 231) | 선택 사항인 기본/선택 배경색. |
| .pure-button disabled opacity | 0.40 | 동작을 위해 비활성화 속성도 사용하세요. |
| .pure-form input padding | 0.5em 0.6em | 일반 텍스트 입력의 안쪽 여백. |
| .pure-form input border | 1px solid #ccc | 기본 입력 경계선. |
| .pure-form input radius | 4px | 입력 필드의 모서리 모양은 버튼과 다릅니다. |
### 공식 표 값

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| .pure-table border | 1px solid #cbcbcb | 표 바깥쪽 경계선. |
| .pure-table td / th padding | 0.5em 1em | 읽기 편한 셀 간격. |
| .pure-table thead background | #e0e0e0 | 열 머리글 배경면. |
| .pure-table-striped odd-row fill | #f2f2f2 | 줄무늬 배경도 사용할 수 있지만, 이 예시에서는 가로 구분선을 사용합니다. |
| .pure-table-horizontal | Bottom borders only | 세로 구분선 없이 행 구조를 유지합니다. |
### 반응형 그리드 경계

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| sm | 35.5em | 브라우저 기본 글자 크기가 16px일 때 568px. |
| md | 48em | 768px에서 사이드바가 너비의 4분의 1을 차지합니다. |
| lg | 64em | 1024px. |
| xl | 80em | 1280px. |
| xxl | 120em | 설치된 3.1.0 반응형 그리드의 1920px 중단점. |
### 카탈로그에 적용한 독자적인 스타일

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| Body | 16px / 1.5 Arial, Helvetica, sans-serif | 애플리케이션에서 명시적으로 지정한 타이포그래피. |
| Page heading | 34px / 1.15; 28px on mobile | 원래 편집상 위계입니다. |
| Section heading | 18px / 1.3 | 독자적으로 구성한 사이드바와 선택 항목 제목. |
| Content gutters | 24px desktop, 16px mobile | 기존 바깥쪽 여백입니다. |
| Focus outline | 3px solid #0078e7; offset 3px | 기본 버튼의 포커스 그라데이션을 개선한 애플리케이션 스타일. |
| Table minimum width | 540px | 로컬 스크롤 영역에서도 열의 의미를 유지합니다. |
## Pure CSS 디자인 시스템 종합 가이드

실제 인터페이스를 위해 이 시스템을 선택하고 적용하고 검토하는 실용 가이드.

완전한 안내와 구현 시작점, 소스 링크.

## Pure CSS 디자인 시스템: CSS 모듈 몇 가지로 구성하기

### CSS 모듈 몇 가지로 구성하기

> Pure는 기본 정규화, 그리드, 버튼, 폼, 메뉴, 표를 제공합니다. 이 카탈로그는 패키지의 컴파일된 롤업과 별도의 반응형 그리드 파일을 사용합니다. JavaScript 프레임워크, 프로바이더 또는 위젯 런타임은 가져오지 않습니다. 필터링, 정렬, 선택 기능은 위에 전체 코드가 표시된 애플리케이션 코드로 구현합니다.

Pure를 완전한 컴포넌트 플랫폼과 비교할 때는 이 차이가 중요합니다. pure-table 클래스는 셀 스타일을 제공할 뿐, 정렬, 페이지 나누기, 가상화 또는 선택 동작의 의미를 제공하지 않습니다. pure-button은 네이티브 버튼에 적용할 수 있는 시각적 클래스입니다. 이 예시는 클래스 이름만으로 동작이 구현될 것으로 기대하지 않고, 의미에 맞는 기본 요소를 그대로 사용합니다.

지원 사양 읽기

## Pure CSS 디자인 시스템: 임의로 만든 토큰 체계가 아닌 실제 CSS 값

### 임의로 만든 토큰 체계가 아닌 실제 CSS 값

Pure의 컴파일된 버튼 스타일은 중립적인 #E6E6E6 배경색, 2px 모서리 반경, em 단위 안쪽 여백을 사용합니다. 선택 사항인 기본 버튼은 rgb(0,120,231) 배경에 흰색 텍스트를 사용합니다. 폼 입력 필드에는 4px 모서리 반경과 별도의 안쪽 여백이 적용됩니다. 이 디자인 시스템 참고 자료는 이러한 실제 차이를 보여 주며, 이를 존재하지 않는 공통 모서리 반경 단계로 통일하지 않습니다.

이 카탈로그는 어두운 청회색 텍스트, 중립적인 구분선, 옅은 선택 요약 영역으로 절제된 애플리케이션 팔레트를 구성합니다. 이 색상은 공식 Pure 브랜드 색상이 아닙니다. 이 예시는 완전한 대체 애플리케이션 팔레트를 구현하지 않으므로 다크 모드 전환 기능도 없습니다. 테마를 전환하려면 폼, 표 머리글, 테두리, 텍스트, 포커스 상태를 모두 함께 바꿔야 합니다.

지원 사양 읽기

## Pure CSS 디자인 시스템: 타이포그래피와 간격은 애플리케이션에서 정합니다

### 타이포그래피와 간격은 애플리케이션에서 정합니다

원본 페이지 레이어는 16px 크기의 Arial/Helvetica와 줄 높이 1.5를 사용하고, 제목은 34px, 섹션 제목은 18px로 설정합니다. 좁은 화면에서는 제목이 28px로 바뀝니다. 이는 Pure가 편집용 글자 크기 체계를 규정한다는 뜻이 아니라, 애플리케이션에서 명시적으로 선택한 값입니다. 이 CSS 예시에는 구성을 재현하는 데 필요한 모든 값이 포함되어 있습니다.

Pure 그리드는 인라인 단위의 표시를 처리하기 위해 그리드 컨테이너의 텍스트 렌더링과 자간을 조정합니다. 단위 규칙은 텍스트 표시를 기본 상태로 되돌립니다. 이 카탈로그에서는 사이드바와 결과 영역에서 글꼴이 예기치 않게 바뀌지 않도록 그리드 단위에도 글꼴을 지정합니다. 애플리케이션의 안쪽 여백은 테두리 상자 크기 계산을 적용한 단위 내부에 배치하므로 분수 너비가 유지됩니다.

지원 사양 읽기

## Pure CSS 디자인 시스템: 반응형 비율을 사용하려면 반응형 모듈이 필요합니다

### 반응형 비율을 사용하려면 반응형 모듈이 필요합니다

사이드바에는 pure-u-1과 pure-u-md-1-4를 함께 적용하고, 결과 영역에는 pure-u-1과 pure-u-md-3-4를 함께 적용합니다. 두 영역 모두 처음에는 전체 너비를 차지합니다. md 미디어 경계인 48em부터 각각 너비의 4분의 1과 4분의 3을 차지합니다. 별도의 JavaScript 레이아웃 계산 없이도 필터 영역에 읽기 편한 고정 비율을 적용할 수 있습니다.

기본 pure-min.css 번들에는 반응형 그리드 미디어 쿼리 클래스가 포함되어 있지 않습니다. grids-responsive-min.css를 빠뜨리면 md 수정자가 작동하지 않습니다. 설정에서는 두 파일을 모두 명시적으로 불러옵니다. 모바일 화면에서는 사이드바가 표 앞에 오고 결과 테두리가 제거되어 읽는 흐름이 하나로 이어집니다.

지원 사양 읽기

## Pure CSS 디자인 시스템에서 필터링과 선택은 별개입니다

### 필터링과 선택은 별개입니다

세로로 배치된 폼에는 레이블이 있는 검색 입력란, 카테고리 선택 메뉴, 이용 가능 여부 체크박스가 있습니다. 입력 내용이 바뀔 때마다 세 가지 조건을 모두 적용해 표시할 행을 다시 렌더링합니다. 폼 제출은 막아 두어 검색란에서 Enter를 눌러도 페이지를 벗어나지 않습니다. 필터 지우기는 기본 reset을 호출하고 브라우저가 기본값을 복원한 뒤 다시 렌더링합니다.

선택 항목은 안정적인 키트 ID를 담은 Set에 저장됩니다. 필터로 선택한 항목을 숨겨도 Set에서는 제거되지 않습니다. 따라서 항상 표시되는 검토 목록이 선택 항목을 확인하는 기준이 됩니다. 선택 개수 옆에서 이 동작을 설명하지 않으면, 사용자는 필터링으로 숨겨진 행을 선택 해제로 착각할 수 있습니다.

1. 이용 가능한 녹음기나 카메라를 선택하세요.

2. 다른 카테고리로 필터링한 뒤에도 선택한 항목이 검토 목록에 남아 있는지 확인하세요.

3. 필터와 관계없이 선택을 지우면 선택된 ID가 모두 제거됩니다.

지원 사양 읽기

## Pure CSS 디자인 시스템에서 좁은 화면에서도 표의 의미 유지하기

### 좁은 화면에서도 표의 의미를 유지하세요

표에는 caption, thead, tbody와 열 머리글을 지정하는 scope 속성이 사용됩니다. Equipment 머리글에는 이름순 정렬을 반전하는 네이티브 버튼이 있습니다. 부모 th에는 aria-sort="ascending" 또는 "descending"이 설정되어 화면에 표시되는 화살표와 일치합니다. 정렬할 때도 모든 행의 열 구조는 그대로 유지됩니다.

최소 너비 540px를 설정해 Select, Equipment, Category, Availability의 의미가 유지되도록 합니다. 화면이 좁아지면 레이블이 지정된 표 영역만 가로로 스크롤됩니다. 이 영역은 키보드로 포커스할 수 있고 포커스 윤곽선도 표시됩니다. 페이지 전체 너비는 늘어나지 않습니다. 각 행을 시각적으로 무관한 카드로 바꾸는 대신, 데이터 표에 적합한 방식을 의도적으로 적용했습니다.

지원 사양 읽기

## Pure CSS 디자인 시스템에서 비활성화, 빈 상태, 포커스 상태에 실제 동작을 적용해야 합니다

### 비활성화, 빈 상태, 포커스 상태에 실제 동작을 적용해야 합니다

대여 중인 항목은 이용 가능 여부를 설명하기 위해 목록에 남겨 두지만 선택할 수는 없습니다. 네이티브 체크박스를 비활성화하기 때문입니다. Set이 비어 있으면 선택 지우기도 비활성화됩니다. Pure의 불투명도 규칙은 비활성화된 모양을 표현하는 데 도움이 되지만, 활성화를 막는 것은 HTML 속성입니다.

필터 결과가 없으면 구체적인 빈 상태 메시지를 표시하고 머리글은 그대로 유지합니다. 결과 개수는 공손한 상태 알림 영역에 표시됩니다. 원본 스타일시트는 기본 Pure 버튼의 포커스 표시가 그라디언트이고 윤곽선이 초기화되어 있으므로, 이를 보완하기 위해 focus-visible에 뚜렷한 윤곽선을 추가합니다. 이 도구에서는 키보드 사용자를 위해 더 명확한 표시가 유용합니다.

- 비활성화된 체크박스는 행을 목록에서 제거하지 않고도 이용할 수 없는 키트를 설명합니다.

- 빈 상태에서는 필터를 지워 결과를 다시 표시하는 방법을 안내합니다.

- 버튼, 입력란, 선택 메뉴, 스크롤 영역에 포커스 윤곽선을 표시합니다.

지원 사양 읽기

## Pure CSS 디자인 시스템에서 전체 카탈로그 설치 및 재현하기

### 전체 카탈로그 설치 및 재현하기

purecss@3.1.0을 설치하고 pure-min.css와 grids-responsive-min.css를 로컬 assets 디렉터리에 복사한 다음, style.css보다 먼저 순서대로 불러오세요. 전체 본문, 애플리케이션 스크립트, CSS는 위에 제공되어 있습니다. 생성된 파일은 정적 서버에서 제공하면 되며, 카탈로그 자체에는 빌드 런타임이 필요하지 않습니다.

번들 크기를 줄여야 한다면 패키지 모듈을 개별적으로 사용할 수도 있습니다. CSS를 줄일 때는 기본 스타일과 그리드 의존성이 서로 맞도록 유지하세요. 표 스타일시트만 복사한 뒤 폼이나 버튼 클래스에도 스타일이 적용될 것이라고 가정하지 마세요. 현재 예제는 설명 없이 일부만 번들링하는 방식보다 전체 설정을 재현할 수 있도록 구성했습니다.

지원 사양 읽기

## Pure CSS 디자인 시스템에서 의존성을 유지하며 CSS 모듈 선택하기

### 의존성을 빠뜨리지 않고 CSS 모듈 선택하기

컴파일된 번들에는 카탈로그의 버튼, 폼, 표 스타일이 포함되고, grids-responsive-min.css는 중단점에 따라 적용되는 분수형 그리드 클래스를 제공합니다. 반응형 파일을 제거해도 오류는 발생하지 않지만 md 클래스의 레이아웃 변경 기능이 사라집니다. 불러오는 모듈을 줄일 때는 화면 폭을 좁혀 열 동작이 적절한지 확인하세요.

그리드 단위에는 인라인 레이아웃에 맞게 그리드 컨테이너가 조정하는 텍스트 동작도 적용됩니다. 단위 요소에 애플리케이션 글꼴을 지정하고, border-box 크기 계산을 적용해 요소 내부에 패딩을 추가하세요. 이후 카탈로그에 페이지네이션이 추가되면 애플리케이션 상태에서 안정적인 ID를 기준으로 선택 상태를 유지하세요. 표의 CSS나 그리드 분수 클래스는 이 동작을 구현하지 않습니다.

지원 사양 읽기

## Pure CSS 디자인 시스템 구성 요소 예제

### Pure 모듈을 사용한 카탈로그 마크업

반응형 1/4·3/4 레이아웃, 세로로 쌓이는 폼, 가로 구분선이 있는 표.

```
<main class="catalog"><header><p class="eyebrow">PURE CSS / LENDING DESK</p><h1>A small equipment catalog.</h1><p>Find a kit, select available items, and review the local selection.</p></header><div class="pure-g"><aside class="pure-u-1 pure-u-md-1-4"><div class="sidebar"><h2>Refine the list</h2><form class="pure-form pure-form-stacked" id="filters"><label for="query">Equipment name</label><input id="query" type="search" placeholder="Camera, recorder…"><label for="kind">Category</label><select id="kind"><option value="all">All categories</option><option>Camera</option><option>Audio</option><option>Lighting</option></select><label class="pure-checkbox"><input id="available" type="checkbox"> Available only</label><button class="pure-button" type="reset">Clear filters</button></form><div class="selection"><strong id="selected-count">0 items selected</strong><p>Selection is kept when a filter hides a row.</p><button id="clear-selection" class="pure-button" disabled>Clear selection</button></div></div></aside><section class="pure-u-1 pure-u-md-3-4"><div class="results"><p id="count" role="status"></p><div class="table-scroll" tabindex="0" role="region" aria-label="Equipment table, scroll horizontally on narrow screens"><table class="pure-table pure-table-horizontal"><caption>Studio lending kits — local sample records</caption><thead><tr><th scope="col">Select</th><th scope="col" aria-sort="ascending"><button id="sort" class="sort">Equipment ↑</button></th><th scope="col">Category</th><th scope="col">Availability</th></tr></thead><tbody id="rows"></tbody></table></div><p id="empty" hidden>No matching equipment. Clear the filters to see all six kits.</p><section class="summary" aria-labelledby="selection-title"><h2 id="selection-title">Selected for review</h2><ul id="selection-list"><li>No equipment selected.</li></ul><p>This is a browsing example. Selecting a kit does not reserve it.</p></section></div></section></div></main>
```

코드 참조

- grids-responsive-min.css는 별도로 불러옵니다.

- 대여 중인 항목의 체크박스는 흐리게 표시하는 데 그치지 않고 비활성화합니다.

### 필터링, 정렬, 선택 상태

원래 동작에서는 고정된 샘플 레코드 6개를 렌더링하고 안정적인 ID로 선택 상태를 유지합니다.

```
const data=[{id:'c1',name:'Compact camera kit',kind:'Camera',available:true},{id:'c2',name:'Cinema camera kit',kind:'Camera',available:false},{id:'a1',name:'Field recorder',kind:'Audio',available:true},{id:'a2',name:'Wireless microphone pair',kind:'Audio',available:true},{id:'l1',name:'Portable LED panel',kind:'Lighting',available:false},{id:'l2',name:'Softbox lighting kit',kind:'Lighting',available:true}];const selected=new Set();let ascending=true;const $=id=>document.getElementById(id);
function selection(){ $('selected-count').textContent=selected.size+(selected.size===1?' item selected':' items selected');$('clear-selection').disabled=!selected.size;const list=$('selection-list');list.replaceChildren();for(const x of data.filter(x=>selected.has(x.id))){const li=document.createElement('li');li.textContent=x.name;list.append(li);}if(!selected.size){const li=document.createElement('li');li.textContent='No equipment selected.';list.append(li);}}
function render(){const query=$('query').value.toLowerCase().trim();const visible=data.filter(x=>x.name.toLowerCase().includes(query)&&($('kind').value==='all'||x.kind===$('kind').value)&&(!$('available').checked||x.available)).sort((a,b)=>(ascending?1:-1)*a.name.localeCompare(b.name));$('count').textContent=visible.length+' of '+data.length+' kits shown';$('empty').hidden=visible.length!==0;$('rows').replaceChildren();for(const x of visible){const tr=document.createElement('tr');const choice=document.createElement('td');const input=document.createElement('input');input.type='checkbox';input.disabled=!x.available;input.checked=selected.has(x.id);input.setAttribute('aria-label','Select '+x.name);input.addEventListener('change',()=>{input.checked?selected.add(x.id):selected.delete(x.id);selection()});choice.append(input);tr.append(choice);for(const value of [x.name,x.kind,x.available?'Available':'On loan']){const td=document.createElement('td');td.textContent=value;tr.append(td);}$('rows').append(tr);}selection();}
$('filters').addEventListener('input',render);$('filters').addEventListener('submit',e=>e.preventDefault());$('filters').addEventListener('reset',()=>setTimeout(render,0));$('sort').addEventListener('click',()=>{ascending=!ascending;$('sort').textContent='Equipment '+(ascending?'↑':'↓');$('sort').parentElement.setAttribute('aria-sort',ascending?'ascending':'descending');render()});$('clear-selection').addEventListener('click',()=>{selected.clear();render()});render();
```

코드 참조

- 필터링해도 선택된 ID가 묵시적으로 삭제되지 않습니다.

- 사용자가 입력한 검색어가 HTML가 되지 않습니다.

### 애플리케이션 타이포그래피 및 포커스 CSS

의도적으로 최소한의 스타일만 제공하는 라이브러리를 보완하는 완전한 시각적 스타일 계층입니다.

```
*{box-sizing:border-box}body{font:16px/1.5 Arial,Helvetica,sans-serif;color:#263238;background:#fff}.catalog{max-width:1120px;margin:auto;padding:32px 24px}h1{font-size:34px;line-height:1.15;letter-spacing:-.03em;margin:12px 0}h2{font-size:18px;line-height:1.3}.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:700;color:#435c68}header{border-bottom:3px solid #263238;padding-bottom:24px;margin-bottom:24px}.pure-g [class*=pure-u]{font-family:Arial,Helvetica,sans-serif}.sidebar{padding-right:24px}.results{padding-left:24px;border-left:1px solid #d7dfe3}.pure-form input[type=search],.pure-form select{width:100%;max-width:100%}.pure-form label{margin-top:16px}.selection{border-top:1px solid #d7dfe3;margin-top:28px;padding-top:20px;font-size:14px}.table-scroll{overflow:auto}table{width:100%;min-width:540px}.pure-table caption{text-align:left;font-style:normal;color:#52616a}.sort{border:0;background:none;padding:0;color:inherit;text-align:left;font-weight:700;cursor:pointer}.summary{padding:16px 20px;background:#f3f6f7;margin-top:24px}.summary p{font-size:14px;color:#52616a}.pure-button:focus-visible,.sort:focus-visible,.table-scroll:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #0078e7;outline-offset:3px}#empty{padding:20px;border:1px dashed #83919a}@media(max-width:767px){.catalog{padding:24px 16px}h1{font-size:28px}.sidebar{padding:0}.results{padding:24px 0 0;border-left:0}.selection{margin-bottom:24px}}
```

코드 참조

- 이 값은 공식 Pure 토큰이 아니라 애플리케이션에서 자체적으로 선택한 값입니다.

## Pure CSS 디자인 시스템 에이전트 설정

### 구현 시작점

CSS와 JavaScript 예제를 style.css와 app.js로 저장하세요. 반응형 그리드 미디어 클래스는 별도 파일에 있습니다. 오프라인 미리보기에는 공식 스타일시트 두 개와 원본 애플리케이션 코드가 모두 인라인으로 포함됩니다. HTML 래퍼에는 전체 본문 마크업이 들어 있습니다. 제공된 상호작용 및 CSS 예제는 여기에서 참조하는 파일 이름으로 저장하세요.

```
<!-- npm install purecss@3.1.0
mkdir -p assets
cp node_modules/purecss/build/pure-min.css assets/
cp node_modules/purecss/build/grids-responsive-min.css assets/ -->
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Equipment catalog</title>
<link rel="stylesheet" href="assets/pure-min.css">
<link rel="stylesheet" href="assets/grids-responsive-min.css">
<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script></head>
<body><main class="catalog"><header><p class="eyebrow">PURE CSS / LENDING DESK</p><h1>A small equipment catalog.</h1><p>Find a kit, select available items, and review the local selection.</p></header><div class="pure-g"><aside class="pure-u-1 pure-u-md-1-4"><div class="sidebar"><h2>Refine the list</h2><form class="pure-form pure-form-stacked" id="filters"><label for="query">Equipment name</label><input id="query" type="search" placeholder="Camera, recorder…"><label for="kind">Category</label><select id="kind"><option value="all">All categories</option><option>Camera</option><option>Audio</option><option>Lighting</option></select><label class="pure-checkbox"><input id="available" type="checkbox"> Available only</label><button class="pure-button" type="reset">Clear filters</button></form><div class="selection"><strong id="selected-count">0 items selected</strong><p>Selection is kept when a filter hides a row.</p><button id="clear-selection" class="pure-button" disabled>Clear selection</button></div></div></aside><section class="pure-u-1 pure-u-md-3-4"><div class="results"><p id="count" role="status"></p><div class="table-scroll" tabindex="0" role="region" aria-label="Equipment table, scroll horizontally on narrow screens"><table class="pure-table pure-table-horizontal"><caption>Studio lending kits — local sample records</caption><thead><tr><th scope="col">Select</th><th scope="col" aria-sort="ascending"><button id="sort" class="sort">Equipment ↑</button></th><th scope="col">Category</th><th scope="col">Availability</th></tr></thead><tbody id="rows"></tbody></table></div><p id="empty" hidden>No matching equipment. Clear the filters to see all six kits.</p><section class="summary" aria-labelledby="selection-title"><h2 id="selection-title">Selected for review</h2><ul id="selection-list"><li>No equipment selected.</li></ul><p>This is a browsing example. Selecting a kit does not reserve it.</p></section></div></section></div></main>
</body></html>
```

### 프로젝트를 위한 프롬프트

```
제공된 Pure CSS 3.1.0 장비 카탈로그를 기반으로 구현하고 pure-min.css와 grids-responsive-min.css를 모두 불러옵니다. 반응형 그리드의 1/4·3/4 단위, 레이블이 있는 필터, 의미 구조를 갖춘 정렬 가능한 표와 표 안에 포함된 가로 스크롤 영역을 유지합니다. 검색, 카테고리 및 대여 가능 여부 필터를 조합해도 선택된 ID는 지우지 않습니다. 대여 중 체크박스는 비활성화하고, 장비 열의 정렬 순서를 바꿀 때 aria-sort를 업데이트하며, 필터로 숨겨진 항목도 검토 목록에 계속 표시합니다. 선택은 로컬에서만 이루어지며 예약으로 처리되지 않습니다.
```

## Pure CSS 디자인 시스템 출처 및 범위

Pure CSS 3.1.0. 선택기 값은 공식 패키지 값이며, 카탈로그의 타이포그래피, 색상, 간격 및 애플리케이션 동작은 독자적으로 구성했습니다. 예약은 이루어지지 않습니다.

- 공식 저장소 모듈 경계, 빌드 파일, 반응형 그리드 포함 여부 및 라이선스

- 그리드 구현 그리드 컨테이너와 단위 텍스트 처리

- 패키지 소스 설치된 3.1.0 모듈을 확인하는 데 사용한 선택기 수준의 소스

## Pure CSS 디자인 시스템 관련 리소스

### Quasar

실제 브랜드 및 간격 값을 적용한 네이티브 Quasar 안내 워크플로입니다. QForm 유효성 검사, 3단계 브리프 작성기, 라디오 형식 선택, 실시간 45분 일정이 포함됩니다.

### React Native Elements

React Native Elements 5.0.0으로 완성도 높은 집중 계획 작성기를 만들어 보세요. 실제 테마 역할, 제어 가능한 입력과 선택 항목, 유효성 검사, 로컬 확인 기능을 구현하고 웹 빌드까지 테스트합니다.

### React Suite

기본 React Suite 검토 캘린더입니다. 검증된 v6 CSS 변수, 날짜 셀 표시, 선택한 날짜의 일정, 모달 유효성 검사 및 명시적인 로컬 일정 관리 규칙을 포함합니다.


- [구현 레퍼런스](https://github.com/pure-css/pure)
- [출처](https://github.com/pure-css/pure)
- [지원 사양 읽기](https://github.com/pure-css/pure)
- [코드 참조](https://github.com/pure-css/pure)
- [공식 저장소 모듈 경계, 빌드 파일, 반응형 그리드 포함 여부 및 라이선스](https://github.com/pure-css/pure)
- [그리드 구현 그리드 컨테이너와 단위 텍스트 처리](https://github.com/pure-css/pure/blob/main/src/grids/css/grids-core.css)
- [패키지 소스 설치된 3.1.0 모듈을 확인하는 데 사용한 선택기 수준의 소스](https://github.com/pure-css/pure/tree/main/src)