728x90
이미지 스프라이트(Image Sprite)
이미지 스프라이트란 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미합니다. 이미지를 다운받기 위한 서버 요청과 로딩 시간을 단축해주는 효과가 있습니다. 또한, 많은 이미지 파일을 관리하는 대신 몇 개의 스프라이트 이미지 파일만을 관리하면 되므로 매우 간편합니다.
이미지 스프라이트의 장단점
| 장점 | 단점 |
|---|---|
| 이미지 로딩 속도가 최적화 됩니다. | 상황에 따라 유지보수가 어려울 수 있습니다. |
| HTML 마크업이 간결해지고 스크린 리더의 탐색 속도가 향상됩니다. | 데이터 관리에 문제가 생기면 이미지의 로딩이 불가능합니다. |
| 하나의 파일만 관리하면 됩니다. |
1. Figma 예시
다음은 피그마를 이용해 제작한 이미지 스프라이트 예시입니다. 아이콘들은 50px씩 간격을 주었고, SVG 파일로 저장하였습니다.
2. HTML
이미지를 스프라이트를 사용하기 위한 HTML 작성 예시입니다. 백그라운드로 넣기 위해 a 태그를 사용했고, ir 효과를 주기 위해 class="ir"로 설정하였습니다.
<div class="image__sns">
<a href="#" class="link"><span class="ir">공유</span></a>
<a href="#" class="link"><span class="ir">트위터</span></a>
<a href="#" class="link"><span class="ir">인스타그램</span></a>
<a href="#" class="link"><span class="ir">유투브</span></a>
<a href="#" class="link"><span class="ir">페이스북</span></a>
</div>
3. CSS
이미지 스프라이트를 본격적으로 사용하기 위한 CSS 예시입니다. 백그라운드 효과로 아이콘 이미지를 불러옵니다. 그리고 스크린리더기에 읽히기 위해 ir효과를 더해줍니다.
ir효과
웹 접근성 준수를 위해 이미지 사용 시 대체 텍스트를 제공해야 합니다. 단순히 스크린 리더 사용자뿐 아니라 검색 엔진의 효과적인 내용 수집을 위해서라도 필수적입니다. ir효과는 이미지 대체 텍스트 제공을 위한 css 기법입니다.
웹 접근성 준수를 위해 이미지 사용 시 대체 텍스트를 제공해야 합니다. 단순히 스크린 리더 사용자뿐 아니라 검색 엔진의 효과적인 내용 수집을 위해서라도 필수적입니다. ir효과는 이미지 대체 텍스트 제공을 위한 css 기법입니다.
/* ir효과 사용 */
.ir {
display: block;
overflow: hidden;
font-size: 0;
line-height: 0;
text-indent: -9999px;
}
.image__sns a {
width: 36px;
height: 36px;
background: #fff;
border-radius: 50%;
display: block;
margin-bottom: 5px;
background: url(img/image_bg03_icon.svg) no-repeat; /* 백그라운드 효과로 아이콘 불러오기 */
}
/* 아이콘 다섯개를 하나씩 출력하기 위해 position 설정하기.
간격은 50px이므로 50px씩 간격을 줍니다. */
.image__sns a:nth-child(1){}
.image__sns a:nth-child(2){
background-position: -50px 0;
}
.image__sns a:nth-child(3){
background-position: -100px 0;
}
.image__sns a:nth-child(4){
background-position: -150px 0;
}
.image__sns a:nth-child(5){
background-position: -200px 0;
}
.image:hover .image__sns{
opacity: 1;
}
728x90
반응형
'CSS' 카테고리의 다른 글
| [CSS]색상 표현 방법 (4) | 2022.08.23 |
|---|---|
| [CSS]단위 (4) | 2022.08.23 |
| [CSS]강아지 애니메이션 (3) | 2022.08.18 |
| [CSS]SCSS (2) | 2022.08.18 |
| [CSS]미디어쿼리 (3) | 2022.08.15 |
댓글