[GitHub 100일 챌린지] Day 5 - 프로필 README 고급
[GitHub 100일 챌린지] Day 5 - 프로필 README 고급
100일 챌린지 Day 5 - 뱃지, 통계, 디자인으로 프로필을 꾸밉니다
배울 내용
- Shields.io 뱃지 추가하기
- GitHub Stats 카드 삽입하기
- 레이아웃 꾸미기
Topic1. Shields.io 뱃지 추가하기
뱃지란?
기술 스택, 도구, 상태를 시각적으로 표시하는 작은 아이콘입니다.
Shields.io 사용법
기본 문법:
1
실전 예시:
1
자주 사용하는 뱃지
프로그래밍 언어:
1
2
3
4
프레임워크:
1
2
3
4
도구:
1
2
3
해보기:
1
2
3
4
5
1. 프로필 README Repository 접속
2. README.md 파일 편집
3. "## 🛠 Tech Stack" 섹션 추가
4. 위의 뱃지 코드 복사/붙여넣기
5. Commit changes
결과: 프로필에 멋진 기술 스택 뱃지가 표시됩니다!
Topic2. GitHub Stats 카드 삽입하기
GitHub Stats란?
내 GitHub 활동 통계를 자동으로 보여주는 동적 이미지입니다.
GitHub Readme Stats 사용하기
기본 Stats 카드:
1
사용자명 변경 필수!
1
테마 옵션
1
2
3
4
5
6
7
8
9
10
11
<!-- 다크 테마 -->
&theme=dark
<!-- 라이트 테마 -->
&theme=default
<!-- 그라데이션 -->
&theme=radical
<!-- 미니멀 -->
&theme=minimal
Top Languages 카드
가장 많이 사용한 언어 표시:
1
Streak Stats
연속 커밋 기록:
1
해보기:
1
2
3
4
1. README.md에 "## 📊 GitHub Stats" 섹션 추가
2. Stats 카드 코드 복사
3. username=사용자명 부분을 본인 사용자명으로 변경
4. Commit changes
결과: 실시간으로 업데이트되는 GitHub 통계 확인!
Topic3. 레이아웃 꾸미기
정렬 및 간격
중앙 정렬:
1
2
3
4
5
<div align="center">
# 안녕하세요! 👋
</div>
이미지 나란히 배치:
1
2
3
4
<div align="center">
<img src="stat1.svg" height="180"/>
<img src="stat2.svg" height="180"/>
</div>
섹션 나누기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
---
## 🔭 About Me
내용...
---
## 🛠 Tech Stack
내용...
---
## 📊 GitHub Stats
내용...
---
완성 예시
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<div align="center">
# Hi there! 👋 저는 김영수입니다
### 웹 개발을 배우고 있는 주니어 개발자입니다
</div>
---
## 🌱 About Me
- 💻 풀스택 개발자를 목표로 공부 중입니다
- 📚 현재 React와 Node.js를 배우고 있습니다
- 🎯 2025년 목표: 오픈소스 기여하기
---
## 🛠 Tech Stack
### Languages
### Frameworks
### Tools
---
## 📊 GitHub Stats
<div align="center">
<img src="https://github-readme-stats.vercel.app/api?username=youngsu-park&show_icons=true&theme=radical" height="180"/>
<img src="https://github-readme-stats.vercel.app/api/top-langs/?username=youngsu-park&layout=compact&theme=radical" height="180"/>
</div>
---
## 📫 Contact
- Email: youngsu@example.com
- Blog: https://blog.example.com
- LinkedIn: https://linkedin.com/in/youngsu
---
<div align="center">
</div>
해보기:
1
2
3
4
1. 위의 템플릿 복사
2. 사용자명, 이메일, 링크 등 개인 정보로 수정
3. 본인에게 맞는 뱃지 선택
4. Commit changes
결과: 전문가처럼 보이는 프로필 완성!
유용한 리소스
- Shields.io: https://shields.io
- GitHub Stats: https://github.com/anuraghazra/github-readme-stats
- Badge Generator: https://home.aveek.io/GitHub-Profile-Badges/
정리
완료 체크:
- Shields.io 뱃지를 추가했다
- GitHub Stats 카드를 삽입했다
- 레이아웃을 보기 좋게 정리했다
- 프로필 README가 완성되었다
팁: 너무 많은 요소를 넣지 마세요. 깔끔함이 중요합니다!
다음: Day 6 - 비밀번호 보안 →
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.