# CoreUI 디자인 시스템 ## CoreUI 디자인 시스템 인터페이스 미리 보기 메모를 선택하고 일괄 보관한 뒤 보관함 탭을 확인하고 가장 최근 작업을 되돌립니다. ## CoreUI 디자인 시스템 디자인 참조 설치된 컴파일 스타일시트의 Bootstrap 5.9.0용 CoreUI 라이트 테마 기본값입니다. --cui-* 이름은 실제 런타임 변수입니다. 샘플 애플리케이션은 무료 컴포넌트를 사용하며 CoreUI PRO 위젯을 전제로 하지 않습니다. ### 라이트 테마 역할 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | --cui-primary | #5856d6 | CoreUI 기본 보라색입니다. | | --cui-primary-contrast | #fff | 기본 색상과 짝을 이루는 텍스트입니다. | | --cui-secondary | #6b7785 | 보조 역할입니다. | | --cui-success | #1b9e3e | 성공 역할. | | --cui-info | #39f | 정보 역할입니다. | | --cui-warning | #f9b115 | 경고 역할입니다. | | --cui-danger | #e55353 | 위험 역할입니다. | | --cui-primary-bg-subtle | #cfc7f3 | 은은한 기본 색상 맥락 카드 배경입니다. | | --cui-primary-text-emphasis | #3634a3 | 은은한 기본 색상 표면 위의 텍스트입니다. | | --cui-primary-border-subtle | #9d92e6 | 맥락 카드 테두리입니다. | | --cui-danger-bg-subtle | #f9d4d4 | 높은 우선순위 배지 표면입니다. | | --cui-danger-text-emphasis | #671414 | 높은 우선순위 배지 텍스트입니다. | | --cui-warning-bg-subtle | #feecc5 | 중간 우선순위 배지 표면입니다. | | --cui-warning-text-emphasis | #764705 | 중간 우선순위 배지 텍스트입니다. | ### 타이포그래피 및 표면 기본값 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | --cui-font-sans-serif | system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" | 시스템 UI 글꼴 스택입니다. | | --cui-body-font-size | 1rem | 기본 본문 크기는 1rem이며, 조밀한 테이블에는 원본의 14px 재정의를 사용합니다. | | --cui-body-line-height | 1.5 | 기본 본문 행간입니다. | | --cui-body-color | rgba(37, 42.92, 54.02, 0.95) | 라이트 테마의 기본 본문 색상입니다. | | --cui-body-bg | #fff | 기본 표면입니다. | | --cui-tertiary-bg | #f3f4f7 | 이 예시의 페이지 배경입니다. | | --cui-secondary-color | rgba(37, 42.92, 54.02, 0.681) | 보조 텍스트 역할입니다. | | --cui-border-color | #dbdfe6 | 기본 구분선 색상입니다. | ### 모서리 및 포커스 변수 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | --cui-border-radius | 0.375rem | 기본값은 루트 16px 기준 6px에 해당합니다. | | --cui-border-radius-sm | 0.25rem | 작은 크기는 4px에 해당합니다. | | --cui-border-radius-lg | 0.5rem | 큰 크기는 8px에 해당합니다. | | --cui-border-radius-xl | 1rem | 특대 크기는 16px에 해당합니다. | | --cui-border-radius-pill | 50rem | 알약 모양입니다. | | --cui-focus-ring-width | 0.25rem | 포커스 링 너비입니다. | | --cui-focus-ring-opacity | 0.25 | 포커스 링 불투명도입니다. | | --cui-focus-ring-color | rgba(88, 86, 214, 0.25) | 기본 색상 기반 포커스 링 색상입니다. | ### 원본 대기열 밀도 선택 항목 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | Page padding | 32px; 24px 14px mobile | 원본 애플리케이션 내부 여백입니다. | | Table minimum width | 740px | 로컬 반응형 스크롤 영역에서 열을 읽기 쉽게 유지합니다. | | Table cell padding | 16px | 네이티브 테이블 구조를 기준으로 선택한 원본 밀도 설정입니다. | | Table text | 14px; headings 12px | 원본의 간결한 계층 구조입니다. | | g-3 summary row | 1rem native gutter | 반응형 지표 카드에는 표준 그리드 여백을 사용합니다. | | Toast behavior | autohide: false | 실행 취소 작업은 해제하거나 이후 일괄 작업으로 대체할 때까지 사용할 수 있습니다. | ## CoreUI 디자인 시스템 완전 가이드 실제 인터페이스를 위해 이 시스템을 선택하고 적용하고 검토하는 실용 가이드. 완전한 안내와 구현 시작점, 소스 링크. ## CoreUI 디자인 시스템: 실제로 사용하는 CoreUI 런타임 선택 ### 실제로 사용하는 CoreUI 런타임 선택 > 이 예시는 CSS 및 브라우저용 JavaScript 패키지인 Bootstrap 5.9.0의 CoreUI를 사용합니다. CoreUI에는 프레임워크별 패키지도 있지만, 해당 패키지의 컴포넌트 가져오기 방식은 이 예시의 데이터 속성과 호환되지 않습니다. 이 설정은 React나 Vue 공급자를 전제로 하지 않고, 서로 맞는 스타일시트와 번들 스크립트를 제공합니다. 검토 작업 공간은 무료 카드, 표, 양식, 탭, 토스트를 사용합니다. PRO 데이터 그리드나 고급 유료 선택기를 조용히 대체 요소로 사용하지 않습니다. 이 경계를 지키면 문서화되지 않은 템플릿을 구매하지 않고도 지정된 패키지만으로 전체 예제를 재현할 수 있습니다. 지원 사양 읽기 ## CoreUI 디자인 시스템: 실제 보라색 기본 색상과 짝을 이루는 상태 역할 사용 ### 실제 보라색 기본 색상과 짝을 이루는 상태 역할 사용 CoreUI의 밝은 테마 기본 색상은 #5856d6이며, 기본 색상 위의 대비 색상은 흰색입니다. 검토 원칙 카드에서는 primary-bg-subtle, primary-border-subtle, primary-text-emphasis를 함께 사용합니다. 이 이름은 서로 조화를 이루는 표면 스타일을 나타내므로, 임의의 전경색을 색조가 들어간 배경에 배치하지 않습니다. 높음 및 보통 배지도 danger 또는 warning의 은은한 표면 스타일과 강조 텍스트를 짝지어 사용합니다. 색상과 관계없이 텍스트 라벨로 분류를 명확히 알 수 있습니다. 이는 디자인 검토 우선순위를 보여 주는 예시일 뿐, 제품의 모든 빨간색 배지가 동일한 도메인 상태를 의미해야 한다는 뜻은 아닙니다. 지원 사양 읽기 ## CoreUI 디자인 시스템: 기본 본문 글꼴과 조밀한 작업 표의 글꼴을 구분 ### 기본 본문 서체와 조밀한 작업 테이블 구분 컴파일된 CoreUI의 본문 기본값은 1 rem 글꼴 크기와 1.5 줄 높이입니다. 이 예시에서는 검토 대기열을 조밀하게 표시하기 위해 표에 14픽셀 텍스트를, 열 라벨에 12픽셀 텍스트를 사용합니다. 페이지 제목과 요약 값에는 각각 별도의 큰 글꼴 크기를 적용했습니다. 이 가이드에서는 이러한 애플리케이션 수준의 재정의를 라이브러리 전체의 기본값이라고 잘못 설명하지 않습니다. 세 개의 맥락 카드에는 기본 반응형 그리드와 g-3 거터를 사용합니다. 받은 편지함과 보관됨 카드는 작은 화면에서도 나란히 표시되고, 세 번째 설명 카드는 한 행 전체를 차지합니다. 모든 수치는 화면에 표시된 샘플 레코드 5개에서 가져왔으며, 무관한 대시보드 지표나 임의로 만든 성장 차트는 없습니다. 지원 사양 읽기 ## CoreUI 디자인 시스템: 데이터 속성으로 실제 탭 패널 제어 ### CoreUI 데이터 속성으로 실제 탭 패널 제어 받은 편지함과 보관함은 버튼 기반 탭이며, data-coreui-toggle="tab"과 해당 탭 패널을 가리키는 대상을 사용합니다. 마크업에는 tablist, tab, tabpanel, aria-controls, aria-labelledby 관계가 포함됩니다. CoreUI JavaScript 컴포넌트가 활성 상태와 표시 여부를 갱신하므로, 애플리케이션 핸들러가 밑줄만 바꾸는 방식이 아닙니다. nav-underline-border 클래스가 이 컴포넌트의 시각적 스타일을 지정합니다. 탭을 바꿔도 레코드가 보관되거나 선택 항목이 지워지지 않습니다. 탭은 로컬 대기열에서 표시할 항목을 제어하고, 애플리케이션의 선택 및 보관 Set은 별도의 상태로 유지됩니다. 지원 사양 읽기 ## CoreUI 디자인 시스템: 전체 선택에 의미 있는 부분 선택 상태 적용 ### 전체 선택의 혼합 상태에 의미 부여 모든 요청에는 안정적인 R 시리즈 ID가 있습니다. 행을 선택하면 해당 ID가 selected Set에 추가됩니다. 헤더 체크박스는 받은 편지함의 현재 레코드를 모두 선택한 경우에만 체크되고, 일부만 선택한 경우에는 부분 선택 상태가 되며, 받은 편지함이 비어 있으면 비활성화됩니다. 대기열이 렌더링될 때마다 이 상태를 다시 계산합니다. 선택된 항목이 없으면 일괄 처리 버튼을 비활성화하고, 옆의 텍스트에 현재 선택 개수를 표시합니다. 보관 작업 후에는 선택을 지워 이미 보관된 레코드가 다음 일괄 처리에 실수로 남지 않도록 합니다. 원래 요청과 담당자는 레코드에 그대로 연결되며, 일반적인 ‘해결됨’ 라벨로 대체되지 않습니다. 1. 요청 두 개를 선택하고 헤더 체크박스의 부분 선택 상태를 확인하세요. 2. 선택한 항목을 보관한 뒤 받은 편지함의 개수가 2개 줄었는지 확인하세요. 3. 보관함을 열어 원래 요청 내용과 담당자를 확인하세요. 지원 사양 읽기 ## CoreUI 디자인 시스템: 되돌릴 수 있는 구체적인 작업 하나를 토스트로 안내 ### 토스트에 되돌릴 수 있는 특정 작업 표시 애플리케이션은 가장 최근에 보관한 일괄 처리의 정확한 ID를 기록한 다음, 기본 Toast 인스턴스의 show 메서드를 호출합니다. 알림에 실행 취소 작업이 있으므로 autohide는 false로 설정합니다. 임의의 짧은 타이머가 지나면 기회를 없애는 예제가 아닙니다. 토스트는 사용자가 직접 닫을 수 있습니다. 실행 취소를 누르면 저장된 ID만 archived Set에서 제거하고, 마지막 일괄 처리 스냅샷을 지운 뒤 실행 취소 작업을 비활성화합니다. 이후 일괄 처리를 실행 취소하더라도 이전에 보관한 항목은 계속 보관 상태로 남습니다. 이는 한 단계만 지원하는 작업이며, 완전한 실행 취소 기록을 제공한다고 오해하게 하지 않습니다. 지원 사양 읽기 ## CoreUI 디자인 시스템: 요청이 보관된 후에도 내용을 확인할 수 있도록 유지 ### 요청을 보관한 뒤에도 읽기 쉽게 유지 받은 편지함 표에는 메모 제목, 구체적인 변경 요청, 영역, 우선순위, 담당자가 표시됩니다. 보관함에는 제목, ID, 담당자, 전체 요청 내용을 유지하는 간결한 목록이 표시됩니다. 해결된 항목의 표 장식은 줄이면서도 무엇이 변경되었는지 파악하는 데 필요한 정보는 삭제하지 않습니다. 모바일에서는 table-responsive 안에 표의 최소 너비 740px을 유지합니다. 이름이 지정된 영역은 키보드로 포커스할 수 있고 포커스 표시도 명확합니다. 가로로 이동해도 문서 전체가 넓어지지 않고 표 안에서 이동합니다. 스크롤바를 피하려고 중요한 열을 없애면 검토 작업의 효용이 떨어집니다. 지원 사양 읽기 ## CoreUI 디자인 시스템: 백엔드 없이 지속적으로 확인할 수 있는 결과 제공 ### 백엔드를 꾸며내지 않고 지속되는 결과 사용 토스트에는 공손한 상태 역할과 원자적 알림 설정이 적용됩니다. 두 번째 인라인 상태 메시지는 로컬 보관 또는 실행 취소 결과를 설명합니다. 연결된 이슈 트래커가 없다는 점이 페이지에 명시되어 있으므로, 어느 메시지도 외부 이슈가 종료되었다고 알리지 않습니다. 미리보기에서는 메모리 내 Set만 변경하므로 페이지를 다시 로드하면 원래 메모 5개가 복원됩니다. 보관 목록을 포함해 레코드 제목과 설명을 textContent로 삽입합니다. 정해진 클래스 매핑은 두 가지 우선순위를 나타냅니다. 이렇게 하면 사용자 입력과 HTML 구조가 분리되어 예제의 데이터 흐름을 쉽게 살펴볼 수 있습니다. - 실제 일괄 처리 개수와 로컬에서만 적용되는 범위를 명시하세요. - 스냅샷이 유효한 동안 실행 취소 버튼을 사용할 수 있게 유지하세요. - 로컬 DOM 업데이트를 원격 작업이 성공적으로 해결된 것으로 표현하지 마세요. 지원 사양 읽기 ## CoreUI 디자인 시스템: 로컬 모듈보다 먼저 CoreUI 번들 로드 ### 로컬 모듈보다 먼저 CoreUI 번들 불러오기 전체 설정에서는 패키지의 dist 에셋을 로컬 공개 경로에 복사하고, app.js보다 먼저 coreui.bundle.min.js를 로드합니다. 이 번들은 coreui.Toast를 노출하고 data-coreui 속성에 탭 동작을 제공합니다. 이 구성에는 별도의 Bootstrap 런타임이 필요하지 않으며, 추가하면 소유 관계가 중복되어 혼란을 일으킬 수 있습니다. data-coreui-theme="light"로 라이트 테마를 명시합니다. 더 큰 애플리케이션에서는 CoreUI의 색상 모드 메커니즘을 적용할 수 있지만, 의미적 텍스트 색상과 표면 색상 조합을 함께 검토해야 합니다. 로컬 검증에서는 부분 선택, 2개 레코드 일괄 처리, 보관 탭 확인, 실행 취소로 복원, 390px 뷰포트를 점검했습니다. 지원 사양 읽기 ## CoreUI 디자인 시스템 컴포넌트 예시 ### 대기열, 보관 탭, 실행 취소 토스트 CoreUI 데이터 속성, 테이블 컨트롤, 의미가 명확한 우선순위 배지, 고정 토스트 ```

COREUI · REVIEW OPERATIONS

Keep the review queue moving.

Archive resolved design notes and undo the last local batch.

LOCAL WORKSPACE
Inbox
5design notes
Archived
0local resolutions
Review principle

Keep the original request visible, even after the note is resolved.

No notes selected
Design noteAreaPriorityOwner

Resolved in this local session

The original note and owner stay attached to the record.

    No notes archived yet.

    High

    Blocks a clear next action or access to important information.

    Medium

    Creates avoidable friction while the flow remains usable.

    Local archive updated

    No external issue tracker is connected.

    ``` 코드 참조 - 이 번들에서는 다른 라이브러리에서 복사한 data-bs-*가 아니라 data-coreui-* 속성을 사용하세요. - 테이블에는 이름이 지정된 로컬 가로 스크롤 영역이 있습니다. - 우선순위 색상에는 High/Medium 레이블을 함께 표시합니다. ### 일괄 선택 및 마지막 일괄 처리 실행 취소 안정적인 레코드 ID로 선택 항목과 보관 항목을 관리하고, 기본 Toast로 알림 표시 여부를 처리합니다. ``` const records=[{id:'R-201',title:'Explain the empty search result',detail:'Offer a way to clear the filter without losing the query.',area:'Search',priority:'High',owner:'Maya'},{id:'R-202',title:'Label the compact navigation icons',detail:'The collapsed sidebar needs understandable accessible names.',area:'Navigation',priority:'High',owner:'Jules'},{id:'R-203',title:'Keep form errors beside their fields',detail:'Retain entered values after a failed submission.',area:'Forms',priority:'High',owner:'Alex'},{id:'R-204',title:'Align the table’s numeric column',detail:'Right-align quantities so differences can be scanned.',area:'Tables',priority:'Medium',owner:'Sam'},{id:'R-205',title:'Clarify the download format',detail:'Show the file type before the visitor starts the download.',area:'Content',priority:'Medium',owner:'Maya'}];const archived=new Set(),selected=new Set();let lastBatch=[];const q=s=>document.querySelector(s),toast=coreui.Toast.getOrCreateInstance(q('#undo-toast'),{autohide:false}); function render(){const inbox=records.filter(r=>!archived.has(r.id));q('#inbox-rows').replaceChildren();q('#archive-list').replaceChildren();records.forEach(r=>{if(archived.has(r.id)){let li=document.createElement('li');li.className='list-group-item px-0';let title=document.createElement('strong'),detail=document.createElement('p');title.textContent=`${r.id} · ${r.title}`;detail.className='small text-body-secondary mb-0 mt-1';detail.textContent=`${r.owner} · ${r.detail}`;li.append(title,detail);q('#archive-list').append(li);return;}let tr=document.createElement('tr');tr.innerHTML='

    ';let cells=tr.children,check=tr.querySelector('input');check.setAttribute('aria-label',`Select ${r.id}: ${r.title}`);check.checked=selected.has(r.id);check.onchange=()=>{check.checked?selected.add(r.id):selected.delete(r.id);sync();};cells[1].querySelector('strong').textContent=r.title;cells[1].querySelector('p').textContent=r.detail;cells[2].textContent=r.area;let badge=tr.querySelector('.badge');badge.classList.add(r.priority==='High'?'bg-danger-subtle':'bg-warning-subtle',r.priority==='High'?'text-danger-emphasis':'text-warning-emphasis');badge.textContent=r.priority;cells[4].textContent=r.owner;q('#inbox-rows').append(tr);});q('#inbox-count').textContent=inbox.length;q('#archive-count').textContent=archived.size;q('#inbox-empty').hidden=inbox.length!==0;q('#archive-empty').hidden=archived.size!==0;sync();} function sync(){let total=records.length-archived.size;q('#selection').textContent=selected.size?`${selected.size} ${selected.size===1?'note':'notes'} selected`:'No notes selected';q('#archive').disabled=!selected.size;q('#select-all').disabled=!total;q('#select-all').checked=total>0&&selected.size===total;q('#select-all').indeterminate=selected.size>0&&selected.size{selected.clear();if(e.target.checked)records.filter(r=>!archived.has(r.id)).forEach(r=>selected.add(r.id));render();};q('#archive').onclick=()=>{lastBatch=[...selected];lastBatch.forEach(id=>archived.add(id));selected.clear();render();q('#toast-copy').textContent=`${lastBatch.length} ${lastBatch.length===1?'note was':'notes were'} archived locally. You can undo this most recent batch.`;q('#undo').disabled=false;toast.show();q('#result').textContent='The archive is local. No external issue tracker was changed.';};q('#undo').onclick=()=>{let count=lastBatch.length;lastBatch.forEach(id=>archived.delete(id));lastBatch=[];q('#undo').disabled=true;render();toast.hide();q('#result').textContent=`Restored ${count} ${count===1?'note':'notes'} to the inbox.`;};render(); ``` 코드 참조 - 모두 선택은 선택됨, 선택 안 됨, 일부 선택 상태를 나타냅니다. - 실행 취소를 선택하면 가장 최근 일괄 처리의 ID만 정확히 복원됩니다. - 모든 레코드 텍스트는 textContent로 삽입합니다. ### 원래 대기열의 밀도 기본 CoreUI 카드와 테이블 스타일을 활용한 페이지 구성입니다. ``` html,body{min-height:0;height:auto}body{background:var(--cui-tertiary-bg)}.review-desk{max-width:1120px;padding:32px;margin:auto}.desk-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:28px}.eyebrow{color:var(--cui-primary);font-size:11px;font-weight:700;letter-spacing:.12em}h1{font-size:32px;line-height:1.2;margin:12px 0}.desk-heading p:last-child{font-size:15px;line-height:1.6}.metric{height:100%}.metric strong{display:inline-block;font-size:32px;line-height:1.2;margin:12px 10px 0 0}.metric span{font-size:12px;color:var(--cui-secondary-color)}.context-card{background:var(--cui-primary-bg-subtle);border-color:var(--cui-primary-border-subtle)}.context-card p{font-size:14px;line-height:1.6;color:var(--cui-primary-text-emphasis)}.batch-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px}.table{min-width:740px;font-size:14px}.table th,.table td{padding:16px}.table th:first-child,.table td:first-child{width:48px}.table td:nth-child(2){max-width:380px}.table td:nth-child(2) p{line-height:1.5}.table th{font-size:12px;color:var(--cui-secondary-color);font-weight:600}.empty-copy{padding:24px;margin:0}.decision-key{display:grid;grid-template-columns:max-content 1fr;align-items:start;gap:10px 14px;margin-top:24px;font-size:12px;color:var(--cui-secondary-color)}.decision-key p{margin:0;line-height:1.6}.toast-container{max-width:520px}[hidden]{display:none!important}@media(max-width:650px){.review-desk{padding:24px 14px}.desk-heading{flex-direction:column;gap:4px}h1{font-size:28px}.metric strong{font-size:28px}.batch-bar{padding:14px}.table-responsive:focus-visible{outline:3px solid var(--cui-primary);outline-offset:-3px}} ``` 코드 참조 - 테이블 너비 740px는 애플리케이션의 가독성을 고려한 선택이며, CoreUI 기본값이 아닙니다. ## CoreUI 디자인 시스템 에이전트 설정 ### 구현 시작점 Bootstrap 5.9.0용 CoreUI을 검증했습니다. 제공된 app.js는 전체 대기열 마크업을 전제로 하며 네트워크 작업은 수행하지 않습니다. HTML 래퍼에는 전체 본문 마크업이 포함되어 있습니다. 제공된 상호작용 및 CSS 예시는 여기에 지정된 파일명으로 저장하세요. ```

    COREUI · REVIEW OPERATIONS

    Keep the review queue moving.

    Archive resolved design notes and undo the last local batch.

    LOCAL WORKSPACE
    Inbox
    5design notes
    Archived
    0local resolutions
    Review principle

    Keep the original request visible, even after the note is resolved.

    No notes selected
    Design noteAreaPriorityOwner

    Resolved in this local session

    The original note and owner stay attached to the record.

      No notes archived yet.

      High

      Blocks a clear next action or access to important information.

      Medium

      Creates avoidable friction while the flow remains usable.

      Local archive updated

      No external issue tracker is connected.

      ``` ### 프로젝트를 위한 프롬프트 ``` CoreUI 5.9.0 디자인 리뷰 운영 데스크를 바탕으로 시작하세요. 기본 탭과 실행 취소 토스트는 data-coreui 속성으로 유지하고, 리뷰 레코드 5개와 선택된 ID 집합을 보존하며, 선택 상태를 바탕으로 일부 선택 상태를 계산하세요. 선택한 항목을 일괄 보관하고 보관 탭에 표시한 다음 실행 취소로 마지막 일괄 처리를 복원할 수 있게 하세요. 테이블의 가로 스크롤 영역을 분리하고 선택 상태와 보관 여부를 구분하세요. 호환되는 CoreUI 번들을 사용하세요. Bootstrap 속성 이름으로 대체하거나 서버 측에서 보관한다고 안내하지 마세요. ``` ## CoreUI 디자인 시스템 출처 및 범위 Bootstrap 5.9.0 무료 컴포넌트용 CoreUI입니다. 테마 기본값과 독자적인 밀도 설정을 구분합니다. 보관과 실행 취소는 로컬 샘플 레코드에만 적용됩니다. - 소개 CSS 및 번들에 포함된 JavaScript와 일치합니다. - CSS 변수 런타임 테마 사용자 지정 - 색상 의미적 테마 역할 - 타이포그래피 기본 타이포그래피 - 탭 데이터 속성 및 패널 의미 구조 - 토스트 고정 알림 및 컴포넌트 메서드 - 체크박스 기본 체크박스 상태 - 테이블 반응형 테이블 구성 ## CoreUI 디자인 시스템 관련 리소스 ### daisyUI CSS 네이티브 초대장 제작 도구로, daisyUI의 시맨틱 테마 5종, 쌍을 이루는 콘텐츠 색상, 라디오 버튼 그룹, 범위 입력 컨트롤, 브라우저 유효성 검사, 실제 대화상자를 통한 검토 단계를 보여 줍니다. ### Element Plus Element Plus의 실제 Transfer 모델, 필터, 비활성화 옵션을 사용해 모듈 선택 작업대를 구성하세요. 검증된 색상, 글자 크기, 컨트롤 치수를 적용하세요. ### Flowbite 기본 Flowbite 4 아코디언과 드로어 구성에 검증된 의미적 테마 별칭, 고정 포장 체크리스트, 접근성 높은 로컬 자재 메모 워크플로를 더했습니다. - [구현 레퍼런스](https://coreui.io/bootstrap/docs/components/navs-tabs/) - [출처](https://coreui.io/bootstrap/docs/customize/color/) - [출처](https://coreui.io/bootstrap/docs/content/typography/) - [출처](https://coreui.io/bootstrap/docs/customize/css-variables/) - [출처](https://coreui.io/bootstrap/docs/layout/gutters/) - [지원 사양 읽기](https://coreui.io/bootstrap/docs/getting-started/introduction/) - [지원 사양 읽기](https://coreui.io/bootstrap/docs/customize/color/) - [지원 사양 읽기](https://coreui.io/bootstrap/docs/content/typography/) - [지원 사양 읽기](https://coreui.io/bootstrap/docs/components/navs-tabs/) - [지원 사양 읽기](https://coreui.io/bootstrap/docs/forms/checks-radios/) - [지원 사양 읽기](https://coreui.io/bootstrap/docs/components/toasts/) - [지원 사양 읽기](https://coreui.io/bootstrap/docs/content/tables/) - [코드 참조](https://coreui.io/bootstrap/docs/components/navs-tabs/) - [코드 참조](https://coreui.io/bootstrap/docs/components/toasts/) - [코드 참조](https://coreui.io/bootstrap/docs/content/tables/) - [소개 CSS 및 번들에 포함된 JavaScript와 일치합니다.](https://coreui.io/bootstrap/docs/getting-started/introduction/) - [CSS 변수 런타임 테마 사용자 지정](https://coreui.io/bootstrap/docs/customize/css-variables/) - [색상 의미적 테마 역할](https://coreui.io/bootstrap/docs/customize/color/) - [타이포그래피 기본 타이포그래피](https://coreui.io/bootstrap/docs/content/typography/) - [탭 데이터 속성 및 패널 의미 구조](https://coreui.io/bootstrap/docs/components/navs-tabs/) - [토스트 고정 알림 및 컴포넌트 메서드](https://coreui.io/bootstrap/docs/components/toasts/) - [체크박스 기본 체크박스 상태](https://coreui.io/bootstrap/docs/forms/checks-radios/) - [테이블 반응형 테이블 구성](https://coreui.io/bootstrap/docs/content/tables/)