<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.