Github & Git

[Github] Github Profile 꾸미기

Visioneer 2023. 12. 3. 00:18

안녕하세요! 제 포토폴리오인 Github을 꾸밀 때, 사용했던 Tool들을 공유하려 합니다.

 

README.md Commit 도우미

 

Online Markdown Editor - Dillinger, the Last Markdown Editor ever.

Make something great today!

dillinger.io

.md 파일의 Commit을 도와주는 사이트입니다. 

처음 Github Profile을 꾸밀 때, 여러 번 커밋을 하는 실수를 범했었습니다. 너무 번거롭잖아요!

하지만 위 사이트를 알게 된 후 여러 번 커밋의 번거로움을 단 "한 번" 으로 줄였습니다.

좋은 건 함께 공유합시다 : ) 

 

Emoji

 

EmojiCopy | Simple emoji copy and paste keyboard by JoyPixels®

Our new mobile-friendly web app provides a simple, beautiful emoji copy and paste keyboard interface WITH search and auto-copy technology.

emojicopy.com

원하는 emoji를 위 사이트에 찾아서 선택 후 복사하여 md 파일에 붙여넣으면 됩니다..

 

HITS

 

HITS

Easy way to know how many visitors are viewing your Github, Website, Notion.

hits.seeyoufarm.com

 

HITS

 

얼마나 많은 방문자가 나의 Github을 봤는지 알려줍니다 .

 

위 파트에 본인의 Github url을 넣어주고 OPTIONS을 본인의 개성대로 선택한 후,   

 

 

MARKDOWN에 생기는 CODE를 복사해서 .md에 붙여 넣어주면 됩니다.

 

Badge 

markdown badges를 생성하는 사이트

 

Static Badge | Shields.io

One of the named logos (bitcoin, dependabot, gitlab, npm, paypal, serverfault, stackexchange, superuser, telegram, travis) or simple-icons. All simple-icons are referenced using icon slugs. You can click the icon title on simple-icons to copy the slug or t

shields.io

 

배경 색상 및 로고 사이트

 

 

Simple Icons

2794 Free SVG icons for popular brands

simpleicons.org

 

Badge

Badge를 만드는 기본 form은 아래와 같습니다. 

<img src="https://img.shields.io/badge/텍스트-컬러코드?style=원하는스타일&logo=아이콘이름&logoColor=white"/>

 

만약 Python으로 Badge를 만들고 싶다면

1. 배경 색상 및 로고 사이트에 들어간다. 

2. 원하는 로고를 찾는다.

 

3. 텍스트에 원하는 글귀를 넣는다. 'Python'

4. 원하는 컬러 코드를 다음 작성한다. (필자는 Python 컬러를 넣었다.) '3776AB'

5. style은  badges를 생성하는 사이트에 들어가보면 flat (default), flat-square, plastic, for-the-badge, social 이 있다. (필자는 default를 사용하였다.) 'flat'

6. 아이콘 이름은 배경 색상 및 로고 사이트에 있는 그대로를 작성한다. 'Python'  

7. 완성하면 아래와 같은 코드가 나온다. 이를 그대로 README.md에 옮기면 Badge가 생성된다.

<img src="https://img.shields.io/badge/Python-3776AB?style=flat&logo=Python&logoColor=white"/>

 

Badge를 클릭하였을 때, 원하는 링크로 이동하게 하고 싶다면

기본 form

<a href="링크주소"><img src="https://img.shields.io/badge/텍스트-컬러코드?style=flat-square&logo=아이콘이름&logoColor=white&link=링크주소"/></a>

 

만약 새 탭에서 해당 링크 주소 창을 띄우고 싶다면 a tag에 traget="_blank" 를 추가해라.

<a target="_blank" href="링크주소"><img src="https://img.shields.io/badge/텍스트-컬러코드?style=flat-square&logo=아이콘이름&logoColor=white&link=링크주소"/></a>

 

언어 사용량 통계 나타내기

![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=깃허브 닉네임&layout=레이아웃 스타일&theme=스타일)

layout은 (좌측)demo, (우측)compact가 있습니다.

 

demo는 '&layout=레이아웃 스타일'을 삭제하면 됩니다.

필자는 layout=compact&theme=white로 했습니다. 

 

※ 더 자세한 내용은 https://github.com/anuraghazra/github-readme-stats을 참고하세요.

※ theme 종류는 https://github.com/anuraghazra/github-readme-stats/blob/master/themes/README.md 을 참고하세요.

 

Backjoon Profile

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

 

아래 코드에 자신의 백준 아이디를 채워넣어주면 됩니다. 

'Github & Git' 카테고리의 다른 글

[Github] Github 프로필 만들기  (0) 2023.12.03