Img Guide
이미지를 마크업하는 방법은 img태그를 사용해 전경 처리 하는 법과
background-image를 사용해 후경으로 처리하는 방법이 있습니다.
이 둘을 처리하는 방법에는 정보의 목적에 따라 구분됩니다.
img로 마크업하는 경우, 의미가 있는 이미지일 경우 alt(대체텍스트)를 필수적으로 기입하고
부득이하게 꾸밈요소로써 사용할 경우 해당 값을 비워놔야 합니다.
- Img 태그
일반 이미지 태그
예시)alt="기니피그 두 마리가 앉아있는 모습"
* 대부분의 스크린 리더에서 "이미지" 단어는 자동으로 추가되므로 굳이 기입하지 않아도 됩니다.
- Img 태그 > QR코드, 바코드
QR 코드나 바코드같은 이미지 정보는 대체 텍스트로 연결 링크를 제공해야합니다.
예시)alt="www.url.com 바로가기"
- Background 처리
의미없는 꾸밈 요소, 아이콘 등
예외적으로 개발 생산성, 유지보수를 위해 아이콘 시스템은 background-image로 처리합니다.
리스트에 포함된 불릿아이콘
아이콘 시스템
HTML
CSS