<div class="image__sns">
<a href="#" class="link"><span class="ir">공유하기</span></a>
<a href="#" class="link"><span class="ir">Twitter</span></a>
<a href="#" class="link"><span class="ir">Instagram</span></a>
<a href="#" class="link"><span class="ir">YouTube</span></a>
<a href="#" class="link"><span class="ir">Facebook</span></a>
</div>
.image__sns a {
width: 36px;
height: 36px;
background: #fff;
border-radius: 50%;
display: block;
margin-bottom: 5px;
background: url(https://kde66034.github.io/coding/site/imageType/img/image_bg03_icon.svg); /* 백그라운드로 아이콘 5개 만든거 출력하기 */
}
/* 이미지 스프라이트 */
/* 아이콘 5개를 이어 만든 프레임을 SVG로 추출하여 그 좌표값을 아래와 같이
옮겨가며 아이콘 하나씩 보이도록 하는 기법 */
.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;
}
/* ir 효과 (이미지 대체 효과 == alt) */
/* 화면상에서는 안나오게 함과 동시에 스크린리더기에는 읽히게 하는 작업 */
.ir {
display: block;
overflow: hidden;
font-size: 0;
line-height: 0;
text-indent: -9999px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.