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

티스토리 뷰

이론/CSS

millfeel1298 2021. 10. 27. 22:51

Naver Corporation

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

www.navercorp.com

- 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

[CSS] <a>는 transform이 적용되지 않는다. (0)	2021.10.28
[CSS3] nth-child와 nth-of-type의 차이 (0)	2021.10.28
[CSS] table-layout (0)	2021.07.07
[CSS] word-break / overflow-wrap(=word-wrap) (0)	2021.07.07
[CSS] text-overflow (0)	2021.07.07

공지사항

최근에 올라온 글

최근에 달린 댓글

링크

글 보관함