이미지 Image
이미지는 콘텐츠 양식 중 하나로 단일 이미지 또는 이미지 시퀀스로 표현될 수 있다. 이미지를 적절하게 사용하게 되면 사용자는 텍스트보다 효과적으로 정보를 인지할 수 있으며, 텍스트로 표현하기 어려운 정보를 전달할 수 있다.
기본
기본 <img>에 krdsImage를 붙입니다. alt(대체 텍스트)는 반드시 쓰고, 이미지가 전하는 정보를 구체적이고 간결하게 씁니다. 기본으로 loading="lazy"가 붙어 화면에 가까워질 때 불러오며, 화면 위쪽의 중요한 이미지는 loading="eager"로 바로 불러옵니다. src·width·height 등 나머지 속성은 기본 <img> 그대로 쓰고, 화면 폭보다 크면 비율을 유지한 채 줄어듭니다.
ts
import { Component } from '@angular/core'
import { KrdsImage } from '@krds.ui/angular'
@Component({
selector: 'demo-image-basic',
imports: [KrdsImage],
template: `
<img
krdsImage
src="/demo/image/floor-map.svg"
alt="정문으로 들어와 복도에서 오른쪽으로 가면 첫 번째 방이 민원실"
width="480"
height="270"
/>
`
})
export default class ImageBasic {}설명
이미지 아래에 설명을 붙이려면 <figure krdsFigure>로 감싸고 <figcaption>에 설명을 씁니다. 출처 링크처럼 마크업이 필요하면 <figcaption> 안에 그대로 넣습니다. 촬영자·출처 정보는 대체 텍스트가 아니라 설명에 넣습니다.
ts
import { Component } from '@angular/core'
import { KrdsFigure, KrdsImage } from '@krds.ui/angular'
@Component({
selector: 'demo-image-caption',
imports: [KrdsImage, KrdsFigure],
template: `
<figure krdsFigure>
<img
krdsImage
src="/demo/image/floor-map.svg"
alt="정문으로 들어와 복도에서 오른쪽으로 가면 첫 번째 방이 민원실"
width="480"
height="270"
/>
<figcaption>본관 1층 안내도</figcaption>
</figure>
`
})
export default class ImageCaption {}장식 이미지
정보 없이 꾸밈용인 이미지는 alt=""로 비워 화면낭독기가 건너뛰게 합니다.
ts
import { Component } from '@angular/core'
import { KrdsImage } from '@krds.ui/angular'
@Component({
selector: 'demo-image-decorative',
imports: [KrdsImage],
template: ` <img krdsImage src="/demo/image/pattern.svg" alt="" width="640" height="120" /> `
})
export default class ImageDecorative {}접근성
- 앱이 개발 모드일 때 KRDS 이미지 접근성 가이드에 어긋나는 대체 텍스트를 콘솔에 경고합니다(
isDevMode(), 배포 빌드에서는 출력하지 않음).'로고 이미지','강아지 사진'처럼 끝에 이미지·사진·그림·그래픽 등 역할과 겹치는 말을 붙인 경우- 대체 텍스트가 같은
<figure>의<figcaption>과 같은 경우
- 컴포넌트는 내용이 적절한지까지 확인하지 못합니다. 이미지와 인접한 글과 같은 내용, 이미지에 없는 정보는 넣지 않습니다.
- 글자를 이미지로 만들지 말고 마크업 텍스트로 제공합니다.
alt를 빠뜨린 경우는 컴포넌트가 잡지 않습니다.krdsImage를 붙이지 않은<img>까지 함께 검사하려면 angular-eslint의template/alt-text규칙을 씁니다.