GitHub Readme 프로필 꾸미기

1. Repository 생성하기

Step 1. Github접속 후 Repository -> New 에서 새 레포지토리 생성하기

 

Step 2. 레포지토리를 생성한다.

- Repository name에 Owner의 이름과 동일한 이름을 입력해준다.

  (아래 Special 어찌구가 떠야한다.)

- Public을 선택한다.

  (비공개를 원하면 Private로 선택)

- Add a README file을 꼭 선택해준다.

 

 

2. Readme 파일 꾸미기

Step 1. Header 꾸미기

참고 깃허브

https://github.com/kyechan99/capsule-render

GitHub - kyechan99/capsule-render: 🌈 Dynamic Coloful Image Render

 

- 위 깃허브를 참고하여 2번 Types에 자신이 원하는 타입 이름을 기억하고 아래 코드를 Readme 파일에 넣어준다.

![header](https://capsule-render.vercel.app/api?type={타입명}&color={원하는 색}&height=150&section=header&text={원하는 문구}&fontColor=ffffff&fontSize=70&animation=fadeIn&fontAlignY=55)

예시
![header](https://capsule-render.vercel.app/api?type=wave&color=0067a3&height=150&section=header&text=JuJuAndroid&fontColor=ffffff&fontSize=70&animation=fadeIn&fontAlignY=55)

결과물

 

Step 2. Body 꾸미기

- 뱃지 넣기

아이콘 및 색상 사이트

https://simpleicons.org/

Simple Icons

 

- 위 사이트에서 찾을 아이콘을 검색하여 이름과 색상 코드를 가져온다.

 

 

- Readme 파일에 자신이 원하는 뱃지를 추가해준다.

< 코드 >
<img src="https://img.shields.io/badge/{스택이름-색상코드}?style=flat-square&logo={로고명}&logoColor={로고색}"/>

<예시>
//Kotlin
<img src="https://img.shields.io/badge/Kotlin-7F52FF?style=for-the-badge&logo=kotlin&logoColor=white">
//Android
<img src="https://img.shields.io/badge/Android-3DDC84?style=for-the-badge&logo=android&logoColor=white">
//Spring
<img src="https://img.shields.io/badge/Spring-6DB33F?style=for-the-badge&logo=Spring&logoColor=white">
//MySQL
<img src="https://img.shields.io/badge/MySQL-4479A1?style=for-the-badge&logo=MySQL&logoColor=white">
//MariaDB
<img src="https://img.shields.io/badge/MariaDB-003545?style=for-the-badge&logo=MariaDB&logoColor=white">
//Github
<img src="https://img.shields.io/badge/github-181717?style=for-the-badge&logo=github&logoColor=white"><br/>
//Eclipse
<img src="https://img.shields.io/badge/Eclipse-2C2255?style=for-the-badge&logo=Eclipse%20IDE&logoColor=white">

결과물

 

- 뱃지에 링크 넣기

뱃지를 클릭하면 설정한 링크로 이동하게 된다.

<코드>
<a href="링크"><img src="뱃지코드"/></a>

<예시>
<a href="https://mylink.tistory.com/">
<img src="https://img.shields.io/badge/tistory-000000?style=flat-square&logo=tistory&logoColor=white"/>
</a> click me!

결과물

 

[참고]

띄어쓰기를 하려면 <br/> 을 추가해주면 된다.