KRDS Angular

화면 크기 조정 Resize ​

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

KRDS 가이드

기본 ​

크기를 고르면 document.body.style.zoom을 0.9~1.5배로 바꿔 화면 전체를 확대·축소하므로 예제를 별도 화면(iframe)에 띄웁니다. 고르면 목록을 닫고 초점을 버튼으로 돌려준 뒤 (closed)를 보냅니다. 초기화 버튼은 보통(1배)으로 되돌립니다. 현재 크기는 aria-pressed로 알리고, 목록은 Esc 키·바깥 클릭·초점 이탈로 닫힙니다.

새 창에서 보기
ts
import { Component } from '@angular/core'
import { KrdsResize } from '@krds.ui/angular'

@Component({
  selector: 'demo-resize-basic',
  imports: [KrdsResize],
  template: `
    <div style="height: 400px; padding: 20px">
      <krds-resize />
    </div>
  `
})
export default class ResizeBasic {}

양방향 바인딩 ​

[(scale)]로 고른 크기(sm 작게 · md 보통 · lg 조금 크게 · xlg 크게 · xxlg 가장 크게)를 주고받습니다. 처음 값을 주면 그 크기로 시작하고, 고른 값을 저장해 두었다가 다음 방문 때 다시 넘기면 사용자가 고른 크기를 유지할 수 있습니다. 값을 주지 않으면 사용자가 고르기 전까지 화면을 바꾸지 않고 '보통'으로 표시합니다.

새 창에서 보기
ts
import { Component, signal } from '@angular/core'
import { KrdsResize, type KrdsResizeScale } from '@krds.ui/angular'

@Component({
  selector: 'demo-resize-scale',
  imports: [KrdsResize],
  template: `
    <div style="height: 400px; padding: 20px">
      <krds-resize [(scale)]="scale" />
      <p>선택한 크기: {{ scale() }}</p>
    </div>
  `
})
export default class ResizeScale {
  // '조금 크게'로 시작한다. 고른 값을 저장해 두었다가 다음 방문 때 넘기면 사용자가 고른 크기를 유지할 수 있다
  readonly scale = signal<KrdsResizeScale>('lg')
}

KrdsResize ​

선택자 krds-resize

Inputs

이름타입기본값설명
[(scale)]'sm' | 'md' | 'lg' | 'xlg' | 'xxlg'-화면 크기 (넘기거나 고르기 전에는 화면을 바꾸지 않고 '보통'으로 표시)

Outputs

이름값설명
closedvoid크기를 골라 목록을 닫았을 때