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의 기본 테마는 Less를 통해 빌드됩니다. 따라서 이 문서에는 청록색 버튼의 배경색, 카드의 테두리 반경처럼 실제 선택자에 적용된 값이 기록되어 있습니다. 컴파일된 패키지에서 제공하지 않는 --fomantic-primary 토큰 API를 임의로 만들어 내지 않습니다. 테마를 크게 변경하려면 문서화된 테마 빌드와 변수 파일을 사용해야 합니다.
이름이 지정된 청록색 변형은 기본 파란색 변형과 별개입니다. 이 서가에서는 읽기 목록 추가 작업에 청록색을 사용하고, 원본 표지 삽화에는 종이색, 세이지색, 따뜻한 점토색을 사용합니다. 이 표지는 애플리케이션용 삽화이며 공식 팔레트 견본이 아닙니다. 버튼의 호버, 포커스, 눌림 상태에는 Fomantic 기본값이 그대로 적용됩니다.
기본 사이트 스타일시트는 루트와 본문 텍스트 크기를 14픽셀로 설정합니다. 따라서 버튼과 카드의 0.28571429rem 반경은 약 4픽셀입니다. 이 rem 값을 루트 크기가 16픽셀인 다른 환경에 복사하면 레이아웃이 달라집니다. 그래서 이 문서에는 설명 없이 반경만 나열하는 대신 루트 크기도 함께 표시합니다.
기본 글꼴은 Lato이며, 컴파일된 패키지에는 로컬 글꼴 파일이 포함되어 있습니다. 이 독립형 미리보기는 웹 글꼴 서비스를 요청하는 대신 해당 글꼴 리소스를 포함합니다. 페이지 제목에는 원본에서 재정의한 34픽셀 크기를 적용하고, 카드 설명에는 간결한 본문 글자 크기와 여유 있는 애플리케이션 줄 높이를 사용합니다.
각 기본 카드는 장식용 표지, 주제와 설명을 담는 콘텐츠 블록, 평점을 담는 콘텐츠 블록, 읽기 목록 추가 동작을 담는 추가 콘텐츠 블록으로 구성됩니다. 유동형 카드는 패키지의 기본 너비인 290px을 사용하는 대신 원본 3열 그리드를 채웁니다. 페이지에서 각 카드의 개별 여백을 제거해 그리드가 일관된 간격을 제공하도록 합니다.
각 프롬프트는 서로 다른 읽기 과제를 제시합니다. 자간 비교, 요소를 제거해 여백 살펴보기, 맥락에 따른 색상 변화 관찰이 그것입니다. 표지는 타이포그래피와 직사각형, 겹치는 색면으로 이러한 과제를 시각적으로 표현합니다. 모두 독자적으로 만든 프롬프트이며 출판사의 지지를 암시하지 않습니다.
평점 모듈은 최대값을 5로, 초기화를 허용하도록 설정합니다. onRate는 현재 숫자 값을 받아 화면에 표시되는 점수와 접근성 슬라이더 값을 동기화합니다. 평점 지우기 동작은 활성 클래스를 직접 제거하는 대신 모듈의 clear rating 동작을 호출합니다.
기본 별점 모듈은 마우스 입력을 지원하지만, 이 예제에서는 키보드 동작도 명시적으로 추가합니다. 평점 컨테이너는 0부터 5까지의 범위를 가진 이름 지정 슬라이더입니다. 화살표 키로 한 단계씩 변경하고, Home 키로 지우며, End 키로 5점을 선택합니다. 모든 입력 경로에서 set rating을 호출하므로 표시되는 별점과 애플리케이션 출력이 같은 모듈 상태를 공유합니다.
주제 선택 메뉴는 dropdown 초기화 함수를 통해 기본 Fomantic 드롭다운으로 바뀝니다. onChange 콜백은 선택한 값과 일치하지 않는 주제의 카드를 숨기고 표시되는 프롬프트 수를 업데이트합니다. 전체 주제 옵션을 선택하면 서가 전체가 다시 표시됩니다. 메뉴가 움직일 때는 transition 모듈을 사용합니다.
필터링할 때 카드를 삭제한 뒤 다시 만들지 않습니다. 카드가 숨겨져도 기존 평점과 읽기 목록 포함 여부는 원래 레코드에 유지됩니다. 이는 의도된 동작입니다. 서가를 좁히는 것은 표시 방식을 바꾸는 작업이지, 사용자가 앞서 선택한 항목을 지우는 작업이 아닙니다. 따라서 현재 필터에 표시되지 않는 항목도 요약에 포함될 수 있습니다.
평점은 0~5점으로 관심도를 나타내고, 읽기 목록에 포함하는 것은 별도의 예/아니요 선택입니다. 사용자는 평점을 매기기 전에 토론할 프롬프트를 읽기 목록에 담아 둘 수 있습니다. 읽기 목록 버튼은 aria-pressed로 선택 상태를 나타내며, 추가와 제거에 따라 레이블을 바꿉니다. 요약에 표시할 이름은 안정적인 주제 ID를 저장하는 Set에서 가져옵니다.
상태 영역은 선택한 프롬프트를 설명할 뿐, 컬렉션이 원격으로 저장되었다고 주장하지 않습니다. 브라우저를 새로고침하면 이 예제의 데이터는 지워집니다. 여러 사람이 공유하는 실제 읽기 목록에는 저장 기능, 사용자 ID, 충돌 처리가 필요합니다. 카드 클래스를 추가한다고 이러한 기능이 생기는 것은 아닙니다.
별 아이콘은 스크린 리더가 세지 않아도 되도록 보조 기술에서 숨겨져 있습니다. 부모 슬라이더가 숫자 값과 레이블을 제공하기 때문입니다. 화면에 표시되는 ‘평가 전’ 또는 분수 형식의 값이 같은 의미를 전달합니다. 포커스가 표시될 때 윤곽선으로 활성 슬라이더를 나타내며, 지우기 버튼을 누르면 포커스가 해당 컨트롤로 돌아갑니다.
책 표지 모양도 장식 요소입니다. 실제 프롬프트 제목, 소요 시간, 설명은 카드 안의 텍스트로 유지됩니다. 좁은 화면에서는 기존 760px 중단점에서 카드가 세로로 쌓입니다. 예제는 컴파일된 body의 높이를 뷰포트 높이에서 초기화하고 가로 오버플로 숨김을 해제합니다. 따라서 삽입된 콘텐츠의 실제 높이를 사용하며 레이아웃 결함을 숨기지 않습니다.
일반 프로젝트에서는 semantic.css만 추출하고 테마 에셋을 빠뜨리는 대신 fomantic-ui-css 디렉터리 전체를 복사합니다. 컴파일된 스타일은 상대 경로로 Lato와 아이콘 글꼴 파일을 참조합니다. 아래 설정은 해당 경로를 유지하고 패키지 모듈보다 먼저 jQuery를 불러옵니다.
로컬 미리보기는 필요한 컴포넌트 스타일과 스크립트만 사용한 뒤, 참조된 에셋을 하나의 문서에 삽입합니다. 외부 글꼴을 요청하지 않습니다. 프로덕션 번들러에서는 이러한 에셋을 다르게 처리할 수 있지만, npm install이 성공했다고 가정하지 말고 배포할 페이지에서 글꼴 경로와 모듈 순서를 테스트해야 합니다.
Fomantic UI 2.9.4 및 jQuery 3.7.1에서 확인했습니다. 독립 실행형 예제는 필요한 글꼴 에셋을 삽입하고, 일반 설정은 패키지 기준 상대 경로를 유지합니다. HTML 래퍼에는 body 마크업 전체가 포함됩니다. 제공된 상호작용 예제와 CSS 예제는 여기에 참조된 파일명으로 저장하세요.
html
<!-- npm install [email protected][email protected] -->
<!-- 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개, 각 프롬프트의 평점 상태, 로컬 선택 목록 동작이 화면에 표시된 카드와 연결되도록 유지하세요. 평점 컨트롤에 추가된 명시적인 키보드 지원과 슬라이더 의미를 유지하고, 이에 맞는 테마 및 아이콘 에셋도 포함하세요. 선택 목록은 중복 추가를 방지하고 현재 항목을 명확히 보여야 합니다. 지원 티켓 처리 절차나 원격 추천 서비스가 아닙니다.
05
Fomantic UI 디자인 시스템 소스 및 범위
Fomantic UI 2.9.4와 jQuery 3.7.1을 사용합니다. 테마 값은 컴파일된 기본값이며, 독창적인 표지 그래픽과 키보드 기능 보강을 명시했습니다. 모든 선택은 로컬에 저장됩니다.
