이미지 스프라이트 image sprite
웹사이트의 로딩시간을 줄이기 위해 하나의 이미지 파일에 여러개의 이미지가 포함되어 있는 것을 말한다.
주로 웹페이지들 곳곳에 들어가는 작은 아이콘들을 모아 하나의 이미지 스프라이트로 만들고 css의 background-position으로 가로 세로 위치를 지정해 사용한다.
https://spritegen.website-performance.org/
CSS Sprite Generator, Editor, and Code
--> --> --> CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elemen
spritegen.website-performance.org
사용법은 매우 간단한데
위 주소로 들어가서 clear 버튼을 한번 눌러준 후
open버튼을 클릭해서 스프라이트 이미지 만들 이미지들을 추가해주면 된다.
추가한 이미지들이 나오고 우측에 설정창이 나온다.
각자 취향에 맞게 레이아웃 설정해서 save버튼을 누르면 설정창이 사라진다.
아무것도 없다고 당황하지말고 연두색의 다운로드 버튼을 누르면 새 레이어로 요렇게 나온다.
하단 첫번째 버튼 spritesheet을 누르면 png 이미지만 저장되고
탭에 png / css / html 로 나누어져 사용하기 쉽게 이미지와 코드를 전부 제공해준다.
'디자인 정보' 카테고리의 다른 글
| [css] box-shadow (0) | 2020.06.11 |
|---|---|
| [css] 글자 아래 밑줄 생기는 hover effect (0) | 2020.06.11 |
| 너무 간단한 웹폰트 적용, 구글 웹폰트 (0) | 2020.03.06 |
| 2020 UI 디자인 트렌드, 뉴모피즘 (0) | 2020.03.06 |
| 본고딕 웹폰트 적용하기 (0) | 2020.02.11 |