본문 바로가기 메인메뉴 바로가기
이 누리집은 대한민국 공식 전자정부 누리집입니다.

달력

달력은 날짜와 관련된 정보와 기능을 제공하는 데 사용한다.

컴포넌트명

달력 (Calendar)

달력 (Calendar) 스타일 예시

  1. 1.연/월 탐색 버튼

    이전 또는 다음 연도, 월을 탐색하기 위한 버튼

  2. 2.오늘 날짜

    현재 날짜로 다른 상태의 날짜와 구분하기 위한 별도의 식별자와 함께 사용됨

  3. 3.선택된 날짜(선택)

    사용자가 선택한 날짜로 다른 상태의 날짜와 구분하기 위한 별도의 식별자와 함께 사용됨

  4. 4.활성화되지 않은 날짜

    비활성화된 날짜로 사용자가 선택할 수 없음

유형

Calendar

Type날짜의 상태에 따라 시각적으로 구분하여 사용한다.

Day

1

Day on

1

Day hover

1

Today

1

Disabled

1

코드

기본

코드 보기

가이드

  • 날짜의 여러 가지 상태, 정보의 범례는 일관성 있게 표현한다. 달력이 여러 개의 섹션이나 페이지에 반복적으로 사용될 경우 날짜의 여러 가지 상태 정보, 날짜에 표현된 정보의 범례(예 - 휴관일, 공휴일 등)를 시각적, 구조적으로 일관성 있게 표현하여 사용자가 학습 없이 효율적으로 콘텐츠를 확인할 수 있도록 해야 한다.
  • 날짜의 여러 가지 상태 정보가 서로 명확하게 구분되도록 표현한다. 날짜의 상태를 표현하는 경우 여러 가지 상태는 날짜의 텍스트, 배경색으로만 구분하지 않고 텍스트 굵기, 밑줄, 배경의 형태, 부가적인 식별자를 제공하여 명확하게 구분해야 한다. 오늘 날짜, 사용자가 선택한 날짜에는 별도의 텍스트 설명을 제공하여 보다 직관적으로 다른 날짜와 구분할 수 있다.