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

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

이번 시간에는 CSS에서 사용되는 이미지 스프라이트와 IR효과 ,백그라운드 표현에 대해 알아봅시다.

---

이미지 스프라이트란?

이미지 스프라이트(image sprite)는 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 말합니다.

웹 페이지에 이미지가 사용될 경우 해당 이미지를 다운받기 위해서 웹 브라우저에는 서버에 이미지를 요청하게 되는데 이때, 이미지가 많을 경우에는 웹 브라우저는 서버에 해당 이미지 많큼 요청하게 되므로 페이지에 로딩 시간이 오래 걸리게 됩니다. 이때 이미지 스프라이트를 사용하면 이미지를 다운받기 위한 서버 요청을 최소한으로 줄이 수 있습니다.

이미지를 50px 간격에 맞춰 하나의 셀에 넣습니다.

이미지의 배경을 제거 한 상태에서 이미지 파일을 svg로 저장 합니다.

.image__sns a {
    width: 20px;
    height: 20px;
    background-color: #fff;
    display: block;
    background: url(img/2.svg) no-repeat;
    margin-bottom: 10px;
    border-radius: 10px;
}
.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;
}

각각의 a태그의 자식에게 포지션으로 방향을 잡아주면 쉽게 이미지를 바꿔 넣을 수 있습니다. 이때, 4개의 이미지가 아닌 하나의 이미지만으로 4개의 아이콘을 만들 수 있습니다.

결과

IR효과

IR효과는 웹접근성에 따른 기법으로 이미지 대체 텍스트를 제공하기 위한 CSS기법입니다.

IR(Image Replacement)로 의미가 포함되어 있는 이미지를 배경으로 표현 하고, 그에 상응하는 내용을 텍스트로 전경에 기입하는 방법입니다. 주로 사용하는 방법은 Phark Method, WA IR이 있습니다.

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

.ir-wa {
    dispaly: block;
    overflow: hidden;
    position: relative;
    z-index: -1;
    width: 100%;
    height: 100%;
}

백그라운드 표현

사이트에 이미지를 넣는 방법에는 <img>태그를 이용해 이미지를 직접삽입하는 것과 CSS로 background: url();로 이미지를 삽입하는 방법이 있습니다.

특정위치에 배경이미지를 가로, 세로로만 표현하거나, 특정위치에 한번만 배경이미지를 표현하고 싶을 경우에는 CSS로 표현이 가능합니다.

background: url();
background-image: url();

백그라운드를 통하여 이미지를 삽입할 수 있습니다. svg를 백그라운드 이미지로 삽입할 경우 이미지 파일 없이도 아이콘을 넣을 수 있습니다.

background-position: ;

배경 이미지의 위치를 정하는 속성입니다.