[CSS] 이미지스프라이트 기법 - 가상요소 사용

이미지 스프라이트

 

하나의 투명한 png 이미지 파일에 사용할 여러 가지 이미지를 배치해서 사용하는 것이다. 이미지를 사용할 때는 사용할 이미지 영역 위치를 설정하여 사용한다.

 

 
☑️ 그렇다면 이미지스프라이트 기법을 사용하는 이유는 무엇일까?

이미지 태그가 줄어들면 HTML 파일 자체가 깔끔해지고, 스크린리더로 웹 페이지를 탐색할 때 탐색 속도도 향상된다. 이미지가 많을수록 웹 페이지를 로딩하는 속도가 오래 걸린다. HTML 파일을 읽다가 <img> 태그를 만나면  <img> 태그를 다운로드하고, 또 렌더링을 하다가 <img> 태그를 만나면 또 다운로드를 한다. 이 과정이 많을수록 페이지 로딩 속도가 오래 걸리게 된다. 이미지스프라이트를 사용하면 하나의 이미지를 사용하기 때문에 렌더링 속도가 훨씬 더 빨라진다.

이미지 사용이 많은 규모가 큰 사이트일수록 이미지스프라이트 기법을 사용하면 리소스를 절약하여 훨씬 속도가 빨라진다.

 

  ☑️ 이미지 스프라이트는 언제 사용할까?

크게 의미 없이 꾸며주는 이미지를 사용할 때 사용한다. 의미가 있고, 설명이 필요해서 alt 속성이 들어가야 하는 이미지는 <img> 태그를 사용해야 한다. 
 
 

📌 사용방법

 

1. 가상요소를 사용해서 이미지를 넣을 위치와 크기를 지정한다.
2. backgound 이미지로 넣어 해당 이미지가 있는 좌표값을 입력한다.

 

ul a[class^="link"]::before {
	display: block;
    	content: "";
    	width: 30px;
	height: 30px;
    	/* background: black; */
    	position: absolute;
    	left: 5px;
    	top: 10px;
    }

.link_instagram::before {
	background: url(이미지 파일) 좌표값;
}

 

✅ 인라인 요소이기 때문에 크기 값을 주려면 display: block or inline-block 속성을 넣어줘야 한다.