Fastboot 추천글 모듈 배지 색상 마우스 오버 시 바뀌게 하는 방법

이번 강좌는 지난 시간에 이어서 추천글 모듈 배지에 대한 부분이다. 현재 친절한효자손의 Fastboot 스킨에서 추천글 모듈에 있는 배지 부분이 마우스를 가져다대면 색상이 바뀌는 것을 확인할 수 있다. 이건 어떻게 적용시키는지에 대해 알아본다.

Fastboot 추천글 모듈 배지에 마우스를 가져다 올리면 색상이 변경되게 하는 방법은?

우선 이 부분은 지난 시간에 배워본 추천글 모듈 배지 색상을 추가로 지정하는 부분을 한번 보시고 오시는 것을 추천한다. 그래야 이해가 잘 될것이다. 아래의 참고글을 먼저 확인하도록 하자.

Fastboot 추천글 모듈 배지(Badge) 색상 변경하는 방법

다 보셨다면 이래부터 집중해서 정독할 수 있도록 한다.

관리자의 꾸미기 > HTML/CSS편집 으로 들어간다. 여기에서 CSS에서 수정을 하도록 한다. 위의 보시는 스크린샷 이미지의 태그가 바로 마우스 오버 시 색상이 변하는 태그다. 빨간색 밑줄 친 16진수 색상 부분은 배지의 색상 부분이며, 파란색이 가리키는 색상은 배지의 글씨 색이다. 이 부분을 원하시는 색상코드로 넣으셔서 사용하시면 된다.

첨부파일

Fastboot 추천글모듈 배지 마우스 오버.txt

위의 첨부파일을 다운받아 자유롭게 수정 후 사용하시면 된다. 마우스가 올라갔을 때 색상임을 명심하자. 그리고 태그 적용 위치는 기존 추천글 배지 태그 아래에 넣으시면 된다. 사실 CSS 스타일태그는 위치는 중요하지 않다. 적당히 아무곳에 넣으셔도 적용은 된다.

그리고 추가적으로 만약 배지를 여러개 만드셨다면 해당 개수만큼 마우스 오버 태그도 적용시키면 각각 배지색상을 원하시는 색상으로 변경하실 수 있다. 이런 식으로 말이다. 주의사항은 span 태그 뒤에 오는 배지 아이디 태그를 정확히 입력해서 적용시켜야 한다. 위의 스크린샷은 위의 참고글에서 설명드렸던 부분에 나온 name 그룹을 각각 다시 이름만 변경해서 똑같이 적용시킨 모습이다. 모두 적용시키고 잘 되는지 확인해보자. 끝.