반응형
📖 무엇을 배우나요?
- Git의 3가지 영역 (Working Directory, Staging Area, Repository)
- git add와 git commit의 역할
- 좋은 커밋 메시지 작성법
- 포트폴리오에 About 섹션 추가
🔧 실습: 변경사항 추적하고 저장하기
1단계: 첫 번째 커밋 만들기
# 현재 상태 확인 (빨간색으로 Untracked 파일들이 보임)
git status
# 모든 파일을 Staging Area에 추가
git add .
# 상태 다시 확인 (초록색으로 Staged 파일들이 보임)
git status
# 첫 번째 커밋 생성
git commit -m "feat: 포트폴리오 사이트 초기 버전 생성
- 기본 HTML 구조 및 스타일링 완료
- 그라디언트 배경과 반응형 디자인 적용
- README와 .gitignore 파일 추가"
# 커밋 히스토리 확인
git log --oneline
2단계: About 섹션 추가
# index.html 파일을 수정하여 About 섹션 추가
cat > index.html << 'EOF'
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>김개발의 포트폴리오</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
color: white;
}
.container {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
h1 {
font-size: 3em;
margin-bottom: 0.5em;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
p {
font-size: 1.2em;
opacity: 0.9;
}
.about {
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 30px;
margin: 40px 0;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.about h2 {
font-size: 2em;
margin-bottom: 20px;
color: #ffd700;
}
.skills {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
flex-wrap: wrap;
}
.skill-tag {
background: rgba(255, 255, 255, 0.2);
padding: 8px 16px;
border-radius: 20px;
font-size: 0.9em;
}
</style>
</head>
<body>
<div class="container">
<h1>안녕하세요! 김개발입니다 👋</h1>
<p>웹 개발자를 꿈꾸며 열심히 공부 중입니다</p>
<p>이 사이트는 제가 Git을 배우면서 만들어가는 포트폴리오입니다</p>
<div class="about">
<h2>About Me 🚀</h2>
<p>안녕하세요! 저는 새로운 기술을 배우는 것을 좋아하는 주니어 개발자입니다.</p>
<p>현재 프론트엔드 개발을 중심으로 공부하고 있으며, 사용자 경험을 개선하는 일에 관심이 많습니다.</p>
<div class="skills">
<span class="skill-tag">📚 HTML</span>
<span class="skill-tag">🎨 CSS</span>
<span class="skill-tag">⚡ JavaScript</span>
<span class="skill-tag">🔧 Git</span>
<span class="skill-tag">🌱 학습 중</span>
</div>
</div>
</div>
</body>
</html>
EOF
3단계: 변경사항 확인 및 단계별 커밋
# 변경된 파일 확인
git status
# 변경 내용 자세히 보기
git diff
# 파일을 스테이징 영역에 추가
git add index.html
# 커밋 생성
git commit -m "feat: About Me 섹션 추가
- 글래스모피즘 스타일의 About 섹션 구현
- 스킬 태그 레이아웃 추가
- 반응형 flexbox 디자인 적용"
# README 파일도 업데이트
cat > README.md << 'EOF'
# 김개발의 포트폴리오 웹사이트
Git을 배우면서 만들어가는 개인 포트폴리오 사이트입니다.
## 기술 스택
- HTML5
- CSS3 (Flexbox, CSS Variables)
- Git
## 디자인 특징
- 그라디언트 배경
- 글래스모피즘 효과
- 반응형 디자인
## 개발 진행 상황
- [x] 기본 페이지 구조 생성
- [x] About 섹션 추가
- [ ] 프로젝트 페이지 추가
- [ ] 연락처 페이지 추가
- [ ] 네비게이션 메뉴 추가
## 버전 히스토리
- v0.2: About Me 섹션 추가
- v0.1: 초기 포트폴리오 페이지 생성
EOF
git add README.md
git commit -m "docs: README 업데이트
- 개발 진행 상황 업데이트
- 디자인 특징 및 버전 히스토리 추가"🌐 결과 확인
브라우저를 새로고침하면 멋진 About 섹션이 추가된 포트폴리오를 확인할 수 있습니다!
💡 핵심 개념 정리
- Staging Area: 커밋할 준비가 된 변경사항들이 모이는 곳
- git add: 변경사항을 Staging Area에 추가
- git commit: Staging Area의 변경사항을 Repository에 영구 저장
- 커밋 메시지 규칙: type: subject 형식 (feat, fix, docs, style 등)
반응형
'git' 카테고리의 다른 글
| HTML로 배우는 Git 입문 시리즈 Part 1: Git 기초 마스터하기 (총 5편) - 3편: 시간여행 마스터 - 실수했을 때 돌아가기 (0) | 2025.08.21 |
|---|---|
| HTML로 배우는 Git 입문 시리즈 Part 1: Git 기초 마스터하기 (총 5편) - 1편: Git과 첫 만남 - 나만의 포트폴리오 사이트 시작하기 (feat, 실습) (5) | 2025.08.14 |
| Git - 두 버전 합치기 ( merge ) (0) | 2021.04.14 |
| Git- branch (0) | 2021.04.14 |
| Git - 다른 사람이 만든 저장소 받아오기 (0) | 2021.04.12 |
댓글