[CSS] Image-Sprite
2020. 4. 3.
Image-Sprite(이미지 스프라이트)란 하나의 이미지 파일에 여러 개의 이미지를 넣어 관리하는 것이다. 백문이 불여일견, 바로 이미지 파일로 보자. 보통 게임같은 애니메이션이 들어간 곳에서 쓰이며, 하나의 이미지에서 픽셀(px) 위치만 다르게하여 잘라 쓴다. 왜냐하면 사용된 이미지가 많을 경우, 웹 브라우저가 이미지 수 만큼 서버에 요청해야 해서 로딩 시간이 오래 걸리기 때문이다. 인스타그램의 좋아요, 댓글, 책갈피 기능도 HTML로 값을 다르게 주면 위치가 바뀌는걸 볼 수 있다. 이미지 스프라이트는 CSS의 background 속성으로 바꿀 수 있다. background 속성 background는 font 속성과 비슷하게 세부적인 속성들을 한 번에 쓸 수 있다. 속성 의미 값 background-..