이미지 스프라이트 / IR 효과 / 백그라운드 표현

728x90

이미지 스프라이트(Image Sprite)

💡 이미지 스프라이트 ?
여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미합니다. 이미지를 다운받기 위한 서버 요청을 단 몇 번으로 줄일 수 있고, 모바일 환경과 같이 한정된 자원을 사용하는 플랫폼(platform)에서는 웹 페이지의 로딩 시간을 단축해주는 효과가 있습니다.

이미지 스프라이트 사용법?

이미지 스프라이트는 &ltimg>태그를 사용해서 이미지를 삽입하는 것이 아닌 CSS의 background 속성을 이용하여 삽입합니다.
이미지 스프라이트 기법을 사용하기 위해 필수적으로 작성해줘야하는 속성이 있습니다.
👉 width, height : 삽입할 이미지의 크기를 결정한다.
👉 background-image : 삽입할 이미지의 경로를 설정한다.
👉 background-position : 이미지에서 사용할 이미지의 위치를 설정한다.
스프라이트된 이미지를 background-image를 통해 nth-child를 적용하고, background-position을 통해 위치를 잡아주면 된다.

..image__sns a {
    width: 36px;
    height: 36px;
    background: #fff;
    border-radius: 50%;
    display: block;
    margin-bottom: 5px;
    background: url(img/imag_bg_03_01.svg) no-repeat;
}
.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{
    opacity: 1;
}

왼쪽 상단의 (0,0) 모서리를 기준으로 설정하고,
x축, y축의 거리를 계산하면 위의 소스코드처럼 수치가 나오는데, 그것을 background-position의 값으로 x축, y축을 적용시켜주면 된다.

💡 ir 효과

텍스트는 리더기로 읽어줄 수 있지만 이미지는 읽을 수가 없다. 그래서 이미지에 텍스트를 붙여 준다. ir 기법은 이미지 대체 텍스트 제공을 위한 css 기법이다.

/* 이미있는 이미지의 대체 텍스트를 제공 하는경우 , text-indent 이용하여 화면 바깥으로 (-9999px)만큼 빼내어 보이지 않게 하는 방법입니다.*//
.ir_pm {display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px;}/
/* 의미 있는 이미지의 대체 텍스트를 이미지가 없어도 대체 텍스트를 보여주고자 할때 *//
.ir_wa {display: block; overflow: hidden; position: relative; z-index: -1; width: 100%; height: 100%;}/
/* 대체텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때*//
.ir_su {overflow: hidden; position: absolute; width: 0; height: 0; ;line-height: 0; text-indent: -9999px;}/

728x90