화면 크기 조정 Resize

화면 크기 조정은 텍스트를 포함하여 화면에 표시되는 정보를 확대하거나 축소하는 데 사용되는 요소이다. 사용자에 따라 읽을 수 있는 텍스트의 크기, 조작할 수 있는 요소의 크기는 다르다. 디바이스나 사용자 에이전트가 지원하는 여러 가지 설정 기능을 활용하면 사용자가 선호하는 방식으로 콘텐츠의 표시 방식을 수정할 수 있다. 그러나 화면 크기 조정 기능을 필요로 하는 사용자는 관련 기능을 찾아 설정하는 데 어려움을 겪을 가능성이 높으므로 서비스 자체적으로 화면 크기 조정 기능을 제공하고 접근하기 쉽게 만드는 것이 중요하다.

KRDS 가이드

기본

새 창에서 보기

tsx

import { Resize } from '@krds.ui/react'

export default function ResizeDemo() {
  return <Resize />
}

Resize

Props

이름	타입	기본값	설명
`value`	`ResizeScale`	-	현재 선택된 크기
`defaultValue`	`ResizeScale`	`md`	기본 선택된 크기
`onChange`	`((scale: ResizeScale) => void)`	-	크기 변경 시 호출되는 콜백 함수
`buttonText`	`string`	`화면크기`	드롭다운 버튼 텍스트
`resetText`	`string`	`초기화`	초기화 버튼 텍스트
`labels`	`{ sm: string; md: string; lg: string; xlg: string; xxlg: string; }`	`{ sm: '작게', md: '보통', lg: '조금 크게', xlg: '크게', xxlg: '가장크게' }`	각 크기 옵션의 라벨
`className`	`string`	-	사용자 정의 클래스명

화면 크기 조정 Resize ​

기본 ​

Resize ​

Props

화면 크기 조정 Resize

기본

Resize