뱃지의 힘은 이렇게 쓰는 거다.

오프닝

오늘 소개해 드릴 것은 별로 굉장한 것은 아니지만 아주 엄청난 것입니다.
Badge를 커스텀 하는 방법입니다!
삼만 구천 팔백원!

제공

Shields.io
Badges4 README profile

코노방구미와 고란노 스폰샤노데 오쿠리시마스

뱃지의 힘은 이렇게 쓰는 거다.

Badges4 README profile
이곳에 수많은 샘플이 존재합니다.

Yarn Badge를 가져와봤는데, Yarn만 있고 Yarn2는 없습니다.
그래서 제가 Yarn2 뱃지를 만들어보겠습니다.

그리고 Yarn Berry 도 만들 수 있습니다.

버전도 쓸 수 있죠.

좌우가 나눠졌는데 우측의 색은 바꿀 수 있지만 아쉽게도 좌측이 회색인건 바꿀 수 없습니다.
그리고 소문자도 사용할 수 없습니다.
(혹시나 알고계신다면 제보해주시기 바랍니다.)

어떻게 했음?

텍스트 바꾸기

Badges4 README profile 여기서 제공해주는 Yarn Badge는 이러합니다.
https://img.shields.io/badge/Yarn-2C8EBB?style=for-the-badge&logo=yarn&logoColor=white

슬래쉬 마지막에 Yarn 이 있습니다.
저게 뱃지에 나오는 텍스트입니다.
저걸 바꾸면 텍스트가 바뀝니다.

그래서 Yarn 아이콘을 쓰면서 NPM을 쓸 수 있습니다. 이런 끔찍한 혼종이 탄생하다니!
https://img.shields.io/badge/NPM-2C8EBB?style=for-the-badge&logo=yarn&logoColor=white

좌우 나누기

정치 성향 말고

Yarn-2C8EBB 에서 2C8EBB 는 컬러를 나타내는 Hex 값입니다.
그런데 컬러를 사용하기 전에 - 를 쓰면 좌우가 나눠집니다.

Yarn-v3.0.2-2C8EBB 라고 쓰면 왼쪽에는 YARN 오른쪽에는 V3.0.2 가 나옵니다.
https://img.shields.io/badge/Yarn-v3.0.2-2C8EBB?style=for-the-badge&logo=yarn&logoColor=white

띄어쓰기 하기

_ 를 쓰면 됩니다.

언더바 쓰기

언더바인지 언더스코어인지 논쟁은 하지 맙시다
하이픈, 로우픈

__ 를 쓰면 됩니다.

하이픈 쓰기

-- 를 쓰면 됩니다.