CSS 공통클래스 [class^=] & background 아이콘 공통 변경

섹션에 공통으로 들어가는 아이콘이 여러개 있을경우,

공통클래스 [class^=] 을 사용하여 쉽게 적용해보자. 

 

 

---

 

 

여기 아이콘에 커서를 가져다대면 색상이 변하게끔 만들어보자. 

1. 공통클래스를 이용할 것이므로 html에서 태그에 class를 지정

    먼저 여러개가 들어가야하기 때문에, html 에서 img 가 아닌 css에서 background로 처리한다. 

 

html  예시

<li class:"html">
 <a class="sns" href="#" target="_blank">
  <i class="icon_sns_youtube">유튜브</i>
 </a>
</li>

 

---

 

2. 아이콘 위치잡기

.main_all_game .game .sns {
    position: absolute;
    right: 20px;
    top: 220px;
}

먼저 아이콘이 들어갈 위치를 잡아준 다음

 

 

---

 

 

3. css에서 공통클래스 주기

[class^=icon_sns] {
    width: 20px;
    height: 20px;
    display: inline-block;
    background: url(../images/set_community.svg) no-repeat;
    text-indent: -9999px;
}

아이콘을 넣어준다.

 

공통클래스 문법은 [class^= icon_sns 공통클래스이름 앞글자]  :  icon_sns 로 시작하는 클래스에 전체 적용을 해준다는 뜻

 

배경이기 때문에 width/height로 요소가 들어갈 영역을 만들어준다.

글자를 없애기 위해 display:inline-block 상자로 만들어주고 

text-indent로 글자를 안보이게 숨켜준다.

background: url(../images/set_community.svg) no-repeat;

 

반복안함으로 이미지 배경 넣어주기

 

 

---

4. 공통클래스에서 위치 조정해주기.

 

아이콘 스프라이트 이미지

.icon_sns_youtube {
    background-position-y: -50px ;
}
.icon_sns_forum {
    background-position-y: 0 ;
}
.icon_sns_facebook {
    background-position-y: -100px ;
}

공통 클래스로 아이콘을 넣어줬으니,

이제 이름에 맞게 위치를 조정해주자. 

 

.icon_sns 뒤에 html에서 지정해줬던 클래스 이름을 전체 넣고 

background-position 으로 스프라이트 이미지 위치를 변경해

맞는 아이콘이 나오게끔 해준다. 

x는 가로 값

y는 세로값

 

---

5. 마지막으로 hover을 이용해 컬러아이콘이 나오도록해준다. 

[class^=icon_sns]:hover {
    background-position-x: -50px ;
}

 

공통 클래스에 :hover을 적용하여 

하나하나 적용하지 않고도 

맞는 아이콘에 색상이 나오게 조정하면 끗!