IR / 이미지 스프라이트 / 백그라운드
이번 시간은 IR / 이미지 스프라이트 / 백그라운드에 대해 알아 보겠습니다.
IR
IR 기법은 이미지 대체 텍스트를 제공하기 위한 CSS 기법으로 다양한 CSS기법을 사용하여 이미지 대체 텍스트를 제공할 수 있다.
ir 적용 방법
.ir {
display: block;
overflow: hidden;
font-size: 0;
line-height: 0;
text-indent: -9999px;
}
이미지 스프라이트
이미지 스프라이트 기법이란 여러개의 이미지를 따로 두고 코딩하는게 아닌 하나의 파일에 모아서 코딩하는 방식이다.
예시를 보여드리도록 하겠습니다.
기본적인 구조는 아이콘 구역 별로 50px 구역을 주었습니다. svg 파일을 사용합니다.
사용 방법
먼저 a태그 안에 구조를 잡아준 뒤 위에서 설명드린 ir를 적용해줍니다
HTML
<div class="image__sns">
<a href="#" class="link"><span class="ir">icon</span></a>
<a href="#" class="link"><span class="ir">icon</span></a>
<a href="#" class="link"><span class="ir">icon</span></a>
<a href="#" class="link"><span class="ir">icon</span></a>
<a href="#" class="link"><span class="ir">icon</span></a>
</div>
CSS 구조는 svg를 url로 적용을 해준뒤 nth-child()를 사용하여 각각의 위치 값을 잡아줍니다.
CSS
.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;
}
.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 {
right: 10px;
}
댓글