이전 블로그 참고하세요!
오늘은 이전 블로그에 이어서 Github Profile을 변경하는 법을 알려드리겠습니다.
저번 블로그에서 Badge에 대해서 설명드렸는데요.
Badge를 누르면 해당 링크로 이동할 수 있도록 해보겠습니다.
<a> </a>
태그 이용
<a href="링크"><img src="해당 뱃지코드"/></a>
ex)
<img src="https://img.shields.io/badge/Velog-20C997?style=flat&logo=Velog&logoColor=white" />
위의 Badge를 클릭하시면 저의 Velog로 이동합니다.
<img src ="해당 이미지 링크">
원하는 이미지를 우클릭한 후, 이미지 주소 복사를 선택하시면 이미지 주소를 쉽게 얻을 수 있습니다.
(자세히는 모르지만 저작권이 문제가 될 수도 있기때문에 royalty free image를 사용해주시는게 좋을 것 같습니다.)
이후, 이미지 주소를 " "안에 넣어주시면 됩니다.
ex)
<img src ="https://t4.ftcdn.net/jpg/05/78/93/03/240_F_578930383_P3utXyTfLBKUu73RKrXan6e0dVSxIkBr.jpg">
해당 링크 로 가시면 쉽게 만들 수 있습니다.
TARGET URL : 원하는 링크 입력
Add icon : 클릭 후, 원하는 아이콘 선택.
TITLE : 제목 입력
미리보기가 가능해서 하나씩 커스텀하시면서 만들어주시면 됩니다.
이후, 원하는 형식의 코드를 COPY하신 후, 입력해주시면 됩니다.
ex)
<a href="https://hits.seeyoufarm.com"><img src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Fhyuntae99&count_bg=%2379C83D&title_bg=%23555555&icon=github.svg&icon_color=%23E7E7E7&title=hits&edge_flat=false"/></a>
저번 블로그에서는 큰 버전을 소개시켜드렸는데
너무 커서 부담스럽더라고요...ㅎㅎ
그래서 작은 버전을 가지고 왔습니다.
[](https://solved.ac/백준아이디)
ex)
[](https://solved.ac/hyuntae9912)
아래는 큰 버전입니다. (자세한 내용은 이전 블로그를 참고해주세요.)
이 부분은 다른 분의 오픈 소스와 gist를 이용한 방법입니다.
Pin은 기본적으로 자신의 repository가 gist를 등록해 프로필에 보이게 할 수 있습니다.
제가 사용한 라이브러리는 github-stats-box와 productive-box입니다.
다른 라이브러리도 사용 방법이 유사하므로 productive-box를 기준으로 설명드리겠습니다.
바로 반영이 되지 않을 경우가 있는데 해당 repository의 README에 들어가서 공백 하나만 추가하시고 Commit하시면 해결되실겁니다!!!
github-stats-box도 위의 과정도 똑같습니다만 하나 추가할 것이 있습니다.
github-stats-box ->.github/workflows -> run.yml으로 들어가셔서 GIST_ID를 변경해주시면 됩니다.
나머지 과정은 위와 똑같습니다.
마지막으로 다크모드 설정에 대해서 알려드리겠습니다.
setting -> Appaerance로 들어가시면 아래와 같은 화면이 나옵니다.
원하시는 색깔을 고르시면 테마에 바로 적용되니 비교하시면서 마음에 드는 테마 선택하시길 바랍니다. (저는 기본 사용하고 있습니다.)
ex) 다크 모드를 적용한 Profile
저는 최종적으로 이런 profile을 사용하고 있습니다.
말하고자하는 바를 전하면서 최대한 깔끔하게 만드는 것이 좋은 것 같습니다. 자신의 개성을 잘 표현할 수 있는 profile을 만드시길 응원하겠습니다!
Github 주소 : https://github.com/hyuntae99