키친싱크

알림

참고

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

팁

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

중요

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

경고

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

주의

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

참고

내용이 많은 알림:

• inline code가 들어간 목록 항목
• 컴포넌트 목록 링크가 있는 두 번째 항목

echo "code inside an alert"

상태 배지

인라인 배지: ● 사용 가능 ◐ 일부 구현 ○ 계획

태그 배지: beta experimental

그림

키보드 키

Ctrl+K나 /만 눌러도 검색이 열립니다. 복사는 Cmd+C입니다.

표

코드

인라인 code, 펜스 코드 블록, 가로로 스크롤되는 긴 줄:

# frozen_string_literal: true
Jekyll::Hooks.register :site, :post_write do |site|
  puts "Built #{site.pages.size} pages into #{site.dest} with a deliberately long line to test horizontal scrolling"
end

- theme: minima
+ theme: jekyll-theme-modootoday

타이포그래피

굵게, 기울임, 취소선, code, 컴포넌트 목록 링크가 있는 문단입니다. 각주도 쓸 수 있습니다.¹

3단계 제목

4단계 제목

1. 번호 항목
2. 번호 항목
   • 중첩 항목
   • 중첩 항목

• 완료한 작업
• 남은 작업

알림이 아닌 일반 인용문입니다.

구분선 다음의 글입니다.

코드 제목과 diff

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

theme: jekyll-theme-modootoday

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

진행률

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

번역 60% 60%

임베드

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

로딩과 스켈레톤

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

불러오는 중…

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

목록

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

• 설치
• 설정
• 접근성

제목이 있는 항목:

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