[Github] ReadMe 리드미 꾸미기 - 뱃지 아이콘 위주

💎이 글만 이해하면 뱃지는 맘껏 샤샤샥 만들 수 있게 된다!!! 보장함!!💎

📌목적

• Github 프로필을 예쁘게 꾸미고 싶었는데 처음에 뱃지를 넣는게 은근 어려웠다.
• html을 아직 잘 모르고, 블로그들 설명도 너무 링크만 툭 던져있고.. 대충이라 내가 찐초보자들도 이해할 수 있게 아주~ 쉽게 알려주려고한다.
• 나는 뱃지부분은 아래와같이 꾸몄다!!✌

---

📌사전작업

1. ReadMe 만들기 (이건 굳이 설명 안할게용^_^)

2. if...html 1도 모를경우, 일단 ReadMe에 아래 코드를 붙여넣자. 그냥 기본 틀일 뿐 아직 별거없다!

<h3 align="center"><b>Code Lang</b></h3>
<div align="center">

</div>

3. https://simpleicons.org/?q=android 이 사이트도 열어두자

Simple Icons

---

📌요약

• 😱다른 블로그들 보면 https://shields.io/ 이 사이트에서 뭐 하라고 하는데.. 사이트 자체 UI가 너무 구려서 처음보면 당황한다..(나만 그랬나?) 일단 이 사이트는 무시하고, 나중에 보면 이해되니 넘기자! 단순하게 말하면,뱃지의 틀을 만들어 주는 사이트다!
• 하나의 뱃지 당 필요한 코드는 결국 아래코드이다.  안드로이드 뱃지를 예시로 설명하겠다!

<img src="https://img.shields.io/badge/Android-3DDC84?style=flat&logo=Android&logoColor=white"/>

• 위 코드는 아래의 안드로이드 아이콘을 의미한다.

 

• 친절설명...

• 위 안드로이드 아이콘은 아까 사전작업 때 열어두라했던 그 사이트에서 가져온것이다.
• 위 세가지만 알아도 충분하다.
• 움~~그래도 모르겠다? 상세설명을 보자!

---

📌상세설명

• "android"를 검색하면 여러가지 관련 아이콘이 뜬다.
• 우리가 원하는 안드로이드 아이콘은 아래 코드 빨간 네모의 "Android" 부분을 의미한다.

• 아래 코드는 무엇일까?

<img src="https://img.shields.io/badge/Visual Studio-3DDC84?style=flat&logo=Visual Studio&logoColor=white"/>

• 짠!!

• 그렇다. Visual Studio 아이콘이다.
• 아까 그 사이트에서 visu~~~대충 치면 바로 나온다!

• 그런데 말입니다! 우리가 아는 visual studio색깔이랑 매치가 안돼있으니 불편하다!!!

• 뱃지의 배경색깔은 위 빨간 네모칸 부분의 색상코드로 변경이 가능하다.

• 저 색상코드를 클릭만하면 바로 복사가 된다.
• ❗❗❗여기서 또 주의점❗❗❗

<img src="https://img.shields.io/badge/Visual Studio-#5C2D91?style=flat&logo=Visual Studio&logoColor=white"/>

• 위 처럼 색상코드 #5C2D91 고대~로 붙여넣으면

• '#' 때문에 저렇게 깨진 이미지가 보인다.
• 이거 은근 처음에 몇 분 잡아먹었다... 이미지 오류인줄....
• ✔아래 코드처럼 '#'을 지운 색상코드를 사용하자!!

<img src="https://img.shields.io/badge/Android-5C2D91?style=flat&logo=Android&logoColor=white"/>

---

📌아이콘 코드

차근차근 올리겠다!