# Fomantic UI 디자인 시스템

## Fomantic UI 디자인 시스템 인터페이스 미리보기

기존 독서 질문 세 가지를 필터링하고, 별점이나 화살표 키로 평가한 뒤 토론 추천 목록에 추가하세요.

## Fomantic UI 디자인 시스템 디자인 참고 자료

Fomantic UI 2.9.4 컴파일된 기본 CSS을 직접 살펴봤습니다. 아래는 Less 기반 테마의 선택자 수준 기본값이며, 런타임 CSS 토큰을 임의로 만든 것이 아닙니다. 표지에 사용한 색상과 애플리케이션의 크기는 별도로 표시했습니다.

### 사이트 기본 타이포그래피

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| html font-size | 14px | 기본 rem 기준값. |
| body font-family | Lato, system-ui, platform and emoji fallbacks | 미리보기에는 로컬 Lato 폰트 데이터가 포함되어 있습니다. |
| body line-height | 1.4285em | 기본 글자 크기 14px 기준 약 20px입니다. |
| body text color | rgba(0, 0, 0, 0.87) | 기본 강조 텍스트. |
| h1 / h2 / h3 | 2rem / 1.71428571rem / 1.28571429rem | 자체 페이지별 재정의 전의 기본 제목 크기입니다. |
| heading line-height | 1.28571429em | 기본 제목 간격. |
### 기본 버튼

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| .ui.button background | #e0e1e2 | 기본 중립 버튼. |
| .ui.button border-radius | 0.28571429rem | 기본 루트 크기 기준 약 4px입니다. |
| .ui.teal.button background | #00b5ad | 추천 목록에 사용된 기본 청록색 동작 색상. |
| .ui.teal.button:hover | #009c95 | 기본 청록색 호버 상태. |
| .ui.teal.button:focus | #008c86 | 기본 청록색 포커스 배경. |
| .ui.teal.button:active | #00827c | 기본 청록색 누름 배경. |
| .ui.primary.button background | #2185d0 | 기본 파란색은 청록색으로 지정된 변형과 별개입니다. |
### 기본 카드 형태

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| .ui.card width | 290px | 기본 고정 너비이며, 이 애플리케이션에서는 유동형으로 바뀌어 그리드를 채웁니다. |
| .ui.card border-radius | 0.28571429rem | 기본 루트 크기 기준 약 4px입니다. |
| .ui.card box-shadow | 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5 | 기본 입체감과 윤곽선. |
| .ui.card margin | 1em 0 | 카드를 정렬하기 위해 자체 그리드의 간격을 0으로 재정의했습니다. |
| .ui.card transition | box-shadow 0.1s ease, transform 0.1s ease | 기본 카드 모션. |
### 별점 설정

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| maxRating | 4 by default; 5 in this example | 명시적으로 설정한 5점 척도는 접근성 슬라이더의 최댓값과 일치합니다. |
| initialRating | 0 | 사용자 상호작용 전에는 별점이 설정되지 않습니다. |
| clearable | auto by default; true in this example | 설정된 별점을 초기화할 수 있습니다. |
| interactive | true | 마우스 상호작용이 활성화되어 있습니다. |
| onRate(value) | Callback after a rating is selected | 텍스트 출력과 접근성 값이 동기화됩니다. |
### 원본 열람실 크기

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| Page padding | 36px 28px / 24px 18px mobile | 원본 레이아웃 간격입니다. |
| Grid gap | 22px | 원본 3열 서가입니다. |
| Page heading | 34px / 1.15; 29px mobile | 원본 제목 스타일 재정의입니다. |
| Cover height | 175px / 155px mobile | 원본 CSS 책 표지 삽화입니다. |
| Layout breakpoint | 760px | 원본의 단일 카드 열 전환입니다. |
## Fomantic UI 디자인 시스템 전체 가이드

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

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

## Fomantic UI 디자인 시스템 A CSS 어휘와 jQuery 모듈

### jQuery 모듈로 구성한 CSS 용어 모음

> Fomantic UI는 의미를 담은 클래스 문자열과 선택적인 상태 기반 모듈을 결합합니다. 이 서가에서는 ui fluid card, ui teal button, ui basic label을 사용해 모양을 지정합니다. 드롭다운과 평점은 jQuery를 통해 명시적으로 초기화합니다. 스타일시트만 불러와도 카드는 렌더링되지만, 동일한 상호작용까지 제공하지는 않습니다.

이 예제는 Fomantic UI 2.9.4와 jQuery 3.7.1을 고정 버전으로 사용합니다. transition 모듈을 dropdown보다 먼저 불러온 다음 rating을 불러옵니다. 별 모양의 정적 행을 보여 주고 상호작용이 있는 라이브러리 예제라고 하는 것보다, 이러한 의존성을 명확히 보여 주는 편이 유용합니다. 원본 애플리케이션 모듈은 카드 마크업이 생성된 뒤에만 실행됩니다.

지원 사양 읽기

## Fomantic UI 디자인 시스템의 컴파일 기본값은 런타임 토큰 이름이 아닙니다

### 컴파일된 기본값은 런타임 디자인 토큰 이름이 아닙니다

Fomantic의 기본 테마는 Less를 통해 빌드됩니다. 따라서 이 문서에는 청록색 버튼의 배경색, 카드의 테두리 반경처럼 실제 선택자에 적용된 값이 기록되어 있습니다. 컴파일된 패키지에서 제공하지 않는 --fomantic-primary 토큰 API를 임의로 만들어 내지 않습니다. 테마를 크게 변경하려면 문서화된 테마 빌드와 변수 파일을 사용해야 합니다.

이름이 지정된 청록색 변형은 기본 파란색 변형과 별개입니다. 이 서가에서는 읽기 목록 추가 작업에 청록색을 사용하고, 원본 표지 삽화에는 종이색, 세이지색, 따뜻한 점토색을 사용합니다. 이 표지는 애플리케이션용 삽화이며 공식 팔레트 견본이 아닙니다. 버튼의 호버, 포커스, 눌림 상태에는 Fomantic 기본값이 그대로 적용됩니다.

지원 사양 읽기

## Fomantic UI 디자인 시스템의 14픽셀 rem이 레이아웃을 바꿉니다

### rem 기준을 14px로 설정하면 전체 비율이 달라집니다

기본 사이트 스타일시트는 루트와 본문 텍스트 크기를 14픽셀로 설정합니다. 따라서 버튼과 카드의 0.28571429rem 반경은 약 4픽셀입니다. 이 rem 값을 루트 크기가 16픽셀인 다른 환경에 복사하면 레이아웃이 달라집니다. 그래서 이 문서에는 설명 없이 반경만 나열하는 대신 루트 크기도 함께 표시합니다.

기본 글꼴은 Lato이며, 컴파일된 패키지에는 로컬 글꼴 파일이 포함되어 있습니다. 이 독립형 미리보기는 웹 글꼴 서비스를 요청하는 대신 해당 글꼴 리소스를 포함합니다. 페이지 제목에는 원본에서 재정의한 34픽셀 크기를 적용하고, 카드 설명에는 간결한 본문 글자 크기와 여유 있는 애플리케이션 줄 높이를 사용합니다.

지원 사양 읽기

## Fomantic UI 디자인 시스템에서 콘텐츠와 동작을 구분하는 카드 구조

### 카드 구성 요소를 분리해 콘텐츠와 작업을 명확히 구분합니다

각 기본 카드는 장식용 표지, 주제와 설명을 담는 콘텐츠 블록, 평점을 담는 콘텐츠 블록, 읽기 목록 추가 동작을 담는 추가 콘텐츠 블록으로 구성됩니다. 유동형 카드는 패키지의 기본 너비인 290px을 사용하는 대신 원본 3열 그리드를 채웁니다. 페이지에서 각 카드의 개별 여백을 제거해 그리드가 일관된 간격을 제공하도록 합니다.

각 프롬프트는 서로 다른 읽기 과제를 제시합니다. 자간 비교, 요소를 제거해 여백 살펴보기, 맥락에 따른 색상 변화 관찰이 그것입니다. 표지는 타이포그래피와 직사각형, 겹치는 색면으로 이러한 과제를 시각적으로 표현합니다. 모두 독자적으로 만든 프롬프트이며 출판사의 지지를 암시하지 않습니다.

지원 사양 읽기

## Fomantic UI 디자인 시스템의 기본 평점 동작을 모든 입력 경로에서 사용하기

### 모든 입력 방식에서 기본 별점 동작을 호출하세요

평점 모듈은 최대값을 5로, 초기화를 허용하도록 설정합니다. onRate는 현재 숫자 값을 받아 화면에 표시되는 점수와 접근성 슬라이더 값을 동기화합니다. 평점 지우기 동작은 활성 클래스를 직접 제거하는 대신 모듈의 clear rating 동작을 호출합니다.

기본 별점 모듈은 마우스 입력을 지원하지만, 이 예제에서는 키보드 동작도 명시적으로 추가합니다. 평점 컨테이너는 0부터 5까지의 범위를 가진 이름 지정 슬라이더입니다. 화살표 키로 한 단계씩 변경하고, Home 키로 지우며, End 키로 5점을 선택합니다. 모든 입력 경로에서 set rating을 호출하므로 표시되는 별점과 애플리케이션 출력이 같은 모듈 상태를 공유합니다.

1. 평점으로 탭 이동한 다음 오른쪽 화살표를 두 번 눌러 5점 만점에 2점을 선택하세요.

2. End 키를 눌러 5점을 선택한 다음 Home 키를 눌러 평가 안 함으로 되돌리세요.

3. 별을 클릭하고 텍스트 출력과 접근성 값이 함께 업데이트되는지 확인하세요.

지원 사양 읽기

## Fomantic UI 디자인 시스템의 드롭다운 필터링은 숨겨진 상태를 유지합니다

### 드롭다운 필터링 후에도 숨겨진 상태가 유지됩니다

주제 선택 메뉴는 dropdown 초기화 함수를 통해 기본 Fomantic 드롭다운으로 바뀝니다. onChange 콜백은 선택한 값과 일치하지 않는 주제의 카드를 숨기고 표시되는 프롬프트 수를 업데이트합니다. 전체 주제 옵션을 선택하면 서가 전체가 다시 표시됩니다. 메뉴가 움직일 때는 transition 모듈을 사용합니다.

필터링할 때 카드를 삭제한 뒤 다시 만들지 않습니다. 카드가 숨겨져도 기존 평점과 읽기 목록 포함 여부는 원래 레코드에 유지됩니다. 이는 의도된 동작입니다. 서가를 좁히는 것은 표시 방식을 바꾸는 작업이지, 사용자가 앞서 선택한 항목을 지우는 작업이 아닙니다. 따라서 현재 필터에 표시되지 않는 항목도 요약에 포함될 수 있습니다.

지원 사양 읽기

## Fomantic UI 디자인 시스템에서 읽기 목록과 평점은 별개입니다

### 추천 목록은 별점과 별개로 관리됩니다

평점은 0~5점으로 관심도를 나타내고, 읽기 목록에 포함하는 것은 별도의 예/아니요 선택입니다. 사용자는 평점을 매기기 전에 토론할 프롬프트를 읽기 목록에 담아 둘 수 있습니다. 읽기 목록 버튼은 aria-pressed로 선택 상태를 나타내며, 추가와 제거에 따라 레이블을 바꿉니다. 요약에 표시할 이름은 안정적인 주제 ID를 저장하는 Set에서 가져옵니다.

상태 영역은 선택한 프롬프트를 설명할 뿐, 컬렉션이 원격으로 저장되었다고 주장하지 않습니다. 브라우저를 새로고침하면 이 예제의 데이터는 지워집니다. 여러 사람이 공유하는 실제 읽기 목록에는 저장 기능, 사용자 ID, 충돌 처리가 필요합니다. 카드 클래스를 추가한다고 이러한 기능이 생기는 것은 아닙니다.

지원 사양 읽기

## Fomantic UI 디자인 시스템에서 장식용 별점 이상의 숫자 의미를 유지하기

### 장식용 별점 이상의 숫자 의미를 유지하기

별 아이콘은 스크린 리더가 세지 않아도 되도록 보조 기술에서 숨겨져 있습니다. 부모 슬라이더가 숫자 값과 레이블을 제공하기 때문입니다. 화면에 표시되는 ‘평가 전’ 또는 분수 형식의 값이 같은 의미를 전달합니다. 포커스가 표시될 때 윤곽선으로 활성 슬라이더를 나타내며, 지우기 버튼을 누르면 포커스가 해당 컨트롤로 돌아갑니다.

책 표지 모양도 장식 요소입니다. 실제 프롬프트 제목, 소요 시간, 설명은 카드 안의 텍스트로 유지됩니다. 좁은 화면에서는 기존 760px 중단점에서 카드가 세로로 쌓입니다. 예제는 컴파일된 body의 높이를 뷰포트 높이에서 초기화하고 가로 오버플로 숨김을 해제합니다. 따라서 삽입된 콘텐츠의 실제 높이를 사용하며 레이아웃 결함을 숨기지 않습니다.

- 현재 숫자를 텍스트와 접근성 값으로 모두 제공합니다.

- 초기화와 선택 목록 변경에는 기본 버튼을 사용합니다.

- 그리드가 한 열로 바뀌어도 레이블과 전체 설명을 유지합니다.

지원 사양 읽기

## Fomantic UI 디자인 시스템: 스타일과 함께 글꼴 배포 또는 번들링

### 스타일과 함께 폰트를 제공하거나 번들에 포함하세요

일반 프로젝트에서는 semantic.css만 추출하고 테마 에셋을 빠뜨리는 대신 fomantic-ui-css 디렉터리 전체를 복사합니다. 컴파일된 스타일은 상대 경로로 Lato와 아이콘 글꼴 파일을 참조합니다. 아래 설정은 해당 경로를 유지하고 패키지 모듈보다 먼저 jQuery를 불러옵니다.

로컬 미리보기는 필요한 컴포넌트 스타일과 스크립트만 사용한 뒤, 참조된 에셋을 하나의 문서에 삽입합니다. 외부 글꼴을 요청하지 않습니다. 프로덕션 번들러에서는 이러한 에셋을 다르게 처리할 수 있지만, npm install이 성공했다고 가정하지 말고 배포할 페이지에서 글꼴 경로와 모듈 순서를 테스트해야 합니다.

지원 사양 읽기

## Fomantic UI 디자인 시스템 컴포넌트 예제

### 카드 3개로 구성된 독서 선반

기본 카드, 레이블, 버튼, 드롭다운 마크업, 평점 컨테이너.

```
<main class="reading-room"><header><div><p class="kicker">FOMANTIC UI · READING ROOM</p><h1>Make a shelf worth returning to.</h1><p class="intro">Rate three original reading prompts and build a local discussion shortlist.</p></div><span class="ui teal basic label">Local collection</span></header><div class="toolbar"><label for="topic">Show topic</label><select id="topic" class="ui selection dropdown"><option value="all">All topics</option><option value="type">Typography</option><option value="space">Space & rhythm</option><option value="color">Color</option></select><span id="visible-count">3 prompts</span></div><div class="book-grid"><article class="ui fluid card" data-topic="type" data-name="Letters in the margins"><div class="book-cover type-cover" aria-hidden="true"><span>Aa</span><small>FORM / COUNTERFORM</small></div><div class="content"><div class="meta">TYPOGRAPHY · 18 MIN</div><h2 class="header">Letters in the margins</h2><div class="description">Compare a narrow editorial column with a generous display line. Find where the rhythm changes.</div></div><div class="content"><label class="rating-label" id="label-type">Your interest</label><div class="ui huge star rating" data-rating="0" data-max-rating="5" role="slider" tabindex="0" aria-labelledby="label-type" aria-valuemin="0" aria-valuemax="5" aria-valuenow="0"></div><output class="score">Not rated</output><button class="ui tiny basic button clear-rating" type="button">Clear rating</button></div><div class="extra content"><button class="ui fluid teal button shortlist" aria-pressed="false">Add to shortlist</button></div></article><article class="ui fluid card" data-topic="space" data-name="The space between"><div class="book-cover space-cover" aria-hidden="true"><span></span><span></span><span></span><small>PAUSE / SEQUENCE</small></div><div class="content"><div class="meta">SPACE & RHYTHM · 12 MIN</div><h2 class="header">The space between</h2><div class="description">Remove one element from a crowded page. Rebalance the remaining space without adding decoration.</div></div><div class="content"><label class="rating-label" id="label-space">Your interest</label><div class="ui huge star rating" data-rating="0" data-max-rating="5" role="slider" tabindex="0" aria-labelledby="label-space" aria-valuemin="0" aria-valuemax="5" aria-valuenow="0"></div><output class="score">Not rated</output><button class="ui tiny basic button clear-rating" type="button">Clear rating</button></div><div class="extra content"><button class="ui fluid teal button shortlist" aria-pressed="false">Add to shortlist</button></div></article><article class="ui fluid card" data-topic="color" data-name="A color and its neighbor"><div class="book-cover color-cover" aria-hidden="true"><span></span><span></span><small>CONTEXT / CONTRAST</small></div><div class="content"><div class="meta">COLOR · 15 MIN</div><h2 class="header">A color and its neighbor</h2><div class="description">Place the same accent on two backgrounds. Describe the shift before changing its value.</div></div><div class="content"><label class="rating-label" id="label-color">Your interest</label><div class="ui huge star rating" data-rating="0" data-max-rating="5" role="slider" tabindex="0" aria-labelledby="label-color" aria-valuemin="0" aria-valuemax="5" aria-valuenow="0"></div><output class="score">Not rated</output><button class="ui tiny basic button clear-rating" type="button">Clear rating</button></div><div class="extra content"><button class="ui fluid teal button shortlist" aria-pressed="false">Add to shortlist</button></div></article></div><section class="ui message summary"><h2 class="header">Discussion shortlist</h2><p id="summary" role="status">No prompts selected. Add one to begin.</p><p class="scope">Ratings and selections stay in this browser page. These are original prompts, not published books.</p></section></main>
```

코드 참조

- 실제 책 표지가 아닌 독창적인 연습용 프롬프트입니다.

- 각 평점에는 자체 접근성 레이블과 숫자 범위가 있습니다.

- 선택 목록 작업은 aria-pressed를 제공합니다.

### 모듈 초기화 및 로컬 상호작용

드롭다운 필터링, 평점 동작 호출, 키보드 기능 보강, 선택 목록 상태.

```
const cards=[...document.querySelectorAll('.book-grid article')],selected=new Set();
$('#topic').dropdown({onShow(){this.setAttribute('aria-expanded','true');},onHide(){this.setAttribute('aria-expanded','false');},onChange(value){let count=0;cards.forEach(card=>{card.hidden=value!=='all'&&card.dataset.topic!==value;if(!card.hidden)count++;});document.querySelectorAll('.toolbar .menu .item').forEach(item=>item.setAttribute('aria-selected',String(item.dataset.value===value)));document.querySelector('#visible-count').textContent=`${count} ${count===1?'prompt':'prompts'}`;}});
const dropdown=document.querySelector('.toolbar div.dropdown');dropdown.setAttribute('role','combobox');dropdown.setAttribute('aria-label','Show topic');dropdown.setAttribute('aria-expanded','false');dropdown.setAttribute('aria-haspopup','listbox');dropdown.querySelector('.menu').setAttribute('role','listbox');dropdown.querySelectorAll('.menu .item').forEach(item=>{item.setAttribute('role','option');item.setAttribute('aria-selected',String(item.dataset.value==='all'));});
$('.ui.rating').each(function(){const node=this,$rating=$(node);$rating.rating({maxRating:5,clearable:true,onRate(value){node.setAttribute('aria-valuenow',value);node.setAttribute('aria-valuetext',value?`${value} out of 5`:'Not rated');node.closest('article').querySelector('.score').textContent=value?`${value} / 5`:'Not rated';}});node.setAttribute('aria-valuetext','Not rated');node.querySelectorAll('.icon').forEach(i=>i.setAttribute('aria-hidden','true'));node.addEventListener('keydown',e=>{let value=Number($rating.rating('get rating'));if(['ArrowRight','ArrowUp'].includes(e.key))value=Math.min(5,value+1);else if(['ArrowLeft','ArrowDown'].includes(e.key))value=Math.max(0,value-1);else if(e.key==='Home')value=0;else if(e.key==='End')value=5;else return;e.preventDefault();$rating.rating('set rating',value);});node.closest('article').querySelector('.clear-rating').onclick=()=>{$rating.rating('clear rating');node.focus();};});
cards.forEach(card=>{card.querySelector('.shortlist').onclick=e=>{const id=card.dataset.topic,button=e.currentTarget;if(selected.has(id)){selected.delete(id);button.textContent='Add to shortlist';button.setAttribute('aria-pressed','false');}else{selected.add(id);button.textContent='Remove from shortlist';button.setAttribute('aria-pressed','true');}const names=cards.filter(c=>selected.has(c.dataset.topic)).map(c=>c.dataset.name);document.querySelector('#summary').textContent=names.length?`${names.length} selected: ${names.join('; ')}.`:'No prompts selected. Add one to begin.';};});
```

코드 참조

- 이 파일보다 먼저 jQuery와 Fomantic 모듈을 불러와야 합니다.

- 화살표 키로 값을 변경할 때도 동일한 set rating 메서드를 사용합니다.

- 필터링은 평점이나 선택 상태를 삭제하지 않고 카드를 숨깁니다.

### 독창적인 선반 구성

반응형 그리드, 표지 그래픽, 명시적인 포커스 표시.

```
body{background:#f6f5f2}.reading-room{max-width:1120px;margin:auto;padding:36px 28px}.reading-room header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:32px}.kicker{font-size:11px;letter-spacing:.14em;font-weight:700;color:#008c86}h1{font-size:34px;line-height:1.15;margin:12px 0}.intro{color:#666;font-size:15px;line-height:1.6}.toolbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:24px;font-size:14px}.toolbar>label{font-weight:700}.toolbar>span{color:#767676;margin-left:auto}.book-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}.book-grid>.ui.card{margin:0;height:100%}.book-grid>.ui.card[hidden]{display:none}.book-cover{height:175px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.book-cover small{position:absolute;bottom:16px;left:18px;letter-spacing:.15em;font-size:9px;font-weight:700}.type-cover{background:#e2ccb0;color:#4a332a}.type-cover>span{font-family:Georgia,serif;font-size:90px;line-height:1}.space-cover{background:#ccd7d5;gap:10px}.space-cover>span{height:65px;width:25px;background:#3c6763}.space-cover>span:nth-child(2){height:90px;width:45px}.color-cover{background:#dcb9b0}.color-cover>span{width:85px;height:85px;background:#a85243}.color-cover>span:nth-child(2){width:50px;height:50px;border-radius:50%;background:#e6c57c;position:absolute}.book-grid .description{font-size:14px;line-height:1.6;min-height:88px}.rating-label{display:block;font-size:12px;font-weight:bold;margin-bottom:10px}.score{display:block;font-size:12px;color:#666;margin:8px 0 12px}.clear-rating{margin-bottom:0!important}.book-grid .ui.rating:focus-visible{outline:3px solid #00b5ad;outline-offset:4px}.summary{margin-top:28px!important}.scope{font-size:12px;color:#666}button:focus-visible{outline:3px solid #00b5ad!important;outline-offset:3px}@media(max-width:760px){.reading-room{padding:24px 18px}.reading-room header{flex-direction:column;gap:8px}h1{font-size:29px}.book-grid{grid-template-columns:1fr}.book-grid .description{min-height:0}.book-cover{height:155px}.toolbar>span{width:100%;margin-left:0}.toolbar .dropdown{min-width:180px}}
html,body{height:auto;min-height:0}body{min-width:0;overflow-x:visible}
```

코드 참조

- 삽입 시 컴파일된 사이트의 기본 height:100%를 auto로 초기화합니다.

- 레이아웃 오류를 숨기기 위해 body overflow를 사용하지 않습니다.

## Fomantic UI 디자인 시스템 에이전트 설정

### 구현 시작점

Fomantic UI 2.9.4 및 jQuery 3.7.1에서 확인했습니다. 독립 실행형 예제는 필요한 글꼴 에셋을 삽입하고, 일반 설정은 패키지 기준 상대 경로를 유지합니다. HTML 래퍼에는 body 마크업 전체가 포함됩니다. 제공된 상호작용 예제와 CSS 예제는 여기에 참조된 파일명으로 저장하세요.

```
<!-- npm install fomantic-ui-css@2.9.4 jquery@3.7.1 -->
<!-- Copy node_modules/fomantic-ui-css into public/vendor/fomantic-ui-css. -->
<!-- Copy node_modules/jquery/dist/jquery.min.js into public/vendor/jquery.min.js. -->
<link rel="stylesheet" href="/vendor/fomantic-ui-css/semantic.min.css">
<link rel="stylesheet" href="style.css">
<main class="reading-room"><header><div><p class="kicker">FOMANTIC UI · READING ROOM</p><h1>Make a shelf worth returning to.</h1><p class="intro">Rate three original reading prompts and build a local discussion shortlist.</p></div><span class="ui teal basic label">Local collection</span></header><div class="toolbar"><label for="topic">Show topic</label><select id="topic" class="ui selection dropdown"><option value="all">All topics</option><option value="type">Typography</option><option value="space">Space & rhythm</option><option value="color">Color</option></select><span id="visible-count">3 prompts</span></div><div class="book-grid"><article class="ui fluid card" data-topic="type" data-name="Letters in the margins"><div class="book-cover type-cover" aria-hidden="true"><span>Aa</span><small>FORM / COUNTERFORM</small></div><div class="content"><div class="meta">TYPOGRAPHY · 18 MIN</div><h2 class="header">Letters in the margins</h2><div class="description">Compare a narrow editorial column with a generous display line. Find where the rhythm changes.</div></div><div class="content"><label class="rating-label" id="label-type">Your interest</label><div class="ui huge star rating" data-rating="0" data-max-rating="5" role="slider" tabindex="0" aria-labelledby="label-type" aria-valuemin="0" aria-valuemax="5" aria-valuenow="0"></div><output class="score">Not rated</output><button class="ui tiny basic button clear-rating" type="button">Clear rating</button></div><div class="extra content"><button class="ui fluid teal button shortlist" aria-pressed="false">Add to shortlist</button></div></article><article class="ui fluid card" data-topic="space" data-name="The space between"><div class="book-cover space-cover" aria-hidden="true"><span></span><span></span><span></span><small>PAUSE / SEQUENCE</small></div><div class="content"><div class="meta">SPACE & RHYTHM · 12 MIN</div><h2 class="header">The space between</h2><div class="description">Remove one element from a crowded page. Rebalance the remaining space without adding decoration.</div></div><div class="content"><label class="rating-label" id="label-space">Your interest</label><div class="ui huge star rating" data-rating="0" data-max-rating="5" role="slider" tabindex="0" aria-labelledby="label-space" aria-valuemin="0" aria-valuemax="5" aria-valuenow="0"></div><output class="score">Not rated</output><button class="ui tiny basic button clear-rating" type="button">Clear rating</button></div><div class="extra content"><button class="ui fluid teal button shortlist" aria-pressed="false">Add to shortlist</button></div></article><article class="ui fluid card" data-topic="color" data-name="A color and its neighbor"><div class="book-cover color-cover" aria-hidden="true"><span></span><span></span><small>CONTEXT / CONTRAST</small></div><div class="content"><div class="meta">COLOR · 15 MIN</div><h2 class="header">A color and its neighbor</h2><div class="description">Place the same accent on two backgrounds. Describe the shift before changing its value.</div></div><div class="content"><label class="rating-label" id="label-color">Your interest</label><div class="ui huge star rating" data-rating="0" data-max-rating="5" role="slider" tabindex="0" aria-labelledby="label-color" aria-valuemin="0" aria-valuemax="5" aria-valuenow="0"></div><output class="score">Not rated</output><button class="ui tiny basic button clear-rating" type="button">Clear rating</button></div><div class="extra content"><button class="ui fluid teal button shortlist" aria-pressed="false">Add to shortlist</button></div></article></div><section class="ui message summary"><h2 class="header">Discussion shortlist</h2><p id="summary" role="status">No prompts selected. Add one to begin.</p><p class="scope">Ratings and selections stay in this browser page. These are original prompts, not published books.</p></section></main>

<script src="/vendor/jquery.min.js"></script>
<script src="/vendor/fomantic-ui-css/components/transition.min.js"></script>
<script src="/vendor/fomantic-ui-css/components/dropdown.min.js"></script>
<script src="/vendor/fomantic-ui-css/components/rating.min.js"></script>
<script src="app.js"></script>
<!-- Keep the themes/ assets beside the copied CSS. -->
```

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

```
제공된 jQuery 모듈 초기화와 Dropdown 및 Rating 컴포넌트를 사용해 Fomantic UI 2.9.4 독서 공간의 선택 목록을 확장하세요. 독서 프롬프트 3개, 각 프롬프트의 평점 상태, 로컬 선택 목록 동작이 화면에 표시된 카드와 연결되도록 유지하세요. 평점 컨트롤에 추가된 명시적인 키보드 지원과 슬라이더 의미를 유지하고, 이에 맞는 테마 및 아이콘 에셋도 포함하세요. 선택 목록은 중복 추가를 방지하고 현재 항목을 명확히 보여야 합니다. 지원 티켓 처리 절차나 원격 추천 서비스가 아닙니다.
```

## Fomantic UI 디자인 시스템 소스 및 범위

Fomantic UI 2.9.4와 jQuery 3.7.1을 사용합니다. 테마 값은 컴파일된 기본값이며, 독창적인 표지 그래픽과 키보드 기능 보강을 명시했습니다. 모든 선택은 로컬에 저장됩니다.

- 시작하기 컴파일된 에셋과 모듈 설정.

- 테마 설정 Less 기반 테마 사용자 지정.

- 사이트 전역 타이포그래피와 페이지 기본값.

- 카드 카드 콘텐츠 구조와 변형.

- 평점 평점 메서드와 onRate 콜백.

- 드롭다운 선택 초기화와 변경 처리.

- Button 기본 제공 변형 및 상태 이름.

## Fomantic UI 디자인 시스템 관련 리소스

### Foundation

XY Grid, Abide 사용자 지정 유효성 검사기, Reveal 확인 대화상자, 실제 Sass 설정, 완전한 로컬 통합 코드를 활용한 실제 작동하는 Foundation 증명 작업 공간입니다.

### Framework7

실제 스와이프아웃 동작, 명시적인 iOS 테마 값, 키보드로 접근할 수 있는 동작 열기 버튼, 초기화 전까지 완료된 연구도 유지하는 필터 목록을 갖춘 네이티브 Framework7 스케치북입니다.

### gluestack UI

gluestack의 실제 핵심 Button 및 Input 생성자, 명시적인 v5 시맨틱 색상, 완전한 React Native Web 소스를 사용해 야외 활동 장비 체크리스트를 만드세요. 유효성 검사, 키보드 동작, 안정적인 항목 식별, 로컬에서 계산되는 짐 꾸리기 진행률을 확인하세요.


- [구현 레퍼런스](https://fomantic-ui.com/modules/rating.html)
- [출처](https://github.com/fomantic/Fomantic-UI-CSS/blob/master/components/site.css)
- [출처](https://github.com/fomantic/Fomantic-UI-CSS/blob/master/components/button.css)
- [출처](https://github.com/fomantic/Fomantic-UI-CSS/blob/master/components/card.css)
- [출처](https://fomantic-ui.com/modules/rating.html)
- [출처](https://fomantic-ui.com/usage/layout.html)
- [지원 사양 읽기](https://fomantic-ui.com/introduction/getting-started.html)
- [지원 사양 읽기](https://fomantic-ui.com/usage/theming.html)
- [지원 사양 읽기](https://fomantic-ui.com/globals/site.html)
- [지원 사양 읽기](https://fomantic-ui.com/views/card.html)
- [지원 사양 읽기](https://fomantic-ui.com/modules/rating.html)
- [지원 사양 읽기](https://fomantic-ui.com/modules/dropdown.html)
- [지원 사양 읽기](https://fomantic-ui.com/elements/button.html)
- [코드 참조](https://fomantic-ui.com/views/card.html)
- [코드 참조](https://fomantic-ui.com/modules/rating.html)
- [코드 참조](https://fomantic-ui.com/usage/layout.html)
- [시작하기 컴파일된 에셋과 모듈 설정.](https://fomantic-ui.com/introduction/getting-started.html)
- [테마 설정 Less 기반 테마 사용자 지정.](https://fomantic-ui.com/usage/theming.html)
- [사이트 전역 타이포그래피와 페이지 기본값.](https://fomantic-ui.com/globals/site.html)
- [카드 카드 콘텐츠 구조와 변형.](https://fomantic-ui.com/views/card.html)
- [평점 평점 메서드와 onRate 콜백.](https://fomantic-ui.com/modules/rating.html)
- [드롭다운 선택 초기화와 변경 처리.](https://fomantic-ui.com/modules/dropdown.html)
- [Button 기본 제공 변형 및 상태 이름.](https://fomantic-ui.com/elements/button.html)