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

지금까지 쭉 살펴본 Fastboot 강좌 중 추천글 모듈의 색상을 변경하는 방법에 대한 글은 작성하지 않았음을 발견했다. 방명록에 요청하신 분들도 몇 분 계셔서 아예 이렇게 강좌로 대처하려고 한다. 방법은 어렵지 않으니, 그냥 보시고 따라하시면 된다.

Fastboot 추천글 모듈에 있는 배지(Badge) 색상을 변경하는 방법에 대해 알아보자.

먼저, 이 배지는 마케팅 용도다. 추천글 모듈 자체도 마케팅 용도인데, 여기에 한번 더 주목을 받기 위해서 배지로서 마케팅을 하는 것! 따라서 클릭율이 아무래도 그 어떤 사이드바 보다도 높을 수 밖에 없다. 제작자이신 Readiz님께서 올리신 강좌를 토대로 한번 업그레이드 시켜 변경해 봤는데, 잘 적용 되었다.

배지 색상은 자유롭게 변경이 가능한데, 너무 많이 변경하지 않는게 좋겠다고 생각했다. 이유는 조잡해지기 때문이다. 과하면 안 하니만 못하다라는 말이 있듯, 너무 다양한 뱃지는 오히려 악영향을 미칠 수 있으므로 적절히 갯수를 조절하여 적용시킬 수 있도록 하자.

관리자로 들어오셔서 꾸미기 > HTML/CSS 편집 으로 들어간다.

CSS 카테고리에 보시면 위와같은 태그를 찾으실 수 있다. 주석으로 추천글모듈 이라고 되어있는 부분이다. #recomended 부터가 바로 배지를 형성하는 태그이며, 주황색 박스표시가 된 부분이 바로 색상 16진수 부분이다. 여기의 태그코드를 원하는 색상의 16진수 코드로 입력해주시면 되는 것이다. 여기까지가 A그룹이라고 가정 하겠다.

그리고 바로 아래에 이런 태그를 하나 더 볼 수 있다. 여기까지가 하나의 배지를 형성하는 코드다. 이제 색상을 수정해야 하는 부분도 알았으니 어떻게 새로운 색상의 배지를 추가하는지 알아본다. 여기는 B그룹 이라고 가정한다.

보시면 #recomended span.name>span 부분에서 name 부분을 변경하며 A그룹을 두개 더 추가 했다는것을 알 수 있다. 여기에서는 name2 와 name3 를 새로 만들어 추가하였다. 그리고 각각의 그룹안에 있는 색상 태그의 16진수 코드를 원하는 색으로 변경해서 입력해놨다.

B그룹 태그는 쉽다. name2와 name3 로 각각 수정한 태그를 A그룹에 맞게 추가로 넣어놓은 모습이다. 이렇게 각각 A그룹-B그룹 짝을 맞추어 색상 태그만 수정해서 넣으면 된다.

이제 어떻게 사용을 하는지에 대해 알아보자. 현재 사이드바에 적용된 추천글 모듈 중 일부를 캡처한 이미지다. 빨간색으로 표시된 안쪽 태그 중 span class="name" 이라고 되어 있는 부분이 보일 것이다. 그 안에 들어가는 name을 아까 그룹지어서 변경했던 태그로 적용시키면 된다. 위에서 name2 그리고 name3 를 추가로 만들었지 않은가? 바로 해당 span class 태그를 적용시키면 되는 것이다. name은 Fastboot의 기본 색상인 빨간색이며, 추가로 만든 name2는 파란색, name3는 초록색이다. 이 색상은 16진수가 결정한다고 위에 설명드렸으니, 각자 배지 색상은 원하는 색으로 적용시키면 된다.