✨ 블로그 Github 잔디 꾸미기

Github 잔디밭 가져오기

---

 블로그를 꾸미기 위해서 github 잔디를 블로그에 넣고 싶었다. 찾아본 결과 github chart api가 존재하였다. 더 어려운 방법으로 가져올수도 있었는데 도전하지 않았다. 

일단 방법부터 설명하자면 매우 간단하다.

<img src="https://ghchart.rshah.org/wnstjd9701"/>

이 코드를 티스토리 html에서 편집만 해주면 된다.

근데 css도 같이 바꿔줘야 해서 시간이 조금 오래 걸렸다.

HTML, CSS를 워낙 오랜만에 다루기도 하고 html 태그가 너무 많이 존재해서 개발자 도구를 이용해 겨우 찾아서 구글링 끝에 만들 수 있었다. 

html

그리고 먼저 스킨 편집에 들어가서 html 편집을 눌러 이 코드를 여기서 자신이 원하는 위치에 넣도록한다. 

그 다음 CSS는 알맞게 조정하고 나면 이러한 잔디가 나오게 된다. 

github 잔디

오랜만에 html, css를 건드려봤는데 블로그를 하면서 재미도 느끼고 삽질을 조금 많이 했지만 좋은 경험이었다. 

또 사이드바도 왼쪽으로 옮기는 작업도 하였는데 그건 구글링을 하면 바로 나와서 쉽게 해결하였다. 

6월달 부터 제대로 잔디를 채우지 않았는데 이제부터라도 잘 채우도록 해보자🏃

 

참고 블로그

https://jamesu.dev/posts/2021/02/09/showing-github-contributions-graph/

https://pearlluck.tistory.com/365