스프라이트/ir효과/백그라운드 표현 방법에 대하여 가~보자고~!

스프라이트란?

여러가지의 이미지가 한 이미지 안에 모여 있는것을 말합니다

---

스프라이트 예시 제작해보기

스프라이트에 들어갈 각 그림간의 간격은 추후 background-position을 쉽게 파악하기 위해 좌표가 딱 50으로 떨어지게끔 작업해주고 스프라이트 이미지를 만들어 줍니다.

---

CSS 코드

버튼의 글자는 가리고 이미지만 보여주기 위해 ir효과를 주어 글자는 숨기고 그림만 띄우게 css를 작성하겠습니다.
또한 간단한 hover효과를 주어 눈으로 좀 더 확인이 편하게 해보겠습니다.

ir효과 : 리더기는 텍스트만 읽기 가능하기 때문에 이미지 설명을 위해 사용하며 시각적으로 불편함이 없도록 텍스트만 안보이게 숨겨주고 실제로 설명은 붙어있지만 이미지만을 보여줄때 사용하는 방법입니다.

ir 효과 CSS코드보기

/* ir 효과 */
        .ir {
            display: block;
            overflow: hidden;
            font-size: 0;
            line-height: 0;
            text-indent: -9999px;
        }
    

/* ir 효과 */
    .ir {
        display: block;
        overflow: hidden;
        font-size: 0;
        line-height: 0;
        text-indent: -9999px;
    }

    .image__sns{
        display: flex;
        justify-content: space-between;
    }

    .image__sns a {
        /* 버튼 크기 설정 */
        width: 100px;
        height: 100px;
        background: #fff;
        border: 1px solid #ededed;
        border-radius: 50%;
        display: block;

        margin-top: 20px;

        /* 백그라운드 설정 */
        background: url(https://raw.githubusercontent.com/kimsangjunv1/coding/19262cf6de4241e5d4e3fe5a16ee9b53455156f1/site/ImageType/img/icon_-1.svg) center no-repeat;
        background-position: 0px;
        background-size: 775px;
    }

    .image__sns p {
        /* 버튼 크기 설정 */
        width: 100%;
        height: 100px;
        background: #fff;
        border: 1px solid #ededed;
        border-radius: 50px;
        /* display: block; */

        margin-top: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 20px;
    }

    .image__sns:hover em{
        display: inline;
    }

    /* a에 마우스를 올려두었을떄 */
    .image__sns:hover a,
    .image__sns:hover p {
        background-position: -164px;
        background-size: 890px;
        background-color: rgb(83, 32, 248);
        color: #fff;
        border: 0.1px solid rgb(83, 32, 248);
        box-shadow: 0px 10px 40px 5px #22284d1c;
        transition: all 0.25s ease-in-out;
    }
    
    /* a에 마우스를 떼어낼때 */
    .image__sns:not(:hover) a {
        transition: 0.25s;
    }

---

HTML 코드

간단한 예제 구현을 위한 구조를 구성해보겠습니다.

<div class="image__sns">
    <a href="#" class="link"><span class="ir">페이스북</span></a>
    <p>마우스를 올려보세요 <em style="display: none">움직이기 완료</em></p>
</div>

---

예제 완성

마우스를 버튼에 올리면 한장의 스프라이트안에 저장되어있는 다른 아이콘으로 이동합니다.