[CSS] sprite 스프라이트 이미지 사용 방법

이론/CSS

millfeel1298 2021. 10. 27. 22:51

Naver Corporation

네이버(주) 회사 소개, 주요 서비스, 투자 및 채용 정보 제공

www.navercorp.com

PC인 경우

- background-size는 이미지의 크기와 동일하게 설정한다.

- background-position은 포토샵 좌표 값과 동일하다.

- width, height는 이미지와 1:1 비율이다.

모바일 레티나 디스플레이는 해상도가 2배이기 때문에 (원본 이미지 크기 / 2)를 해서 background-size를 설정한다.

background-position도 (원본 이미지 크기 / 2)

width, height도 (원본 이미지 크기 / 2)

SVG도 가능하다

SVG 스프라이트 - Graphics ARIA Guidebook

동일한 문서에 SVG 심볼이 있으니, 심볼 ID를 사용해 바로 문서에서 재사용 할 수 있습니다. 앞서 이미지를 첨부한 경우보다 코드가 간결해지는 장점이 있습니다. 하지만, 여러 문서에서 동일한 SV

a11y.gitbook.io