컴포넌트

알림

● 사용 가능 GitHub 알림이 언어에 맞는 제목이 붙은 콜아웃이 됩니다. 종류는 note, tip, important, warning, caution 다섯 가지입니다. 스크린 리더는 각각을 노트(role="note")로 읽습니다.

> [!NOTE]
> 훑어보더라도 꼭 알아야 할 유용한 정보입니다.

> [!TIP]
> 더 쉽고 낫게 하는 데 도움이 되는 조언입니다.

> [!IMPORTANT]
> 목표를 이루려면 반드시 알아야 할 핵심 정보입니다.

> [!WARNING]
> 문제를 막으려면 바로 확인해야 하는 긴급한 정보입니다.

> [!CAUTION]
> 특정 동작의 위험이나 나쁜 결과를 경고합니다.

결과

참고

훑어보더라도 꼭 알아야 할 유용한 정보입니다.

팁

더 쉽고 낫게 하는 데 도움이 되는 조언입니다.

중요

목표를 이루려면 반드시 알아야 할 핵심 정보입니다.

경고

문제를 막으려면 바로 확인해야 하는 긴급한 정보입니다.

주의

특정 동작의 위험이나 나쁜 결과를 경고합니다.

내용이 있는 알림

알림 안에 목록과 코드를 넣을 수 있습니다. 표시가 있는 줄에는 다른 글자를 쓰지 마세요.

> [!TIP]
> 게시하기 전에:
>
> - `modootoday-check` 실행
> - `bundle exec jekyll serve`로 미리 보기

결과

팁

게시하기 전에:

• modootoday-check 실행
• bundle exec jekyll serve로 미리 보기

배지

● 사용 가능 정해진 접두어가 붙은 코드 스팬이 배지가 됩니다. status(available, partial, planned)와 tag가 있습니다. 상태 기호는 스크린 리더에서 숨기고 이름을 읽습니다.

`status:available` `status:partial` `status:planned`

`tag:beta`

결과

● 사용 가능 ◐ 일부 구현 ○ 계획

beta

키보드 키

● 사용 가능 kbd와 콜론으로 시작하는 코드 스팬이 키보드 키가 됩니다. 키는 공백 없이 +로 잇습니다.

`kbd:Ctrl+K`를 누르거나 `kbd:/`를 누르면 검색이 열립니다.

결과

Ctrl+K를 누르거나 /를 누르면 검색이 열립니다.

그림

● 사용 가능 이미지만 있는 문단 뒤에 강조만 있는 문단이 오면 캡션이 붙은 그림이 됩니다. 대체 텍스트는 필수입니다.

![왼쪽 Markdown 소스가 오른쪽에서 스타일이 적용된 페이지로 바뀌는 모습](../../assets/images/sample.svg)

*왼쪽은 Markdown, 오른쪽은 렌더링된 페이지입니다.*

결과

표

● 사용 가능 GFM 표는 작은 화면에서 페이지를 넘치지 않고 가로로 스크롤됩니다.

| 키 | 기본값 | 설명 |
|---|---|---|
| `color_scheme` | `auto` | 운영체제 설정을 따르거나 라이트·다크 중 하나로 고정 |
| `badges` | `true` | 상태 코드 스팬을 배지로 바꿈 |

결과

코드 블록

● 사용 가능 펜스 코드 블록은 구문 강조가 되고 첫 줄 끝에 복사 버튼이 붙습니다. 긴 줄은 스크롤되고 키보드로도 블록에 갈 수 있습니다.

```ruby
Jekyll::Hooks.register :site, :post_write do |site|
  puts "Built #{site.pages.size} pages"
end
```

결과

Jekyll::Hooks.register :site, :post_write do |site|
  puts "Built #{site.pages.size} pages"
end

코드 제목과 diff

● 사용 가능 펜스 코드 블록 바로 앞에 file과 콜론으로 시작하는 코드 스팬만 있는 줄을 두면 블록의 제목 표시줄이 됩니다. diff 블록은 추가된 줄과 삭제된 줄에 색을 입히고 더하기·빼기 기호를 유지합니다.

`file:_config.yml`

```yaml
theme: jekyll-theme-modootoday
```

```diff
- remote_theme: old/theme
+ theme: jekyll-theme-modootoday
```

결과

theme: jekyll-theme-modootoday

- remote_theme: old/theme
+ theme: jekyll-theme-modootoday

진행률

● 사용 가능 progress와 콜론 뒤에 0부터 100까지의 정수가 오는 코드 스팬은 값을 텍스트로 함께 보여 주는 레이블 있는 진행률 막대가 됩니다.

번역 `progress:60`

결과

번역 60% 60%

임베드

● 사용 가능 embed와 콜론, https URL, 선택 제목으로 된 코드 스팬만 있는 문단은 지연 로드되는 16:9 프레임이 되며, 로드되는 동안에도 자리를 유지합니다.

`embed:https://modootoday.github.io/jekyll-theme-modootoday/assets/images/sample.svg 샘플 페이지 그림`

결과

로딩과 스켈레톤

● 사용 가능 loading 또는 skeleton과 콜론으로 시작하는 코드 스팬은 스피너, 얇은 상단 막대, 자리 표시자(text, card, image, avatar, row)가 됩니다. 모두 role="status"와 스크린 리더용 로딩 레이블이 붙고, 사용자가 동작 줄이기를 켜면 움직이지 않습니다. 스타일은 별도 스타일시트에 있어 이 요소를 쓰는 페이지만 불러옵니다.

`loading:spinner`

`skeleton:avatar`
`skeleton:text`
`skeleton:card`

결과

불러오는 중…

불러오는 중… 불러오는 중… 불러오는 중…

목록

● 사용 가능 _config.yml에 modootoday.lists를 두면 일반 섹션과 페이지에 목록 스타일 두 가지가 적용됩니다. link_chips: true는 모든 항목이 링크 하나뿐인 목록을 칩 한 줄로 바꾸고, titled_items: true는 굵은 제목과 콜론으로 시작하는 항목에 제목과 구분자를 따로 줍니다. hero: {checks: true}는 위처럼 히어로의 첫 목록을 체크 표시 줄로 바꿉니다. 컴포넌트 섹션의 목록은 원래 스타일을 유지합니다.

• 설치
• 설정
• 접근성

제목이 있는 항목:

• 칩: 링크만 있는 목록
• 제목 항목: 굵은 제목, 콜론, 그다음 텍스트

내비게이션

● 사용 가능 헤더 메뉴는 _data/nav/main.yml에서 옵니다. items:가 있는 항목은 넓은 화면에서 드롭다운 묶음이 되고, 좁은 화면에서는 메뉴 버튼이 생깁니다. 열린 메뉴는 Esc로 닫습니다. 이 페이지의 헤더가 그 결과입니다.

- {title: Install, url: /install/}
- {title: Components, url: /components/}
- title: More
  items:
    - {title: Public API, url: /api/}

언어 선택기

● 사용 가능 languages:와 language_switcher: header를 설정하면 헤더에 언어 목록을 여는 지구본 버튼이 생깁니다. 언어가 늘어도 폭은 그대로입니다. 언어 이름은 각 언어로 적고, 현재 언어에는 aria-current가 붙습니다. 목록은 Esc로 닫습니다. 이 페이지 헤더의 지구본이 그 결과입니다.

modootoday:
  languages: [en, ko, ja]
  language_switcher: header

테마 전환

● 사용 가능 헤더 버튼으로 라이트와 다크를 바꾸고, 고른 값을 기억합니다. 한 모드로 고정하려면 color_scheme을 쓰세요. 이 페이지 헤더의 버튼이 그 결과입니다.

modootoday:
  color_scheme: auto   # auto | light | dark

아이콘과 로고

● 사용 가능 테마의 아이콘(지구본, 해와 달, 검색, 알림 종류, 복사, 편집, 이전·다음, 외부 링크, 이동 경로 화살표)은 currentColor를 쓰는 인라인 SVG라서 라이트·다크 모드를 따르고 추가 요청이 없습니다. 아이콘은 스크린 리더에서 숨기고, 아이콘만 있는 버튼에는 따로 이름을 붙입니다. 방향을 가리키는 화살표는 오른쪽에서 왼쪽으로 쓰는 페이지에서 뒤집힙니다. logo를 정하면 사이트 제목 앞에 modootoday 마크(또는 직접 만든 이미지)가 나오고, favicon을 정하면 같은 모양의 브라우저 아이콘이 붙습니다. 이 페이지의 헤더와 푸터가 그 결과입니다.

modootoday:
  logo: brand        # brand | /assets/img/logo.svg
  favicon: brand     # brand | /favicon.ico

검색

● 사용 가능 search.json 파일로 동작하는 클라이언트 검색이 헤더에 들어갑니다(role="search"). Ctrl+K나 /로 검색창에 갈 수 있습니다. 사이트 루트에 search.json을 두면 켜집니다. 이 사이트가 쓰는 파일을 복사해 쓰세요. 이 페이지 헤더의 검색창이 그 결과입니다.

이동 경로와 목차

● 사용 가능 문서 페이지에는 URL로 만든 이동 경로와, ##·### 제목으로 만든 목차가 붙습니다. 목차는 넓은 화면에서 옆에, 좁은 화면에서는 접는 상자로 보입니다. 레이아웃이 붙이므로 따로 쓸 소스는 없습니다. 끄려면 components에서 breadcrumb이나 toc를 빼세요. 이 페이지 위쪽과 옆이 그 결과입니다.

modootoday:
  components: [callout, badge, hero, cta, card, tabs, code-copy, nav, pagination, theme-toggle]

이전·다음

● 사용 가능 내비게이션에 있는 페이지에는 내비게이션 순서대로 이전·다음 링크가 붙습니다. 숨기려면 front matter에 pagination: false를 쓰세요. 이 페이지 아래쪽이 그 결과입니다.

---
title: Components
pagination: false
---

글과 아카이브

● 사용 가능 layout: post는 날짜, 글쓴이, 태그를 보여 줍니다(p.mt-post-meta).

---
layout: post
title: Hello
date: 2026-10-30
author: Won
tags: [release]
---

상태 범례