텍스트 목록

텍스트 목록은 계층 구조가 있는 텍스트 블록을 읽기 쉽게 구성한 것이다.

텍스트 목록은 계층 구조가 있는 텍스트 블록을 읽기 쉽게 구성한 것이다.

사용 지침

절차 안내·요건 나열처럼 짧은 문장이 반복되는 본문 영역에 사용하고, 절차에는 순서 있는 목록을, 비순차 항목에는 순서 없는 목록을 선택합니다.

예제

Default

레벨 1 — disc

  • 대한민국 국적을 보유한 만 19세 이상 성인
  • 주민등록 상 해당 지역에 거주하는 분
  • 소득 기준 중위소득 80% 이하 가구

레벨 2 — dash

  • 신청서를 작성합니다
  • 서류를 첨부합니다
  • 본인인증 후 제출합니다

레벨 3 — hollow

  • 개인정보는 서비스 제공 목적으로만 활용됩니다
  • 수집된 정보는 서비스 종료 시 즉시 파기됩니다
  • 외부 제3자에게 제공되지 않습니다
examples/text-list/TextListDefault.tsx
import { TextList, TextListItem } from "@/components/ui/dynamic/text-list"

export default function TextListDefault() {

Ordered

레벨 1 — decimal (1.)

  1. 정부24 홈페이지에 접속합니다.
  2. 원하는 민원 서비스를 검색합니다.
  3. 신청서를 작성하고 서류를 첨부합니다.
  4. 본인인증 후 최종 제출합니다.

레벨 2 — alpha (a.)

  1. 접수 후 담당자 배정
  2. 서류 검토 및 현장 확인
  3. 결과 통보 (문자 + 이메일)

레벨 3 — circle-num (①)

  1. 신분증 사본 준비
  2. 주민등록등본 발급
  3. 소득확인서류 첨부
examples/text-list/TextListOrdered.tsx
import { TextList, TextListItem } from "@/components/ui/dynamic/text-list"

export default function TextListOrdered() {

Mixed

혼합 계층: disc → dash → hollow

  • 신청 자격
    • 개인 자격
      • 만 19세 이상 대한민국 국민
      • 주민등록 상 해당 지역 거주자
    • 가구 자격
  • 제외 대상
examples/text-list/TextListMixed.tsx
import { TextList, TextListItem } from "@/components/ui/dynamic/text-list"

export default function TextListMixed() {

Mixed Ordered

순서 있는 혼합 계층: decimal → alpha → circle-num

  1. 온라인 신청
    1. 정부24 접속
      1. 회원가입 또는 로그인
      2. 본인인증 완료
      3. 서비스 검색
    2. 신청서 작성
  2. 방문 신청
examples/text-list/TextListMixedOrdered.tsx
import { TextList, TextListItem } from "@/components/ui/dynamic/text-list"

export default function TextListMixedOrdered() {

속성

이름타입기본값설명
aria-labelstring—Defines a string value that labels the current element. @see aria-labelledby.
classNamestring——
idstring——
onClickMouseEventHandler<HTMLUListElement | HTMLOListElement>——
styleCSSProperties——
tabIndexnumber——
typeenumdisc—