[GitHub 100일 챌린지] Day 15 - README.md 고급 기능 활용하기
[GitHub 100일 챌린지] Day 15 - README.md 고급 기능 활용하기
100일 챌린지 Day 15 - README를 더 전문적으로 만들어봅니다
배울 내용
- Badges(뱃지) 추가하기
- HTML로 레이아웃 꾸미기
- 접을 수 있는 섹션 만들기
Topic1. Badges 추가하기
Badges는 프로젝트 상태를 한눈에 보여주는 작은 이미지입니다.
Shields.io 뱃지
기본 형식:
1
실전 예시:
1
2
3
인기 뱃지 모음
버전 정보:
1
2
3
빌드 상태:
1
2
라이선스:
1
2
기술 스택:
1
2
3
4
동적 뱃지 (GitHub 연동)
1
2
3
4
5
6
7
8
9
10
11
# Stars
# Forks
# Issues
# Last Commit
뱃지 배치
1
2
3
4
5
6
7
8
9
# Project Name
<p align="center">
<img src="https://img.shields.io/badge/version-1.0.0-blue" alt="Version">
<img src="https://img.shields.io/badge/license-MIT-green" alt="License">
<img src="https://img.shields.io/badge/build-passing-brightgreen" alt="Build">
</p>
프로젝트 설명...
해보기: 뱃지 추가하기
1
2
3
4
1. shields.io 방문
2. 원하는 스타일 선택
3. README.md 상단에 추가
4. Preview로 확인
결과: 전문적인 뱃지가 추가된 README를 만들 수 있습니다
Topic2. HTML로 레이아웃 꾸미기
Markdown 내에서 HTML을 사용할 수 있습니다.
중앙 정렬
1
2
3
4
5
6
7
8
9
<p align="center">
<img src="logo.png" width="200"/>
</p>
<h1 align="center">Project Name</h1>
<p align="center">
간단한 한 줄 설명
</p>
이미지 크기 조절
1
2
3
4
5
6
<!-- Markdown (크기 조절 불가) -->
<!-- HTML (크기 조절 가능) -->
<img src="logo.png" width="100" height="100"/>
<img src="logo.png" width="50%"/>
이미지 나란히 배치
1
2
3
4
<p align="center">
<img src="screenshot1.png" width="45%"/>
<img src="screenshot2.png" width="45%"/>
</p>
테이블로 레이아웃
기본 테이블:
1
2
3
4
5
| 기능 | 설명 | 상태 |
|------|------|------|
| 로그인 | 사용자 인증 | ✅ 완료 |
| 회원가입 | 계정 생성 | ✅ 완료 |
| 프로필 | 정보 수정 | 🚧 진행 중 |
이미지 테이블:
1
2
3
| Desktop | Mobile |
|---------|--------|
|  |  |
링크 버튼 스타일
1
2
3
4
5
6
7
8
<p align="center">
<a href="https://demo.com">
<img src="https://img.shields.io/badge/Live%20Demo-4CAF50?style=for-the-badge&logo=vercel&logoColor=white" alt="Demo"/>
</a>
<a href="https://docs.com">
<img src="https://img.shields.io/badge/Documentation-2196F3?style=for-the-badge&logo=read-the-docs&logoColor=white" alt="Docs"/>
</a>
</p>
컬러 박스
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<table>
<tr>
<td>
### ✨ 주요 기능
- 빠른 성능
- 직관적인 UI
- 안전한 보안
</td>
<td>
### 🎯 목표
- 100% 테스트 커버리지
- 최고의 UX
- 지속적인 개선
</td>
</tr>
</table>
해보기: HTML 레이아웃 적용하기
1
2
3
1. 로고 이미지를 중앙 정렬
2. 스크린샷 2개를 나란히 배치
3. 버튼 스타일 링크 추가
결과: 시각적으로 훨씬 매력적인 README를 만들 수 있습니다
Topic3. 접을 수 있는 섹션
긴 내용을 접어서 깔끔하게 정리할 수 있습니다.
Details 태그 사용
1
2
3
4
5
6
<details>
<summary>클릭해서 펼치기</summary>
여기에 숨겨진 내용이 들어갑니다.
</details>
표시 결과:
클릭해서 펼치기
여기에 숨겨진 내용이 들어갑니다.실전 활용 - FAQ
1
2
3
4
5
6
7
8
9
<details>
<summary><b>Q: 설치가 안 돼요</b></summary>
<br>
A: Node.js 버전을 확인해주세요.
```bash
node --version
16.0 이상이 필요합니다.
</details>
Q: 실행 오류가 나요
A: 의존성을 재설치해보세요. ```bash rm -rf node_modules npm install ```
1
2
3
4
5
6
7
8
9
10
11
12
13
### 목차를 접을 수 있게
```html
<details open>
<summary><b>📋 Table of Contents</b></summary>
- [Installation](#installation)
- [Usage](#usage)
- [API](#api)
- [License](#license)
</details>
open 속성: 기본으로 펼쳐진 상태
긴 코드 블록 접기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<details>
<summary>전체 코드 보기</summary>
```javascript
function complexFunction() {
// 매우 긴 코드...
const data = fetchData();
const processed = processData(data);
const result = calculateResult(processed);
return {
success: true,
data: result
};
}
</details>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
### 변경 로그 (Changelog)
```html
<details>
<summary><b>Changelog</b></summary>
## v1.0.0 (2025-01-15)
- ✨ 초기 릴리스
- 🎨 UI 개선
- 🐛 버그 수정
## v0.9.0 (2025-01-01)
- 🚀 베타 릴리스
</details>
라이선스 텍스트
1
2
3
<details>
<summary><b>MIT License</b></summary>
Copyright (c) 2025 Your Name
Permission is hereby granted, free of charge… (전체 라이선스 텍스트)
1
2
</details>
해보기: 접을 수 있는 FAQ 만들기
1
2
3
1. Details 태그로 FAQ 섹션 추가
2. 3개 이상의 Q&A 작성
3. 각 항목 클릭해서 테스트
결과: 긴 내용을 깔끔하게 정리할 수 있습니다
정리
완료 체크:
- Shields.io 뱃지를 추가할 수 있다
- HTML로 레이아웃을 꾸밀 수 있다
- Details 태그로 접을 수 있는 섹션을 만들 수 있다
고급 README 체크리스트:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
✨ 뱃지:
- [ ] 버전 뱃지
- [ ] 라이선스 뱃지
- [ ] 빌드 상태
- [ ] 기술 스택 뱃지
🎨 레이아웃:
- [ ] 로고 중앙 정렬
- [ ] 이미지 크기 조절
- [ ] 테이블 활용
- [ ] 버튼 스타일 링크
📦 접기/펼치기:
- [ ] FAQ
- [ ] Changelog
- [ ] 긴 코드 블록
README 업그레이드 팁:
1
2
3
4
1. 뱃지는 3-5개 정도만
2. 이미지는 적절한 크기로
3. 접기는 선택적 정보에만
4. 과도한 꾸밈은 자제
Week 3 완료! 🎉
다음 주(Day 16-20)에는 Repository 설정을 배웁니다.
다음: Day 16 - .gitignore 이해하기 →
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.