HTML & SCSS (CSS3)
이미지 스프라이트 기법(Image Sprite)
- -
네이버 마크업을 하다 보니 아이콘들은 img태그가 아닌 :after 혹은 :before를 사용하고 있고
이미지 파일에 모든 아이콘들을 한 파일에 모아둔 것을 가져다가 썼더라구요~ 이런 기법을 '스프라이트'라고 하는데
오늘은 스프라이트 대하여 자세하게 알아보겠습니다!
이미지 스프라이트(Image Sprite)란?
여러 개의 배경 이미지를 하나의 파일로 제작한 후 background-position 속성을 이용하여 이미지를 배치하는 방법을 말합니다.
쉽게 말하자면 각의 이미지를 개별적으로 불러오는 것이 아니라 하나로 뭉친 파일을 불러와 필요 부분만 똑! 똑! 떼어 사용하는 것입니다.
왜 쓰는 걸까?
이미지가 사용될 때마다 웹 브라우저는 서버에게 이미지를 요청해야 합니다. 요청하고 처리되는 과정이 일괄적으로 이루어지지 않기 때문입니다.
즉, 필요한 이미지의 개수는 서버에 보내는 요청의 수와 비례하며 이는 페이지의 로딩 시간과 직결됩니다.
예를 들어 100개의 이미지가 필요한 사이트에서 이미지가 낱개로 되어있다면 100번의 통신이 필요하지만 스프라이트 방식을 사용하면 단 한번만 통신을 하면 되기 때문에 서버나 사용자는 부하가 적겠죠? (개발자만 힘이 들죠..ㅎㅎ)
이 기법에 대해 잘 모를 때는 저 합친 파일을 만들고 각각의 위치를 알아내는 게 더 복잡하지 않나…? 하고 생각했었는데
물론 규모가 작고 단순한 웹 사이트면 상관없겠지만 그렇지 않다면 브라우저 자원과 유지보수 측면에서 이미지 스프라이트를 사용하는 게 더 좋습니다!
https://www.toptal.com/developers/css/sprite-generator/
CSS Sprites Generator Tool | Toptal®
CSS Sprites Generator Upload your images. (Note: Please don’t upload HUGE files. That’s not the purpose of sprites technique.)
www.toptal.com
스프라이트에 사용하는 이미지를 쉽게 만들 수 있는 사이트입니다.
이미지를 넣기만 하면 하나의 파일로 만들어줌과 동시에 파일 안에 이미지의 위치값도 정확하게 알 수 있어서 활용도가 짱짱입니다 :)
이렇게 이미지를 업로드하면 이미지 완성본을 기준으로 각각의 이미지마다 background-position값(이미지의 위치값)이 나오는데 나중에 이 값을 css에 적기만 하면 끝입니다.
스프라이트 만들어보기
뉴스영역 텍스트에 앞, 뒤로 아이콘들을 넣어서 완성해 보자!
0. html
<body>
<div class="box">
<h1 class="blind">뉴스영역</h1>
</div>
</body>
1. 이미지 내에서 필요한 부분을 선언하기
저는 위에 소스코드처럼 <h1> 태그에 가상요소 ::before와 ::after를 사용하여 이미지를 넣겠습니다.
요소를 추가할 때는 ::before ::after 혹은 아무것도 쓰지 않는 방법도 있지만, 가장 중요한 것은 꼭 content:"";를 써야 값이 웹상에 보이게 된다는 거 잊지 마세요!
위의 코드처럼 이미지 스프라이트 기법을 사용하기 위해 필수적으로 작성해줘야 하는 속성이 있습니다.
- width, height : 삽입할 이미지의 크기를 결정한다.
- background-position : 이미지에서 사용할 이미지의 위치를 설정한다.
h1::before{
content: '';
display: inline-block;
width: 27px;
height: 24px;
background-position: -272px -342px;
}
h1::after{
content: '';
display: inline-block;
width: 7px;
height: 11px;
background-position: -410px -213px;
}
2. 이미지 파일 불러오기
이미지를 불러올 때도 필수적으로 작성해줘야하는 속성이 있습니다.
- background_imge : 이미지 경로
- background_repeat : no-repeat (반복하지 않습니다.)
- background_size : 이미지 전체 사이즈 (px)
이 이미지 파일은 처음 한 번만 선언하고 아이콘들이 필요할 때마다 값을 , (쉼표)를 사용해 추가 추가 하면 끝!!
h1::after,
h1::before{
background-image: url(../img/naver.Sprite.png);
background-repeat: no-repeat;
background-size: 442px;
}'HTML & SCSS (CSS3)' 카테고리의 다른 글
| 반응형 디자인 구현 (0) | 2023.02.21 |
|---|---|
| aria-label , aria-labelledby (0) | 2023.02.18 |
| 앵커 시 부드럽게 움직이는 스크롤 (0) | 2023.02.18 |
| flex로 정렬하기 (0) | 2023.01.24 |
| 이미지 사이즈 비율 맞추는 3가지 방법 (0) | 2023.01.24 |
Contents
소중한 공감 감사합니다