오늘은 이미지를 넣는 마크다운 문법을 사용해, 커스텀 뱃지를 만드는 방법을 정리하려고 합니다!
개인 Github나 Streamlit등에 링크나 기술 스택을 표시하려할때 일반적인 링크를 넣는 방법도 있겠지만,
개발자로서 더 깔끔하고 눈에 확띄는 뱃지를 만드는 방법이 있습니다.
먼저 일반적인 링크에 대해 보여드리겠습니다.
[GitHub](https://github.com/Myun9hyun)다음 링크는 제 Github 링크입니다 ^__^ 많관부~
마크다운 문법으로 다음의 코드를 입력하면
[ ] 대괄호 안에는 링크를 표현하는 문구가, () 소괄호 안에는 링크를 클릭시 이동하는 페이지를 적으시면 됩니다
저 링크를 작성하시면 다음과 같이 나타납니다
Myun9hyun - Overview
Myun9hyun has 11 repositories available. Follow their code on GitHub.
github.com
하지만 이런 방식은 Developer스럽지 않습니다!
먼저 커스텀 뱃지를 이용한 모습을 보여드리겠습니다.
다음과 같은 뱃지를 만들 수 있습니다!
위의 두가지는 기술스택을 나타내는 뱃지이고, 아래의 뱃지는 개인 깃허브의 링크를 첨부할 수 있는 뱃지 이미지 입니다.
뱃지를 만들 수 있는 사이트는 다음 두가지가 있습니다.
Badgen - Fast badge generating service
Badgen Fast badge generating service
badgen.net
Shields.io: Quality metadata badges for open source projects
Love Shields? Please consider donating to sustain our activitiesYour BadgeStaticUsing dash "-" separator/badge/ - - Dashes --→- DashUnderscores __→_ Underscore_ or Space → SpaceUsing query string parameters/static/v1?label= &message= &color= Colo
shields.io
%20은 띄어쓰기를 표현하고, python글자 대신 다른 기술스택을 대입하면 다른 기술스택들이 표현이 됩니다.
https://img.shields.io/badge/streamlit%20-%23FF0000.svg?style=for-the-badge&logo=streamlit&logoColor=white
위의 주소는 Streamlit의 뱃지입니다. 23FF0000이 색을 나타내는 코드입니다.
기술스택 외에도, colab, google, 심지어 카카오톡도 가능합니다.
https://badgen.net/badge/icon/github?icon=github&label
이외에도 다음과 같은 뱃지를 나타내는 주소입니다.
이 badgen은 커스텀이 가능합니다.
[](https://github.com/Myun9hyun)다음의 badgen 주소도 제 Github 주소를 나타낸것입니다.
%20을 통해 띄어쓰기가 가능하며 원하는 문구를 넣을 수 있습니다.
[]다음과 같이 입력하면 카카오톡의 뱃지도 만들 수 있습니다.
명현 - 뒤에 삽입하는 색깔을 나타내는 단어를 통해 색을 원하는 색을 넣을 수 있습니다.
위와 같은 방법으로 모두 있어보이는 깃-허브나 페이지 구성하시기 바랍니다 ^__^
'개발 > Python' 카테고리의 다른 글
| Colab에서 반려동물 분양받기(아기고양이 모드, 코기 모드) (0) | 2023.04.21 |
|---|---|
| [Python] 파이썬 구동을 위한 Colab 실행해보기 (0) | 2023.04.21 |