기술 노트

[깃허브] 프로필 꾸미기 | README | 백준 티어 HTML코드

juble 2024. 11. 27. 22:06

깃허브 README, 프로필에 백준 티어를 보여주게끔 추가하는 코드를 이번 글에서 공유하려고 한다 !

 

나같은 경우에, 기존에 프로필(README)는 꾸며두었던 상태여서, 백준 티어만 보여주게끔 추가했으면 됐다. 

728x90

1. solved.ac 로그인 연동

참고로, 백준 티어를 리드미에 추가하려면 가장 먼저 아래 사이트에서 로그인이 연동되어 있어야 한다. 

https://solved.ac/

 

solved.ac

알고리즘 문제해결 학습의 이정표 🚩 Baekjoon Online Judge 문제들의 난이도 및 티어 정보를 제공하는 사이트입니다.

solved.ac

 

 

해당 사이트를 들어간 후 우측 상단 로그인을 클릭해준다. 

위 사이트에서 로그인을 클릭

 

 

그러면 백준 사이트로 연결되면서 로그인을 할 수 있는 창이 뜬다. 

로그인 클릭

 

 

그러면 아래 사이트로 이동되면서 사용할 것인지에 대한 체크박스가 뜨는데, 사용하기를 눌러주면 된다. 

https://www.acmicpc.net/setting/solved.ac

solved.ac를 사용해야, 깃허브에서 보여줄 수 있다.

 

 

2. 깃허브 리드미에 코드 추가 

그런 다음, 깃허브 리드미에 코드 한 줄만 추가해주면 된다 !

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

 

참고로 나는 HTML 코드로 작성했기 때문에 이렇게 작성했다. HTML로 작성하실 분들은 이 코드를 참고하면 된다. 

<a href="https://solved.ac/백준아이디">
<img src="http://mazassumnida.wtf/api/v2/generate_badge?boj=백준아이디" alt="Solved.ac프로필">
</a>
반응형

 

3. 끝!

위 추가한 코드를 포함하여 리드미를 꾸미고 커밋을 해주면, 뱃지가 잘 나온다 !

 


백준 티어에 관련한 코드 및 테마에 대하여 더 알아보고 싶다면 아래 사이트를 참고하면 된다 !

https://github.com/mazassumnida/mazassumnida

 

GitHub - mazassumnida/mazassumnida: Github 프로필에서 boj 프로필을 이쁘게 보여주는 프로젝트

Github 프로필에서 boj 프로필을 이쁘게 보여주는 프로젝트. Contribute to mazassumnida/mazassumnida development by creating an account on GitHub.

github.com

 

728x90
반응형