[CSS] 배경이미지로 아이콘 한번에 넣기

아이콘이 많이 들어가거나 중복되는 아이콘이 많은 경우, 이미지를 하나씩 넣다보면 관리하기도 힘들고 또 용량이 많이들어가니깐(아이콘들 작아서 괜찮나(?)) 그때 이미지 하나로 넣어주면 간편하게 사용할 수 있다. 

 

01. 하나의 이미지로 만들어준다. 

들어가야 하는 아이콘은 적당히 여백을 주고, 하나의 이미지로 만들어준다. 너무 빡빡하게 아이콘을 붙여놓으면 조정하다가 다른 아이콘이 보여서 다시 만들어야 하는 경우가 있으니, 여백을 좀 주는게 좋다.

EX)

출처 : https://www.flaticon.com/kr/

* 아이콘은 무료 아이콘들이 많은 flaticon에서 가지고 왔는데, 쓸모 있을진 모르겠지만 귀여운 아이콘들이 많다. 

 

02. HTML

버튼(아이콘)이 만들어질 html를 만들어준다. 버튼이 눌려야 하니 a태그로 감싸준다. 

<div class="iconBtn cartBtn"><a href="#">장바구니</a></div>
<div class="iconBtn buyingBtn"><a href="#">계산하기</a></div>

 

03. CSS

.iconBtn{
    width:30px;
    height:30px;
}
.iconBtn > a{
    display:block;
    width:100%;
    height:100%;
    text-indent:-9999px; 
    background:url(http://블라블라.com/이미지.jpg);
}
.cartBtn > a{
    background-positon: -30px -30px;
}
.cartBtn > a{
    background-positon: -60px -30px;
}
 

1-4. 버튼(.iconBtn)의 크기를 잡아준다. 

5-8. a태그가 잘 눌리도록 버튼의 크기에 꽉채워준다.

9. 텍스트를 안보이게 해준다.

10. 배경이미지로 아이콘을 넣어준다. 

12-14. 첫번째 아이콘의 위치를 잡아준다. (이리저리 움직여보다보면 딱 맞는 위치를 찾을 수 있음)

15-17. 두번째 아이콘의 위치를 잡아준다. 

 

첫번째와 두번째아이콘은 똑같은 배경이미지를 사용하고 있지만 배경이미지위치를 이동해서 다른 아이콘을 보이게 할 수 있다. 

 

 

*열심히 썼지만 틀린 부분이 있을 수 있어요. 궁금하신건 댓글달아주시면 고민해보겠습니돵.