깃허브 프로필 꾸미기

https://github.com/leeeeeyeon

leeeeeyeon - Overview

 

<div align="center">
<h3 align="center"><b>🛠 Tech Stack 🛠</b></h3>
<p align="center">
<img src="https://img.shields.io/badge/HTML5-E34F26?style=flat-square&logo=HTML5&logoColor=white"/></a> &nbsp
<img src="https://img.shields.io/badge/CSS3-1572B6?style=flat-square&logo=CSS3&logoColor=white"/></a> &nbsp
<img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&logo=JavaScript&logoColor=white"/></a> &nbsp
<img src="https://img.shields.io/badge/Node.js-339933?style=flat-square&logo=Node.js&logoColor=white"/></a> &nbsp
<img src="https://img.shields.io/badge/MySQL-4479A1?style=flat-square&logo=MySQL&logoColor=white"/></a> &nbsp
<img src="https://img.shields.io/badge/Heroku-430098?style=flat-square&logo=Heroku&logoColor=white"/></a> &nbsp 
<img src="https://img.shields.io/badge/C++-00599C?style=flat-square&logo=c%2B%2B&logoColor=white"/></a> &nbsp 
<img src="https://img.shields.io/badge/Python-3766AB?style=flat-square&logo=Python&logoColor=white"/></a>&nbsp 

<h3 align="center"><b>🌱 About me 🌱</b></h3>
<p align="center">
  <a href="https://leeeeeyeon.tistory.com/"><img src="http://img.shields.io/badge/-Tech%20blog-FF8800?style=flat-square&logo=blogger&logoColor=white&link=https://leeeeeyeon.tistory.com/"/></a>&nbsp
  <a href="https://www.instagram.com/leeeee.yeon/"><img src="https://img.shields.io/badge/Instagram-E4405F?style=flat-square&logo=Instagram&logoColor=white&link=https://www.instagram.com/leeeee.yeon/"/></a>&nbsp


![leeeeeyeon's GitHub stats](https://github-readme-stats.vercel.app/api?username=leeeeeyeon&show_icons=true&theme=vue)
[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=leeeeeyeon&layout=compact)](https://github.com/leeeeeyeon/github-readme-stats)
</div>

---

결과물부터 투척하고 글을 시작한다 (╹ڡ╹ )

오늘 velog를 구경하다가 갑자기 깃허브 프로필 꾸미기가 눈에 들어와 내 깃허브 프로필을 간단하게 꾸며보았다.

 

1. 레파지토리 만들기

 

레파지토리 이름이 자신의 아이디가 되도록 레파지토리를 만든다.

Public으로 설정하고, Add a README file에 체크 표시를 해준다.

 

그리고 만들어진 README.md에서 연필 모양 아이콘을 클릭해 편집 창으로 들어가 본격적인 깃허브 프로필 꾸미기를 시작한다.

 

 

2. 뱃지와 아이콘을 이용한 깃허브 프로필 꾸미기

 

그 전에 팁! Edit file 옆에 Preview를 누르면 README.md를 업데이트하기 전에 완성본을 미리 확인할 수 있다. Preview로 내 깃허브 프로필이 어떻게 만들어지고 있는지 틈틈이 확인하며 만들자.

 

배지 : https://shields.io/ & 아이콘 : https://simpleicons.org/ 을 참고해서 만들면 된다.

 

<img src="https://img.shields.io/badge/HTML5-E34F26?style=flat-square&logo=HTML5&logoColor=white"/></a> &nbsp

<img src="https://img.shields.io/badge/HTML5-E34F26?style=flat-square&logo=HTML5&logoColor=white"/></a> &nbsp

 

빨간색으로 하이라이트한 부분에는 쓰고자하는 텍스트를 적는다.

주황색으로 하이라이트한 부분에는 뱃지의 컬러코드를 적는다. simpleicons에서 텍스트를 검색하면 컬러코드가 같이 나오는데 나는 그것을 이용했다. 다른 색깔을 원한다면 컬러코드를 알아와 붙여놓으면 될 것이다.

** 복붙할 때 함께 붙어오는 '#'은 지우자.

노란색으로 하이라이트한 부분에는 아이콘의 이름을 적는다. 이것은 simpleicons에 나오는 이름으로 해주면 된다.

 

내 프로필에서, 여기까지가 뱃지와 아이콘을 이용하여 꾸민 부분이다.

 

 

3. Github stats을 이용한 깃허브 프로필 꾸미기

원본: https://github.com/anuraghazra/github-readme-stats

번역본: https://github.com/anuraghazra/github-readme-stats/blob/master/docs/readme_kr.md

을 이용하여 아래와 같이 내 깃허브 통계를 프로필에 띄워보자.

 

** 이 부분을 할 때 가운데 정렬이 되지 않았다. 그래서 이를 해결하기 위해 전체 코드를 div로 감싸고 div의 속성으로 가운데 정렬을 주니 해결되었다.

 

GitHub Stats

![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=dark&show_icons=true)

위 코드를 내 README.md에 복붙하면 된다. 여기서 anuraghazra에 해당하는 부분을 자신의 깃허브 아이디로 바꾸자.

 

https://github.com/anuraghazra/github-readme-stats/blob/master/themes/README.md

에 여러가지 테마가 있는데 원하는 테마의 이름을 위 코드의 theme=( ~~~ ) 부분에 적어주면 테마를 적용할 수 있다.

 

Most used Languages

[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&layout=compact)](https://github.com/anuraghazra/github-readme-stats)

여기서도 마찬가지로 anuraghazra에 해당하는 부분을 자신의 깃허브 아이디로 바꿔주면 된다.

 

끗 ~

---

참고

• https://velog.io/@woo0_hooo/Github-github-profile-%EA%B0%84%EC%A7%80%EB%82%98%EA%B2%8C-%EA%BE%B8%EB%AF%B8%EA%B8%B0
• https://velog.io/@nari120/%EA%B9%83%ED%97%88%EB%B8%8C-%ED%94%84%EB%A1%9C%ED%95%84-%EB%B0%B0%EC%A7%80-%EC%B6%94%EA%B0%80
• https://inner-game.tistory.com/636