깃허브 README로 프로필 꾸미기 ✨

깃허브를 제대로 사용한 지 3개월이 넘어가는 시점에서 깃허브 메인 프로필을 꾸며봐야겠다고 생각했다.

참고자료 및 사이트
블로그 👍
Header, Footer 등록
기술 스택 아이콘 배지 등록
방문자 수 등록
solved.ac 백준 티어 등록
Github Stats 등록

✨ 완성본 ✨

✨ 작고 소중한 나의 깃허브 README ver.1 ✨ 이다.
나는 Header, Footer, 방문자 수, 기술 스택 배지, solved.ac 백준 티어, 깃허브 stat 이렇게만 등록해줬다.

그럼 이제 방법을 알아보자!

1. README 생성

우선, 자신의 깃허브 페이지로 이동하여 새로운 레포지토리를 생성한다.
레포지토리명은 자신의 깃허브 아이디와 동일한 이름으로 입력한다.
그러면 귀여운 고양이가 ✨special✨ repository 라는 안내를 해준다.
(나는 이미 만들어져 있기 때문에 이미 만들어져있다는 안내를 해준다)

❗ Public 과 Add a README file 설정을 꼭 해줘야 한다 ❗

2. README 작성

레포지토리를 정상적으로 생성하고 나면, 해당 레포지토리로 이동한다.
위의 사진에서 README.md 옆의 연필 모양을 클릭하면 마크다운 형식으로 작성할 수 있는 Edit file 이 나온다.
여기서 본인이 원하는 대로 커스텀을 하면 된다! 😎

✔️ README는 마크다운 형식이기 때문에 사용법을 조금은 알아야 한다.
마크다운 사용법을 통해 본인이 필요로하는 문법을 그 때 그 때 익히는 방법을 추천한다 !

Header / Footer 등록 👀

Header, Footer 등록

나는 위 사이트를 통해 Header, Footer를 등록하였고, How to use에 있는 사용법을 그대로 복사해서 그 안에서 또 본인 입맛에 맞게 커스텀해서 쓰면 된다.

![header](https://capsule-render.vercel.app/api?type=waving&color=auto&height=200&section=header&text=Goni%20Archive&fontSize=70)
...
![Footer](https://capsule-render.vercel.app/api?type=waving&color=auto&height=200&section=footer)

나는 맨 윗줄과 맨 아랫줄에 Header와 Footer를 각각 하나씩 추가하였다.
각 속성들의 의미는 다음과 같다.

• type : Header, Footer 그래픽 모양을 어떤 것으로 할 것인 지
  
  위와 같이 다양한 type들이 있고, 하나씩 적용해보며 본인이 가장 맘에 드는 걸 선택하면 된다. 나는 정적인 wave도 괜찮지만 동적인 느낌을 주고 싶어서 waving을 선택하였다. 😎
• color : 색상을 지정할 수 있는데, 나는 계속해서 랜덤으로 변하는 auto값을 주었다.
• height : Header, Footer의 길이를 정한다. 이것도 숫자를 바꿔가며 본인이 가장 맘에 드는 길이를 결정하면 된다.
• text : Header, Footer 의 중앙에 텍스트를 넣을 수 있다.

  ✔️ 한 칸 띄어쓰기를 하고 싶으면, 띄어쓰기를 하고자 하는 곳에 "%20"를 넣어주면 된다.

• fontSize : 텍스트의 크기

기술 스택 아이콘 배지 등록 👀

나는 내가 주로 공부하는 것들 / 추가적으로 공부하는 것들 / 사용하는 툴 3가지로 나누어서 작성을 했다. 😎

<img src="https://img.shields.io/badge/{1}-{2}?style=flat-square&logo={3}&logoColor={4}"/>

위의 코드를 그대로 복사해서 1, 2, 3, 4번에 본인이 원하는 기술에 맞게 커스텀해서 쓰면 된다.

• 1 : README에 그대로 노출될 이름으로써 기술 이름을 쓰면 된다. 본인이 등록하고픈 기술이 HTML이라면 HTML이라고 쓰면 된다.
• 2 : 기술 스택 아이콘에서 본인이 원하는 기술을 검색하여 나온 코드번호를 입력한다. 복사하게 되면 "#E34F26"와 같이 복사되는데, 앞의 #은 빼고 입력한다.
• 3 : 해당 기술 아이콘의 이름을 정확하게 입력한다.
• 4 : 해당 아이콘의 색을 지정해준다. 보통 배경이 검은색이면 4를 white로 지정해준다.

아이콘들을 일렬로 정렬하고 싶으면 해당 태그 옆에 바로 이어서 써주면 된다. 한 칸 띄어쓰기를 적용하면 한 칸 띄워서 적용되니 참고하면 된다.

<div align="center">
  <img src="https://img.shields.io/badge/HTML-E34F26?style=flat-square&logo=HTML5&logoColor=white"/> <img src="https://img.shields.io/badge/CSS-1572B6?style=flat-square&logo=CSS3&logoColor=white"/> <img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&logo=JavaScript&logoColor=white"/> <img src="https://img.shields.io/badge/React-61DAFB?style=flat-square&logo=React&logoColor=white"/> <img src="https://img.shields.io/badge/Next.js-000000?style=flat-square&logo=Next.js&logoColor=white"/> <img src="https://img.shields.io/badge/Redux-764ABC?style=flat-square&logo=Redux&logoColor=white"/>
</div>

나는 중앙정렬을 해주고 싶었으므로 아이콘들을 하나의 div로 감쌌고, div에 align="center" 를 통해 중앙정렬을 해줬다.

✔️ 만약 해당 아이콘을 클릭했을 때, 원하는 링크로 이동하게 하고 싶다면 img태그밖에 a태그를 걸어주면 된다.

<a href="https://velog.io/@goni"><img src="https://img.shields.io/badge/Velog-20C997?style=flat-square&logo=Velog&logoColor=white"/></a>

방문자 수 등록 👀

방문자 수 등록에서 TARGET URL에 방문자 수를 알고 싶은 사이트를 입력하고, icon 및 color 설정을 해준다.

Add Icon을 통해 깃허브 아이콘을 추가한 모습이다.
설정을 할 때마다 미리보기로 결과를 바로 보여주기 때문에 쉽게 커스텀 할 수 있다.
설정을 다 마치고 나면, 바로 밑에 3가지의 링크가 생긴다.

나는 여기서 HTML LINK를 복사해서 사용하였다.

<div align="center">
<a href="https://hits.seeyoufarm.com"><img src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Fsagongjieun&count_bg=%23000000&title_bg=%23000000&icon=github.svg&icon_color=%23FFFFFF&title=GITHUB&edge_flat=false"/></a> <a href="https://hits.seeyoufarm.com"><img src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fking-goni.tistory.com&count_bg=%23000000&title_bg=%23000000&icon=&icon_color=%23000000&title=TISTORY&edge_flat=false"/></a>
</div>

마찬가지로 중앙정렬을 해주었다.

solved.ac 백준 티어 등록 👀

백준에서 문제를 풀게 되면 solved.ac의 티어가 올라가는데 solved.ac 백준 티어 등록에서 본인이 원하는 버전을 그대로 복사해서 사용하면 된다. mini 버전도 있고, 큰 버전도 있는데 나는 큰 버전을 사용하였다.

[![Solved.ac
프로필](http://mazassumnida.wtf/api/v2/generate_badge?boj={백준 아이디})](https://solved.ac/{백준 아이디})

위의 {백준 아이디}에 본인의 아이디를 입력해 넣으면 끝이다. 아주 간단 😎

Github stats 등록 👀

자신의 깃허브에 대한 평가를 나타내는 것으로 Github Stats 등록에 가면 stats 외에 더 다양한 설정과 커스텀을 할 수 있다.

[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username={깃허브아이디})](https://github.com/{깃허브아이디}/github-readme-stats)

마찬가지로 {깃허브아이디}에 본인의 깃허브 아이디를 입력하면 된다.

README ver.2 를 기대해주세요 ✨