image sprite 실전 사용기

기존 프로젝트에서는 돋보기 아이콘을 불러올 때, png 파일을 통해서 각각 한개씩 불러왔다.

이렇게 되면 돋보기 이미지는 상태에 따라 default, focus, disabled 총 3가지 상태를 가진 이미지가 있기 때문에 이미지를 3번 불러와야한다.

하지만 이미지 스프라이트를 사용하면, image sprite를 사용하여 3가지 상태의 이미지를 svg 파일 한 곳에 넣어두고 이를 배경이미지로 불러와서 원하는 위치의 이미지에 position을 주어 보여주도록 하였다.

1
2
3
4
5

img {
  width: 46px;
  height: 44px;
  background: url("img_navSprites.png") 0 0;
}

• 이미지를 배경으로 불러온 뒤 left, top 속성으로 배치한다.

1
2
3
4
5
6
7

function App() {
    return (
        <div>
            <img src="img_trans.png" >
        </div>
    )
}

• src 속성을 비워두게 되면 img 태그에 테두리가 생기게 되는데, 이는 제거하려해도 제거할 수가 없다. (border, outline, padding, margin 여러 방법을 써봐도 안됐다.)

그래서 src 속성을 비워두지 않기 위해 투명한 이미지 경로를 넣어준 것이다.

1
2
3

.next {
  background: url("img_navSprites.png");
}

1
2
3
4
5
6
7
8

// 또는 img 태그 대신 i 태그 사용하기
function App() {
    return (
        <div>
            <i className="next">
        </div>
    )
}

오늘 프로젝트를 진행하면서 icon을 불러오는 용도로 사용했기 때문에 img 태그 대신 i 태그를 사용하여 불러오니 src 속성없이도 불러올 수 있어서 편리하였다.

댓글 공유