# Flowbite 디자인 시스템 ## Flowbite 디자인 시스템 인터페이스 미리보기 패킹 카테고리 세 개를 펼치고, 준비물을 체크한 다음 기본 드로어에서 로컬 메모를 작성하세요. ## Flowbite 디자인 시스템 디자인 참고서 Tailwind CSS 4.3.3과 함께 사용하는 Flowbite 4.0.2 기본 테마입니다. 아래에 지정된 별칭은 실제 Flowbite 테마 변수이며, 별칭이 참조하는 색상 팔레트는 Tailwind에서 가져옵니다. 포장 일러스트와 애플리케이션의 간격 설정은 자체적으로 구성했습니다. ### 기본 의미론적 텍스트 및 상태 역할 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | --color-body | var(--color-gray-600) | 일반 설명 텍스트입니다. | | --color-body-subtle | var(--color-gray-500) | 보조 설명입니다. | | --color-heading | var(--color-gray-900) | 제목과 강조도가 높은 레이블입니다. | | --color-fg-brand | var(--color-blue-700) | 브랜드 색상의 전경색입니다. | | --color-fg-success | var(--color-emerald-700) | 성공 상태 전경색입니다. | | --color-fg-danger | var(--color-rose-700) | 오류 상태 전경색입니다. | | --color-fg-warning | var(--color-orange-900) | 경고 상태 전경색입니다. | | --color-fg-disabled | var(--color-gray-400) | 비활성 상태 전경색입니다. | ### 기본 표면과 테두리 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | --color-neutral-primary | var(--color-white) | 카드와 서랍 패널 표면입니다. | | --color-neutral-secondary | var(--color-gray-50) | 페이지 배경. | | --color-neutral-tertiary | var(--color-gray-100) | 진행률 트랙입니다. | | --color-brand | var(--color-blue-700) | 주요 동작과 포장 완료 진행 표시입니다. | | --color-brand-soft | var(--color-blue-100) | 포커스 링 또는 은은한 브랜드 표면입니다. | | --color-brand-softer | var(--color-blue-50) | 열린 아코디언과 일러스트 표면입니다. | | --color-brand-strong | var(--color-blue-800) | 동작 요소의 호버 상태입니다. | | --color-default | var(--color-gray-200) | 기본 구성 요소 테두리입니다. | | --color-success-soft | var(--color-emerald-50) | 개별 결과 표면입니다. | ### 기본 형태 및 글꼴 변수 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | --font-sans | 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' | Inter를 우선 사용하는 UI 글꼴 스택입니다. 미리보기에서는 사용 가능한 시스템 대체 글꼴을 사용하며, 원격 글꼴은 가져오지 않습니다. | | --font-mono | 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace' | 코드 글꼴 스택입니다. | | --radius-xxs | 2px | 2픽셀 모서리 반경입니다. | | --radius-xs | 4px | 4픽셀 모서리 반경입니다. | | --radius-sm | 6px | 6픽셀 모서리 반경입니다. | | --radius | 8px | 8픽셀 모서리 반경입니다. | | --radius-base | 12px | rounded-base에 사용되는 12픽셀 패널 모서리 반경입니다. | | --radius-lg | 16px | 16픽셀 모서리 반경입니다. | | --default-border-width | 1px | 1픽셀 테두리입니다. | | --leading-5 | 20px | 20픽셀 행간입니다. | | --leading-6 | 24px | 24픽셀 행간입니다. | ### 예제에 사용된 Tailwind 레이아웃 값 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | p-6 / md:p-10 | 1.5rem / 2.5rem | Tailwind 기본 1/4rem 간격 단위로 설정한 페이지 여백입니다. | | gap-8 | 2rem | 포장 카테고리와 진행률 요약 사이의 간격입니다. | | md breakpoint | 48rem | 두 열 레이아웃으로 전환합니다. | | text-sm / text-xl / text-3xl | 0.875rem / 1.25rem / 1.875rem | 본문, 섹션 제목, 페이지 제목에 사용하는 유틸리티입니다. | | w-96 / max-w-full | 24rem / 100% | 서랍 패널 너비가 모바일 뷰포트를 넘지 않도록 합니다. | ## Flowbite 디자인 시스템 전체 가이드 실제 인터페이스를 위해 이 시스템을 선택하고 적용하고 검토하는 실용 가이드. 완전한 안내와 구현 시작점, 소스 링크. ## Flowbite 디자인 시스템 4의 새로운 명명된 기본 테마 ### Flowbite Four에서 이름이 지정된 기본 테마 추가 > 이 예제는 버전이 명시되지 않은 낡은 파란색·회색 코드 조각 모음이 아니라 Flowbite 4.0.2를 사용합니다. 기본 테마는 color-body, color-heading, color-brand, color-neutral-primary 등의 의미론적 별칭을 정의합니다. 페이지는 Flowbite Tailwind 플러그인을 적용하기 전에 해당 테마를 가져온 다음 text-heading, bg-brand와 같은 대응 클래스를 사용합니다. 별칭은 Tailwind의 색상 팔레트를 참조합니다. 예를 들어 일반 브랜드 동작은 blue-700을, 더 강조되는 호버 상태는 blue-800을 참조합니다. 명세에는 이러한 참조가 그대로 유지되어 의미론적 역할과 기본 색상 값을 구분할 수 있습니다. 포장 일러스트는 같은 브랜드 역할을 재사용하지만, 공식 Flowbite 일러스트인 것은 아닙니다. 지원 사양 읽기 ## Flowbite 디자인 시스템의 테마 형태와 Tailwind 레이아웃의 조화 ### 테마의 기하 구조와 Tailwind 레이아웃이 함께 작동합니다 기본 테마의 radius-base는 12픽셀이며, 주요 컨테이너와 서랍 패널 컨트롤, 결과 알림에 rounded-base를 사용합니다. 그 밖에도 2, 4, 6, 8, 16픽셀의 서로 다른 모서리 반경을 정의합니다. 따라서 복사한 구성 요소에서 새 의미론적 클래스 이름을 사용할 때는 테마를 가져와야 합니다. 제공된 글꼴 스택은 Inter를 우선 사용하지만, 이 자체 완결형 미리보기는 원격 글꼴을 다운로드하지 않습니다. 대신 사용 가능한 시스템 대체 글꼴을 사용합니다. 페이지 간격에는 Tailwind 유틸리티를 적용합니다. p-6은 1.5rem, gap-8은 2rem, 데스크톱의 p-10은 2.5rem입니다. 이러한 레이아웃 유틸리티를 별도로 만든 Flowbite 간격 체계인 것처럼 설명하지 않습니다. 지원 사양 읽기 ## Flowbite 디자인 시스템 아코디언 하나로 세 가지 카테고리 관리 ### 아코디언 인스턴스 하나로 세 가지 카테고리를 관리합니다 JavaScript는 항목 배열을 사용해 Accordion을 구성합니다. 각 항목에는 고유한 ID, 트리거 요소, 대상 패널이 있으며, 처음에는 종이 카테고리가 열려 있습니다. alwaysOpen은 false이므로 도구를 열면 종이 카테고리는 닫힙니다. custom activeClasses와 inactiveClasses는 기본 테마의 의미론적 전경색 및 표면 이름을 사용합니다. 이 클래스는 패널 표시 여부를 제어하고 트리거의 aria-expanded 값을 업데이트합니다. 마크업에는 aria-controls와 이에 대응하는 패널 ID가 설정되어 있습니다. 패널이 접혀도 체크리스트 입력 요소는 문서에 남아 있으므로 카테고리를 전환해도 선택 상태가 유지됩니다. 섹션을 접는 것은 표시 상태를 바꾸는 동작이지, 사용자가 작성한 포장 목록을 초기화하는 동작이 아닙니다. 지원 사양 읽기 ## Flowbite 디자인 시스템 체크박스 상태를 바탕으로 진행률 계산 ### 진행 상태는 실제 체크박스에서 계산됩니다 실제 워크숍 준비물을 나타내는 체크박스 6개가 있습니다. 애플리케이션은 현재 체크된 상태를 기준으로 포장 완료 항목 수, 다음 항목, 남은 항목 텍스트를 계산합니다. 진행률 표시줄의 너비와 aria-valuenow도 같은 개수를 바탕으로 업데이트되므로 체크리스트와 별도의 카운터가 서로 어긋날 일이 없습니다. 도면 용지와 트레이싱 페이퍼는 준비 방법이 다르므로 별개의 항목으로 선택할 수 있습니다. 커팅 매트는 여러 사람이 함께 사용하는 작업 공간을 설명하며, 저점착 테이프에는 벽면에 사용할 때의 주의 사항이 포함되어 있습니다. 이러한 구체적인 세부 정보 덕분에 카테고리를 펼쳤을 때 유용한 내용을 확인할 수 있으며, 아코디언이 반복적인 일반 문구를 단순히 숨기는 데 그치지 않습니다. 1. 종이 카테고리를 열고 도면 용지를 포장 완료로 표시합니다. 2. 도구 카테고리를 열고 연필과 마커를 포장 완료로 표시한 다음, 종이 카테고리로 돌아갑니다. 3. 두 항목이 모두 선택된 상태로 유지되고 요약에 6개 중 2개로 표시되는지 확인합니다. 지원 사양 읽기 ## Flowbite 디자인 시스템 Drawer 인스턴스로 표시 상태와 배경 오버레이 관리 ### 드로어 인스턴스 하나로 표시 여부와 배경 오버레이를 관리합니다 준비물 패널은 placement를 right, backdrop을 true, bodyScrolling을 false로 설정해 new Drawer로 초기화합니다. 패널을 열 때는 show를 호출하고, 닫기 버튼을 누르면 hide를 호출합니다. 기본 Flowbite 구현이 위치 및 전환 클래스, 배경 오버레이, 표시 상태 속성을 적용합니다. 같은 패널에 두 번째 데이터 속성 초기화 방식을 혼용하지 않고, 의도적으로 JavaScript API를 사용합니다. 서랍 패널 너비는 24rem이며 max-w-full을 적용해 좁은 뷰포트에서도 사용할 수 있습니다. 패널 내부 콘텐츠는 세로로 스크롤할 수 있습니다. 페이지 높이는 콘텐츠에 따라 정해집니다. 서랍 패널의 h-screen은 의도적으로 고정된 오버레이이며, 임베드된 페이지에 최소 높이를 반복해서 늘리는 문제를 일으키지 않습니다. 지원 사양 읽기 ## Flowbite 디자인 시스템 Drawer 수명 주기에 포커스 관리 추가 ### 드로어의 수명 주기에 맞춰 포커스를 관리합니다 onShow 콜백은 배경의 main 요소를 inert로 설정하고 Prepared by 입력란에 포커스를 둡니다. onHide는 inert를 제거하고 포커스를 Prepare materials 메모로 돌려보냅니다. 간단한 keydown 핸들러는 Tab 및 Shift+Tab 키를 눌렀을 때 패널의 첫 번째 컨트롤과 마지막 컨트롤 사이에서 포커스를 순환시킵니다. 이러한 추가 기능은 스타일 클래스가 제공한다고 가정하는 것이 아니라 전체 소스에 명시되어 있습니다. Flowbite는 드로어의 Escape 키 입력을 처리합니다. 예제의 콜백은 어떤 경로로 닫더라도 배경을 다시 조작할 수 있게 합니다. 패널에는 aria-labelledby로 레이블을 지정하고, 닫기 컨트롤에는 명시적인 접근성 이름을 부여합니다. 실제 애플리케이션에서는 라이브러리 이름만으로 접근성이 보장된다고 여기지 말고, 자체 포털 및 라우팅과 함께 이 동작을 테스트해야 합니다. 지원 사양 읽기 ## Flowbite 디자인 시스템 소유자 정보를 검증하고 로컬 텍스트만 저장하기 ### 소유자를 확인하고 로컬 텍스트만 저장합니다 작성자 입력은 필수이며 최소 및 최대 길이 제한이 있습니다. 제출 핸들러는 이름의 앞뒤 공백을 제거하고 공백만 입력된 경우 거부합니다. 세션 메모는 선택 항목이며, 글자 수는 최대 240자입니다. 드로어를 열 때 남은 항목 요약을 갱신하므로 이전 준비 상태가 아니라 현재 체크리스트를 보여 줍니다. 저장하면 드로어가 닫히고 작성자, 준비 완료 항목 수, 선택 입력한 텍스트가 포함된 로컬 메모가 표시됩니다. 이메일을 보내거나 공유 문서를 만들지 않습니다. 사용자 입력 문자열은 textContent에 할당합니다. 준비 체크리스트를 수정하면 이전 결과 알림을 지웁니다. 기존 항목 수가 더는 정확하지 않을 수 있기 때문입니다. 지원 사양 읽기 ## JavaScript 라이브러리에서 생성되는 클래스를 포함하는 Flowbite 디자인 시스템 ### JavaScript 라이브러리에서 생성한 클래스를 포함합니다 Tailwind 입력 파일은 기본 Flowbite 테마를 불러오고 flowbite/plugin을 등록합니다. 명시적 소스 지시문은 HTML, 애플리케이션 모듈, 그리고 Flowbite의 ESM 라이브러리를 포함합니다. 마지막 소스가 중요합니다. 라이브러리가 런타임에 추가하는 클래스는 초기 HTML에 직접 작성하지 않았더라도 생성된 스타일시트에 포함되어야 합니다. 번들은 flowbite에서 Accordion과 Drawer를 불러옵니다. 제공된 예제는 마크업이 준비된 뒤 각 인스턴스를 한 번씩 초기화합니다. 뷰를 마운트하고 언마운트하는 프레임워크 애플리케이션에서는 중복 리스너를 방지하도록 생명 주기 설정과 인스턴스 정리를 짝지어야 합니다. 이 로컬 페이지는 한 번만 마운트되며 클라이언트 측 라우트 전환은 없습니다. 지원 사양 읽기 ## Flowbite 디자인 시스템의 구현 범위를 보여 주는 준비 도우미 ### 구현 범위가 명확하게 드러나는 패킹 보조 도구 이 현장 안내서는 콘텐츠가 풍부한 아코디언, 유지되는 체크박스 상태, 오버레이 흐름을 보여 줍니다. 임의로 만든 재고 데이터나 원격 구매 결과는 없습니다. 여섯 가지 준비물은 모두 워크숍 준비를 위한 예시 작업이며, 저장한 메모는 페이지가 열려 있는 동안 메모리에 유지됩니다. 기본 시맨틱 테마, 컴포넌트 클래스, JavaScript 동작은 Flowbite에서 제공하며, 워크숍 콘텐츠, 독창적인 일러스트, 포커스 기능 보강은 애플리케이션 코드입니다. 이렇게 분리하면 실제로 라이브러리가 담당하는 부분을 이해하면서 유용한 구성을 복사할 수 있습니다. - 패널 표시 여부는 Flowbite의 상태를 관리하는 인스턴스로 제어합니다. - 체크리스트 데이터와 계산된 진행 상태는 애플리케이션 로직에서 관리합니다. - 실제 구매나 공유 저장 기능은 명시적인 백엔드 통합을 통해서만 처리합니다. 지원 사양 읽기 ## Flowbite 디자인 시스템 컴포넌트 예시 ### 준비 안내서 및 드로어 마크업 시맨틱 테마 클래스, 실제 체크박스 컨트롤, 연결된 아코디언 패널입니다. ```

FLOWBITE · FIELD GUIDE

Pack for a day of making.

A workshop packing guide with grouped instructions and a local materials note.

Choose stocks before the session. Keep one sheet untouched as a reference.

``` 코드 참조 - 버튼은 aria-controls를 통해 패널 ID와 연결됩니다. - 드로어에는 제목을 레이블로 지정합니다. - 진행률 표시줄은 시각적으로 확인할 수 있는 사용자에게 표시되는 것과 동일한 항목 수를 제공합니다. ### 네이티브 Flowbite 인스턴스와 로컬 상태 Accordion/Drawer 초기화와 애플리케이션별 체크리스트 및 포커스 관리입니다. ``` import {Accordion,Drawer} from 'flowbite'; const q=s=>document.querySelector(s),drawerEl=q('#materials-drawer'),page=q('#page'); const accordion=new Accordion(q('#packing-accordion'),['paper','tools','space'].map((id,i)=>({id,triggerEl:q(`#${id}-trigger`),targetEl:q(`#${id}-panel`),active:i===0})),{alwaysOpen:false,activeClasses:'bg-brand-softer text-fg-brand',inactiveClasses:'bg-neutral-primary text-heading'}); const drawer=new Drawer(drawerEl,{placement:'right',backdrop:true,bodyScrolling:false,onShow(){page.inert=true;q('#owner').focus();},onHide(){page.inert=false;q('#open-note').focus();}}); const boxes=[...document.querySelectorAll('[data-item]')]; function refresh(){let packed=boxes.filter(x=>x.checked),left=boxes.filter(x=>!x.checked);q('#count').value=`${packed.length} of 6`;q('#bar').style.width=`${packed.length/6*100}%`;q('[role="progressbar"]').setAttribute('aria-valuenow',packed.length);q('#next-item').textContent=left.length?`Next: ${left[0].dataset.item}`:'Everything on the list is packed.';q('#remaining').textContent=left.length?`Still needed: ${left.map(x=>x.dataset.item).join(', ')}.`:'All six materials are packed.';q('#result').hidden=true;} boxes.forEach(x=>x.addEventListener('change',refresh));q('#clear').onclick=()=>{boxes.forEach(x=>x.checked=false);refresh();};q('#open-note').onclick=()=>{refresh();drawer.show();};q('#close-note').onclick=()=>drawer.hide();drawerEl.addEventListener('keydown',e=>{if(e.key==='Tab'){let els=[...drawerEl.querySelectorAll('button,input,textarea')],first=els[0],last=els.at(-1);if(e.shiftKey&&document.activeElement===first){e.preventDefault();last.focus();}else if(!e.shiftKey&&document.activeElement===last){e.preventDefault();first.focus();}}});q('#note-form').onsubmit=e=>{e.preventDefault();const owner=q('#owner');if(owner.value.trim().length<2){owner.setCustomValidity('Enter at least two non-space characters.');owner.reportValidity();return;}drawer.hide();q('#result').hidden=false;q('#result').textContent=`Local note prepared by ${owner.value.trim()}: ${boxes.filter(x=>x.checked).length} of 6 items packed. ${q('#note').value.trim()||'No extra note.'}`;};q('#owner').oninput=()=>q('#owner').setCustomValidity('');refresh(); ``` 코드 참조 - Accordion 인스턴스 하나로 세 범주를 모두 제어합니다. - 드로어 생명 주기 콜백은 배경을 비활성화하고 포커스를 복원합니다. - 포커스 순환은 애플리케이션에서 명시적으로 추가한 기능입니다. ### 독창적인 준비물 일러스트와 보조 CSS 네이티브 유틸리티를 둘러싼 애플리케이션 레이아웃 세부 사항입니다. ``` body{margin:0;background:var(--color-neutral-secondary);font-family:var(--font-sans)}.category-trigger{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px;width:100%;text-align:left;font-size:15px;font-weight:600;border-bottom:1px solid var(--color-default)}.category-trigger b{font-size:11px;opacity:.6;margin-right:12px}.category-trigger:focus-visible{outline:3px solid var(--color-brand);outline-offset:-3px}.category-body{padding:20px;background:var(--color-neutral-primary);font-size:14px;line-height:1.7;border-bottom:1px solid var(--color-default)}.category-body p{margin-bottom:20px}.category-body label{display:flex;align-items:flex-start;gap:12px;margin:16px 0;cursor:pointer}.category-body small{display:block;font-size:12px;color:var(--color-body-subtle);margin-top:4px}.check{width:18px;height:18px;border:1px solid var(--color-default);border-radius:4px;margin-top:3px;color:var(--color-brand)}.kit-art{height:160px;background:var(--color-brand-softer);border-radius:var(--radius-base);position:relative;overflow:hidden}.kit-art i{position:absolute;width:110px;height:95px;background:#fff;border:1px solid var(--color-brand-medium);top:35px;left:20%;transform:rotate(-12deg)}.kit-art i:nth-child(2){left:35%;transform:rotate(10deg);background:var(--color-brand-soft)}.kit-art i:nth-child(3){width:8px;height:120px;left:70%;top:20px;transform:rotate(25deg);background:var(--color-brand)}.kit-art em{position:absolute;width:95px;height:22px;background:var(--color-brand-medium);bottom:20px;left:20%;transform:rotate(-20deg)}[hidden]{display:none!important}button{cursor:pointer}button:focus-visible{outline:3px solid var(--color-brand);outline-offset:3px}@media(max-width:600px){.category-trigger,.category-body{padding:16px}} ``` 코드 참조 - 종이, 연필, 자의 형태는 독창적인 장식용 CSS입니다. ### 완전한 index.html 문서 위에 제공된 스타일시트 빌드 및 완전한 상호작용 소스와 함께 사용합니다. ``` Flowbite specimen

FLOWBITE · FIELD GUIDE

Pack for a day of making.

A workshop packing guide with grouped instructions and a local materials note.

Choose stocks before the session. Keep one sheet untouched as a reference.

``` 코드 참조 - 제공된 인터랙션을 main.js로 저장하고 설정에 안내된 대로 bundle.js로 컴파일합니다. - 뷰포트와 네이티브 에셋 로딩이 포함되어 있습니다. ## Flowbite 디자인 시스템 에이전트 설정 ### 구현 시작점 Tailwind CSS 4.3.3과 함께 Flowbite 4.0.2를 검증했습니다. input.css의 실제 위치에 맞게 node_modules 소스 경로를 조정하세요. 원격 글꼴은 필요하지 않습니다. ``` /* npm install flowbite@4.0.2 */ /* npm install -D tailwindcss@4.3.3 @tailwindcss/cli@4.3.3 esbuild */ /* input.css, next to body.html and main.js: */ @import "tailwindcss" source(none); @import "flowbite/src/themes/default"; @plugin "flowbite/plugin"; @source "./body.html"; @source "./main.js"; @source "./node_modules/flowbite/lib/esm"; /* npx @tailwindcss/cli -i input.css -o output.css --minify */ /* npx esbuild main.js --bundle --format=iife --outfile=bundle.js */ /* index.html: link output.css then style.css; include the supplied markup. */ /* Load bundle.js with defer, or after the markup. */ ``` ### 프로젝트를 위한 프롬프트 ``` Tailwind 소스 탐색, 네이티브 Accordion 및 Drawer 초기화를 포함한 Flowbite 4.0.2 워크숍 준비 안내서 전체를 사용하세요. 분류된 준비물과 체크리스트 상태를 안내서와 연결하고, 로컬 준비 메모를 기록하기 전에 작성자 정보를 검증하세요. 드로어의 키보드 포커스, 배경 비활성화 처리, 닫기 동작을 유지하세요. 독창적인 일러스트 CSS은 라이브러리의 시맨틱 테마와 분리하세요. 이 로컬 준비 흐름에 서비스 티켓이나 외부 제출 기능을 추가하지 마세요. ``` ## Flowbite 디자인 시스템의 소스 및 범위 기본 테마를 사용하는 Flowbite 4.0.2입니다. 준비물 콘텐츠, 장식용 아트워크, 포커스 기능 보강은 독창적인 요소입니다. 준비물 메모는 로컬에만 저장됩니다. - 공식 저장소 버전 4 설정 및 컴포넌트 API입니다. - 기본 테마 소스 실제 시맨틱 별칭과 형태입니다. - Accordion 구현 인스턴스 옵션 및 aria-expanded 업데이트입니다. - Drawer 구현 표시 여부, 백드롭, 생명 주기 메서드입니다. - Accordion 안내서 공식 구성 참고 자료입니다. - Drawer 안내서 공식 오버레이 API입니다. - Tailwind 테마 기본 간격 및 타이포그래피 유틸리티입니다. ## Flowbite 디자인 시스템 관련 리소스 ### Fomantic UI 컴파일된 테마 값 검증, jQuery 드롭다운 및 평점 모듈, 명시적인 키보드 지원, 로컬에 영구 보관되는 관심 목록을 갖춘 네이티브 Fomantic UI 독서 목록입니다. ### Foundation XY Grid, Abide 사용자 지정 유효성 검사기, Reveal 확인 대화상자, 실제 Sass 설정, 완전한 로컬 통합 코드를 활용한 실제 작동하는 Foundation 증명 작업 공간입니다. ### Framework7 실제 스와이프아웃 동작, 명시적인 iOS 테마 값, 키보드로 접근할 수 있는 동작 열기 버튼, 초기화 전까지 완료된 연구도 유지하는 필터 목록을 갖춘 네이티브 Framework7 스케치북입니다. - [구현 레퍼런스](https://flowbite.com/docs/components/accordion/) - [출처](https://github.com/themesberg/flowbite/blob/main/src/themes/default.css) - [출처](https://tailwindcss.com/docs/theme) - [지원 사양 읽기](https://flowbite.com/docs/getting-started/quickstart/) - [지원 사양 읽기](https://flowbite.com/docs/components/accordion/) - [지원 사양 읽기](https://flowbite.com/docs/forms/checkbox/) - [지원 사양 읽기](https://flowbite.com/docs/components/drawer/) - [지원 사양 읽기](https://flowbite.com/docs/forms/input-field/) - [지원 사양 읽기](https://flowbite.com/docs/getting-started/javascript/) - [코드 참조](https://flowbite.com/docs/components/accordion/) - [코드 참조](https://flowbite.com/docs/components/drawer/) - [코드 참조](https://flowbite.com/docs/customize/colors/) - [코드 참조](https://flowbite.com/) - [공식 저장소 버전 4 설정 및 컴포넌트 API입니다.](https://github.com/themesberg/flowbite) - [기본 테마 소스 실제 시맨틱 별칭과 형태입니다.](https://github.com/themesberg/flowbite/blob/main/src/themes/default.css) - [Accordion 구현 인스턴스 옵션 및 aria-expanded 업데이트입니다.](https://github.com/themesberg/flowbite/blob/main/src/components/accordion/index.ts) - [Drawer 구현 표시 여부, 백드롭, 생명 주기 메서드입니다.](https://github.com/themesberg/flowbite/blob/main/src/components/drawer/index.ts) - [Accordion 안내서 공식 구성 참고 자료입니다.](https://flowbite.com/docs/components/accordion/) - [Drawer 안내서 공식 오버레이 API입니다.](https://flowbite.com/docs/components/drawer/) - [Tailwind 테마 기본 간격 및 타이포그래피 유틸리티입니다.](https://tailwindcss.com/docs/theme)