# Pico CSS 디자인 시스템

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

줄 길이와 샘플 크기를 변경하고, 화면 모드를 전환하고, 네이티브 대화상자에서 로컬 프로필을 확인하세요.

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

Pico CSS 2.1.1 기본 컴파일 스타일시트. 첫 번째 색상 정의는 라이트 테마에 해당합니다. 반응형 루트 글꼴 크기에 따라 rem의 픽셀 값이 달라지므로, 모든 뷰포트의 루트 크기가 16px이라고 가정하지 마세요. 읽기 너비와 800px 구성 전환점은 애플리케이션에서 정한 값입니다.

### 타이포그래피와 리듬

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --pico-font-family | var(--pico-font-family-sans-serif) | 시스템 산세리프 계열 별칭. |
| --pico-line-height | 1.5 | 본문의 기본 행간. |
| --pico-font-size | 100% | 반응형 미디어 규칙 적용 전 초기 루트 크기. |
| --pico-spacing | 1rem | 기본 간격 단위. |
| --pico-typography-spacing-vertical | 1rem | 세로 방향 텍스트 리듬. |
| --pico-grid-column-gap | var(--pico-spacing) | 네이티브 .grid 열 사이의 간격. |
| --pico-border-radius | 0.25rem | 기본 컨트롤/카드 모양. |
| --pico-border-width | 0.0625rem | 기본 경계선 두께입니다. |
| --pico-outline-width | 0.125rem | 포커스 외곽선 두께. |
| --pico-form-element-spacing-vertical | 0.75rem | 입력 요소/버튼의 세로 패딩. |
| --pico-form-element-spacing-horizontal | 1rem | 입력 요소/버튼의 가로 패딩. |
### 라이트 테마의 기본 역할

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --pico-primary | #0172ad | 링크/본문의 기본 색상. |
| --pico-primary-background | #0172ad | 기본 버튼 배경. |
| --pico-primary-hover | #015887 | 호버 상태의 기본 텍스트 색상. |
| --pico-primary-hover-background | #02659a | 호버 상태의 기본 버튼 표면 색상. |
| --pico-primary-focus | rgba(2, 154, 232, 0.5) | 포커스 강조 색상. |
| --pico-primary-inverse | #fff | 기본 배경 위의 텍스트 색상. |
| --pico-background-color | #fff | 페이지 표면. |
| --pico-color | #373c44 | 기본 본문 텍스트. |
| --pico-muted-color | #646b79 | 보조 텍스트입니다. |
### 반응형 루트 크기

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| Base | 100% | 브라우저 기본값이 16px인 경우 16px. |
| ≥576px | 106.25% | 같은 조건에서 17px. |
| ≥768px | 112.5% | 18px. |
| ≥1024px | 118.75% | 19px. |
| ≥1280px | 125% | 20px. |
| ≥1536px | 131.25% | 21px. |
### 제목 크기와 애플리케이션 컨트롤

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| h1 | 2rem / 1.125 | 공식 제목 크기와 행간. |
| h2 | 1.75rem / 1.15 | 공식 두 번째 수준 제목. |
| h3 | 1.5rem / 1.175 | 공식 세 번째 수준 제목. |
| Reading measure | 48ch / 62ch / 72ch | 원래 제공되는 줄 길이 선택 범위. |
| Sample scale | 90–125%; step 5 | 원래 범위 제한. 샘플 텍스트에만 적용됩니다. |
| Composition breakpoint | 800px | 원래의 2열에서 세로 쌓기 전환 규칙. |
## Pico CSS 디자인 시스템 전체 가이드

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

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

## Pico CSS 디자인 시스템: 작고 시맨틱한 HTML 표면

### 작고 시맨틱한 HTML 표면

> Pico는 모든 문단, 필드, 버튼에 긴 컴포넌트 클래스 목록을 지정하는 대신 익숙한 HTML 요소에 스타일을 적용합니다. 이 예제에서는 article이 설정 카드 역할을 하고, 헤더와 푸터가 경계를 만들며, label 안에 네이티브 input/select 컨트롤을 배치합니다. 표준 Pico 빌드를 사용하므로 main 요소에는 별도의 클래스 없는 배포판이 아닌 container를 사용합니다.

따라서 브라우저의 네이티브 컨트롤만으로 충분한 간결한 도구와 콘텐츠 중심 인터페이스에 Pico가 적합합니다. 그렇다고 폼만으로 애플리케이션이 완성되는 것은 아닙니다. 완전한 JavaScript가 읽기 샘플, 검토 화면, 로컬 결과를 관리하고, 브라우저는 기본 입력 시맨틱을 처리합니다.

지원 사양 읽기

## Pico CSS Pico 디자인 시스템 테마 변수와 시맨틱 역할

### 테마 변수와 시맨틱 역할

기본 primary 역할은 아무 곳에나 무분별하게 적용하는 단일 색상이 아닙니다. Pico는 기본 텍스트, 배경, 호버, 포커스, 반전 값을 각각 분리합니다. 참고 표에는 실제 라이트 모드 정의가 나와 있으므로 브랜드에 맞게 사용자 지정할 때도 각 값의 관계를 유지할 수 있습니다. 열람실 라벨은 기본 텍스트 역할을 사용하고, 버튼에는 Pico의 전체 컴포넌트 스타일이 적용됩니다.

모양 전환 컨트롤은 html에 data-theme을 설정합니다. light 또는 dark 속성을 명시하면 자동 색상 모드 선택보다 우선 적용됩니다. 속성을 제거하면 Pico가 브라우저에서 선호하는 색상 모드를 따를 수 있습니다. 예시에서는 체크박스와 화면 모양이 동기화되도록 시작 모드를 명시합니다. 기본 색상 팔레트를 사용자 지정할 때는 두 색상 모드 정의를 모두 재정의하세요. 라이트 루트 값만 변경해서는 다크 테마가 완성되지 않습니다.

지원 사양 읽기

## Pico CSS Pico 디자인 시스템의 반응형 타이포그래피가 전체 크기 체계를 바꾸는 방식

### 반응형 타이포그래피는 전체 척도를 바꿉니다

Pico는 뷰포트 너비에 따라 루트 글꼴 크기를 여러 단계로 조정합니다. 기본값은 100%이며, 이후 106.25%, 112.5%, 118.75%, 125%, 131.25%로 바뀝니다. 브라우저 기본값이 16px이면 각각 16~21px에 해당합니다. 컴포넌트 간격에 rem을 사용하므로 텍스트와 함께 편안한 레이아웃도 확장됩니다. 따라서 1rem으로 설명된 토큰이 항상 16px인 것은 아닙니다.

예시의 슬라이더는 #sample의 글꼴 크기만 상속된 크기의 백분율로 변경합니다. Pico의 루트 변수나 브라우저 확대 설정은 바꾸지 않습니다. 이 구분 덕분에 설정 컨트롤의 크기는 그대로 유지되고, 변경 범위도 명확합니다. 선택한 백분율은 기본 출력 요소에 표시됩니다. 제목 크기는 Pico 기본값을 유지합니다. h1은 2rem, h2는 1.75rem입니다.

지원 사양 읽기

## Pico CSS Pico 디자인 시스템의 줄 길이와 읽기 레이아웃

### 줄 길이와 읽기 레이아웃

세 가지 줄 길이는 ch 단위로 지정한 사용자 정의 값입니다. 텍스트가 열 너비를 넘도록 강제하지 않고 최대 너비를 설정합니다. 모바일에서는 예시가 선택한 최대 너비보다 좁을 수 있으며, 반응형 최대 너비에서는 예상되는 동작입니다. 넓은 너비를 선택하더라도 가로 스크롤은 필요하지 않습니다.

사용자 정의 reading-layout은 두 개의 minmax 열로 구성되며 800px 미만에서는 한 열로 바뀝니다. 이 기준은 해당 레이아웃에만 적용되며 Pico의 공식 브레이크포인트가 아닙니다. 검토 및 재설정 버튼은 Pico의 그리드 도우미를 사용하고, 대화상자 바닥글은 줄바꿈되는 flex 행을 사용합니다. 좁은 화면에서는 2열 배치보다 읽기 쉬운 설정 패널을 우선합니다.

지원 사양 읽기

## Pico CSS Pico 디자인 시스템에서 유용한 검토 단계를 더한 네이티브 유효성 검사

### 유용한 검토 단계를 더한 네이티브 유효성 검사

프로필 이름에는 required와 minlength를 사용하고, 연결된 짧은 도움말을 제공합니다. 브라우저의 기본 제약 조건 검증으로 빈 값 제출을 막습니다. 스크립트는 앞뒤 공백을 제거한 뒤 값을 확인하므로 공백 두 개만으로는 애플리케이션 규칙을 충족할 수 없습니다. 유효하지 않은 경우 invalid 이벤트가 aria-invalid를 추가해 Pico의 오류 스타일을 적용하고, 입력을 시작하면 사용자 지정 오류와 오래된 invalid 속성을 지웁니다.

select와 range는 일반적인 브라우저 컨트롤입니다. 두 컨트롤의 값은 읽기 예시에 즉시 반영되지만, Review profile을 누르면 별도의 대기 중인 객체가 만들어집니다. 이 스냅샷은 대화상자에 표시되는 텍스트이자 Apply locally에 사용되는 데이터이므로, 확인 화면에 표시된 값과 실제 적용되는 값이 서로 달라지는 일을 방지합니다.

1. 프로필 이름을 비워 둔 채 Review profile을 눌러 보세요.

2. 이름을 입력하고 너비를 선택한 다음 예시의 글꼴 크기를 변경하세요.

3. 스냅샷을 검토하고, 계속 편집하려면 취소하거나 로컬 상태에 적용하세요.

지원 사양 읽기

## Pico CSS Pico 디자인 시스템에서 스타일만 입힌 오버레이가 아닌 실제 모달

### 스타일만 입힌 오버레이가 아닌 실제 모달

Pico는 dialog와 그 안의 article 콘텐츠에 스타일을 적용하지만 애플리케이션의 JavaScript는 제공하지 않습니다. 이 예시에서는 HTMLDialogElement.showModal을 호출합니다. 브라우저는 대화상자를 최상위 레이어에 배치하고 나머지 문서를 비활성화하며, 기본 Escape 키 동작으로 대화상자를 닫을 수 있게 합니다. open 속성만 설정하면 동작이 다른 비모달 대화상자가 만들어지므로 여기서는 사용하지 않습니다.

대화상자의 aria-labelledby는 제목을 가리킵니다. 닫기 버튼에는 명시적인 접근성 라벨을 제공하고, Keep editing과 Apply locally는 각각의 결과를 설명합니다. 두 취소 버튼은 저장된 상태를 변경하지 않고 close를 호출합니다. 적용하면 대기 중인 프로필을 표시되는 텍스트에 기록한 뒤 대화상자를 닫습니다. localStorage에 쓰거나 요청을 전송하지는 않습니다.

지원 사양 읽기

## Pico CSS Pico 디자인 시스템의 보충 설명을 위한 네이티브 펼침/접기 요소

### 보충 설명을 위한 네이티브 디스클로저

details/summary 쌍은 어떤 컨트롤이 예시에 영향을 주고 어떤 컨트롤은 영향을 주지 않는지 설명합니다. 이 동작은 JavaScript 없이도 작동하며, 해당 동작이 HTML 요소 자체에 내장되어 있기 때문입니다. summary는 내용을 설명하는 질문을 제공하며 키보드로 조작할 수 있습니다. 이 설명은 보충 콘텐츠이므로 항상 열린 패널을 추가해 주 양식을 방해하지 않습니다.

닫힌 상태의 화면이 비슷해 보인다는 이유만으로 details를 스타일만 입힌 제목으로 바꾸지 마세요. 마찬가지로 모양 입력은 실제 이진 상태를 유지할 수 있도록 role=switch가 지정된 type=checkbox로 둡니다. Pico는 시맨틱 구조에 스타일을 적용하며, 이러한 구조는 상호작용에 필요한 동작도 상당 부분 제공합니다.

- article은 환경설정 표면을 하나의 시각적 그룹으로 묶습니다.

- details와 summary는 네이티브 펼침/접기 기능을 제공합니다.

- showModal로 연 dialog는 모달 검토 경계를 제공합니다.

지원 사양 읽기

## Pico CSS Pico 디자인 시스템을 한 번 설치하고 예시를 재현 가능하게 유지하기

### 한 번 설치하고 예시를 재현 가능하게 유지하기

표준 패키지에는 컴파일된 pico.min.css가 포함되어 있습니다. 이 파일을 로컬 assets 폴더에 복사하고 애플리케이션 레이아웃 규칙보다 먼저 불러온 다음, 제공된 app.js를 defer와 함께 로드하세요. 전체 마크업, CSS, 스크립트는 위에 제공되어 있습니다. 이 예시에는 프레임워크 provider, 아이콘 글꼴 또는 서드파티 JavaScript 플러그인이 필요하지 않습니다.

컨테이너 및 그리드 클래스와 함께 표준 스타일시트를 일관되게 사용하세요. 클래스 없는 빌드는 레이아웃을 다르게 가정하고, 조건부 빌드는 스타일을 다른 범위에 적용합니다. 마크업을 확인하지 않고 이러한 배포판을 서로 바꾸는 것은 무해한 최적화가 아닙니다. 기존 사이트에 Pico를 추가한다면 전역으로 적용하기 전에 요소 선택자가 기존 양식 및 타이포그래피 스타일과 어떻게 상호작용하는지 확인하세요.

지원 사양 읽기

## Pico CSS 디자인 시스템: 마크업을 적용하기 전에 배포 방식을 선택하세요

### 마크업을 조정하기 전에 배포 방식을 선택하세요

이 예제에서는 표준 배포판과 컨테이너 및 그리드 도우미를 사용합니다. 클래스 없는 배포판은 레이아웃의 전제 조건을 바꾸고, 조건부 배포판은 Pico 스타일을 특정 범위에만 적용합니다. 배포 방식 선택은 서로 바꿔 쓸 수 있는 파일 크기 최적화가 아니라 통합 방식에 관한 결정으로 다루세요.

기존 사이트에 적용할 때는 요소 선택자가 기존 제목, 양식, 글 및 대화상자에 어디까지 영향을 미치는지 살펴보세요. 읽기 예제의 백분율 글꼴 크기는 해당 영역에만 적용되는 재정의이므로 그 범위에 유지해야 합니다. 루트 크기를 바꾸면 Pico의 rem 기반 간격과 컨트롤에도 영향을 줍니다. 문서의 어느 부분에 테마를 상속시킬지 결정할 때는 appearance 속성과 애플리케이션의 환경 설정 컨트롤을 함께 맞추세요.

지원 사양 읽기

## Pico CSS 디자인 시스템 컴포넌트 예제

### 시맨틱 요소로 완성한 읽기 인터페이스

레이블은 컨트롤을 감싸고, article은 설정 카드를 만들며, details는 펼침 기능을 제공하고, dialog는 확인 내용을 담습니다.

```
<main class="container"><header><p class="kicker">PICO CSS / READING ROOM</p><h1>A calmer reading setup</h1><p>Adjust a local reading profile. Semantic HTML does most of the work.</p></header><div class="reading-layout"><article><header><h2>Reading preferences</h2></header><form id="preferences"><label for="reader">Profile name<input id="reader" name="reader" required minlength="2" placeholder="Weekend reader" aria-describedby="name-help"></label><small id="name-help">At least two characters. Saved only for this open preview.</small><label for="measure">Reading width<select id="measure"><option value="48">Narrow — 48 characters</option><option value="62" selected>Balanced — 62 characters</option><option value="72">Wide — 72 characters</option></select></label><label for="scale">Text size <output id="size-label">100%</output><input id="scale" type="range" min="90" max="125" step="5" value="100"></label><label><input id="night" type="checkbox" role="switch"> Dark appearance</label><div class="grid"><button type="submit">Review profile</button><button type="reset" class="secondary outline">Reset</button></div></form><footer id="saved" role="status">No profile applied yet.</footer></article><section class="reading-copy"><p class="kicker">A SHORT SAMPLE</p><h2>Make space for attention.</h2><div id="sample"><p>The margin is not leftover space. It gives each paragraph a clear beginning and lets the eye return to the next line without effort.</p><p>A reading interface can be quiet without becoming empty. Descriptive headings, useful contrast, and a predictable rhythm let the content remain in charge.</p></div><details><summary>What changes in this preview?</summary><p>Width changes the maximum line measure, text size scales only this sample, and the appearance switch changes Pico’s theme. These are local preferences, not browser accessibility settings.</p></details></section></div><small>Official Pico CSS 2.1.1. Native form, details, and dialog elements; original application behavior.</small></main><dialog id="review" aria-labelledby="review-title"><article><header><button id="close" aria-label="Close review" rel="prev"></button><h2 id="review-title">Review reading profile</h2></header><p id="review-text"></p><footer><button id="cancel" class="secondary">Keep editing</button><button id="apply">Apply locally</button></footer></article></dialog>
```

코드 참조

- Pico는 이러한 요소의 스타일을 지정하고, 브라우저 API는 기본 동작을 제공합니다.

- 대화상자는 open 속성을 추가하는 대신 showModal로 엽니다.

### 원래 프로필 인터랙션

실시간 스타일, 기본 제공 유효성 검사, 안전한 확인 텍스트, 로컬 적용 및 재설정 동작.

```
const $=id=>document.getElementById(id);let pending=null;
function update(){ $('sample').style.maxWidth=$('measure').value+'ch';$('sample').style.fontSize=$('scale').value+'%';$('size-label').value=$('scale').value+'%';document.documentElement.dataset.theme=$('night').checked?'dark':'light';}
for(const id of ['measure','scale','night'])$(id).addEventListener('input',update);
$('preferences').addEventListener('submit',event=>{event.preventDefault();pending={name:$('reader').value.trim(),width:$('measure').value,size:$('scale').value,dark:$('night').checked};if(pending.name.length<2){$('reader').setCustomValidity('Use at least two non-space characters.');$('reader').reportValidity();return;}$('review-text').textContent=`${pending.name}: ${pending.width}-character maximum, ${pending.size}% sample text, ${pending.dark?'dark':'light'} appearance. This will apply only to this preview.`;$('review').showModal();});
$('reader').addEventListener('input',()=>{$('reader').setCustomValidity('');$('reader').removeAttribute('aria-invalid')});$('reader').addEventListener('invalid',()=>{$('reader').setAttribute('aria-invalid','true')});
for(const id of ['close','cancel'])$(id).addEventListener('click',()=>$('review').close());
$('apply').addEventListener('click',()=>{$('saved').textContent=`Applied ${pending.name} locally (${pending.width}ch, ${pending.size}%, ${pending.dark?'dark':'light'}). Reloading clears this profile.`;$('review').close();});
$('preferences').addEventListener('reset',()=>{setTimeout(()=>{$('reader').setCustomValidity('');$('reader').removeAttribute('aria-invalid');$('saved').textContent='No profile applied yet.';update()},0)});update();
```

코드 참조

- 프로필 정보는 이 문서 밖으로 전송되지 않습니다.

- 공백만 입력한 이름은 setCustomValidity로 거부됩니다.

### 읽기 레이아웃

명시적인 애플리케이션 규칙으로 설정 패널과 예제 영역을 분리합니다.

```
main.container{max-width:1120px;padding:2rem 1rem}.kicker{font-size:.7rem;letter-spacing:.13em;font-weight:700;color:var(--pico-primary)}.reading-layout{display:grid;grid-template-columns:minmax(260px,.95fr) minmax(0,1.05fr);gap:2rem;align-items:start}.reading-copy{padding-top:1rem}#sample{transition:font-size .15s}output{float:right}#review article{max-width:560px}#review footer{display:flex;flex-wrap:wrap;gap:.5rem}#review footer button{flex:1}h1{max-width:20ch}header>p{max-width:65ch}@media(max-width:800px){.reading-layout{grid-template-columns:1fr;gap:1rem}}
```

코드 참조

- 800px 중단점과 ch 단위 측정값은 사용자 지정 설정입니다.

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

### 구현 시작점

위의 예제를 전체 본문, style.css 및 app.js로 저장하세요. 독립 실행형 미리보기에는 동일한 공식 CSS와 원래 애플리케이션 코드가 인라인으로 포함되어 있습니다. 기본 제공 대화상자 API를 지원하는 최신 브라우저를 사용합니다. HTML 래퍼에는 전체 본문 마크업이 포함되어 있습니다. 제공된 인터랙션과 CSS 예제는 여기에 표시된 파일 이름으로 저장하세요.

```
<!-- npm install @picocss/pico@2.1.1
mkdir -p assets
cp node_modules/@picocss/pico/css/pico.min.css assets/pico.min.css -->
<!doctype html>
<html lang="en" data-theme="light">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Reading room</title>
<link rel="stylesheet" href="assets/pico.min.css">
<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script></head>
<body><main class="container"><header><p class="kicker">PICO CSS / READING ROOM</p><h1>A calmer reading setup</h1><p>Adjust a local reading profile. Semantic HTML does most of the work.</p></header><div class="reading-layout"><article><header><h2>Reading preferences</h2></header><form id="preferences"><label for="reader">Profile name<input id="reader" name="reader" required minlength="2" placeholder="Weekend reader" aria-describedby="name-help"></label><small id="name-help">At least two characters. Saved only for this open preview.</small><label for="measure">Reading width<select id="measure"><option value="48">Narrow — 48 characters</option><option value="62" selected>Balanced — 62 characters</option><option value="72">Wide — 72 characters</option></select></label><label for="scale">Text size <output id="size-label">100%</output><input id="scale" type="range" min="90" max="125" step="5" value="100"></label><label><input id="night" type="checkbox" role="switch"> Dark appearance</label><div class="grid"><button type="submit">Review profile</button><button type="reset" class="secondary outline">Reset</button></div></form><footer id="saved" role="status">No profile applied yet.</footer></article><section class="reading-copy"><p class="kicker">A SHORT SAMPLE</p><h2>Make space for attention.</h2><div id="sample"><p>The margin is not leftover space. It gives each paragraph a clear beginning and lets the eye return to the next line without effort.</p><p>A reading interface can be quiet without becoming empty. Descriptive headings, useful contrast, and a predictable rhythm let the content remain in charge.</p></div><details><summary>What changes in this preview?</summary><p>Width changes the maximum line measure, text size scales only this sample, and the appearance switch changes Pico’s theme. These are local preferences, not browser accessibility settings.</p></details></section></div><small>Official Pico CSS 2.1.1. Native form, details, and dialog elements; original application behavior.</small></main><dialog id="review" aria-labelledby="review-title"><article><header><button id="close" aria-label="Close review" rel="prev"></button><h2 id="review-title">Review reading profile</h2></header><p id="review-text"></p><footer><button id="cancel" class="secondary">Keep editing</button><button id="apply">Apply locally</button></footer></article></dialog>
</body>
</html>
```

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

```
표준 스타일시트, 시맨틱 article, 기본 제공 양식 및 details 펼침 기능을 사용하는 Pico 2.1.1 읽기 프로필 예제를 활용하세요. 텍스트 크기와 줄 길이 변경은 예제 영역에만 적용하고, appearance 체크박스와 data-theme를 동기화하세요. 프로필 이름을 공백 제거 후 검증하고, 확인용 스냅샷을 저장한 다음 dialog.showModal로 여세요. 취소하면 프로필이 적용되지 않아야 합니다. 저장된 로컬 프로필만 적용하고 기본 제공 양식 값으로 복원한 뒤 재설정하세요. 예제의 텍스트 크기 설정으로 대체하지 말고 Pico의 반응형 루트 크기를 유지하세요.
```

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

Pico CSS 2.1.1. 기본 토큰과 원래 읽기 레이아웃 및 프로필 규칙을 분리했습니다. 데이터 저장 기능이나 원격 서비스는 구현되어 있지 않습니다.

- CSS 변수 실제 스타일 및 색상 정의.

- 타이포그래피 시맨틱 제목과 글자 스타일.

- 양식 기본 제공 양식 구성.

- 모달 대화상자 스타일과 애플리케이션 동작의 경계.

- 그리드 반응형 레이아웃 도우미.

- 아코디언 details와 summary 펼침 기능.

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

### Preline UI

탭이 연동되고, 입력 숫자 플러그인의 범위가 제한되며, 설치된 테마 별칭과 실제 Tailwind 스케일을 적용한 네이티브 Preline 세션 플래너입니다. 선택한 세션에 따라 현지 재료비 추정치도 갱신됩니다.

### Prime UI

Prime UI 생태계를 버전으로 고정해 구현한 PrimeVue 예제입니다. 실제 프리셋 참조, 제어된 확장, 필터링, 선택, 로컬 고정 기능을 갖춘 Aura 테마 문서 트리입니다.

### Pure CSS

Pure CSS는 위젯 런타임 없이 그리드, 양식, 버튼, 메뉴 및 표를 구성하는 모듈형 스타일시트입니다. 이 가이드에서는 선택적으로 사용하는 반응형 그리드 모듈과 기본 제공 시맨틱 요소를 필터링 가능한 장비 카탈로그에 적용하고, 정렬 및 선택 기능은 명시적으로 구현하는 방법을 보여줍니다.


- [구현 레퍼런스](https://picocss.com/docs/forms)
- [출처](https://picocss.com/docs/css-variables)
- [지원 사양 읽기](https://picocss.com/docs/forms)
- [지원 사양 읽기](https://picocss.com/docs/css-variables)
- [지원 사양 읽기](https://picocss.com/docs/typography)
- [지원 사양 읽기](https://picocss.com/docs/grid)
- [지원 사양 읽기](https://picocss.com/docs/modal)
- [지원 사양 읽기](https://picocss.com/docs/accordion)
- [코드 참조](https://picocss.com/docs/modal)
- [코드 참조](https://picocss.com/docs/forms)
- [코드 참조](https://picocss.com/docs/grid)
- [CSS 변수 실제 스타일 및 색상 정의.](https://picocss.com/docs/css-variables)
- [타이포그래피 시맨틱 제목과 글자 스타일.](https://picocss.com/docs/typography)
- [양식 기본 제공 양식 구성.](https://picocss.com/docs/forms)
- [모달 대화상자 스타일과 애플리케이션 동작의 경계.](https://picocss.com/docs/modal)
- [그리드 반응형 레이아웃 도우미.](https://picocss.com/docs/grid)
- [아코디언 details와 summary 펼침 기능.](https://picocss.com/docs/accordion)