HTML로 배우는 Git 입문 시리즈 Part 1: Git 기초 마스터하기 (총 5편) - 1편: Git과 첫 만남

📖 무엇을 배우나요?

Git이 무엇이고 왜 필요한지
Git 설치 및 기본 설정
첫 번째 Git 저장소 만들기
기본 HTML 포트폴리오 페이지 생성

안녕하세요! 코딩과 함께하는 여러분의 성장을 응원하는 블로그의 첫 번째 시리즈, 'Git 입문 시리즈'에 오신 것을 환영합니다.

코딩을 하다 보면 이런 생각, 한 번쯤 해보셨을 거예요. "분명 어제는 잘 됐는데... 대체 뭘 바꿨더라?" "새로운 기능을 넣다가 코드가 다 엉망이 됐어... 되돌릴 수 없나?" "프로젝트_최종.hwp, 진짜_최종.hwp, 이게_진짜_최종.hwp... 내 파일들은 왜 이 모양일까?"

이 모든 고민을 한 방에 해결해 줄 구세주, Git(깃)에 대해 알아보겠습니다.

What is... git, 대체 뭔가요? 🧐

git은 **'버전 관리 시스템(Version Control System)'**입니다. 말이 어렵죠? 아주 쉽게 말해, '코드를 위한 타임머신' ⏳이라고 생각하면 완벽합니다.

내가 작성한 코드의 변경 내역을 하나하나 사진 찍듯이 저장해두고, 언제든지 원하는 시점의 모습으로 코드를 되돌릴 수 있는 마법 같은 도구죠.

왜 꼭 git을 써야 할까요?

모든 변경 이력을 추적해요. 누가, 언제, 어떤 코드를 고쳤는지 전부 기록으로 남기 때문에, 문제가 생겼을 때 원인을 찾기 쉽고 과거의 코드를 다시 살펴보기에도 편리합니다.
실수로부터 자유로워져요. 코드를 잘못 건드려서 모든 게 엉망이 되어도 괜찮아요. 마치 게임에서 '저장 지점(Save Point)'으로 돌아가듯, 코드가 정상적으로 작동하던 안전한 시점으로 순식간에 복귀할 수 있습니다.
안전하게 새로운 시도를 할 수 있어요. 원본 코드에 영향을 주지 않는 '브랜치(Branch)'라는 독립된 '평행 우주' 🪐를 만들어서, 그곳에서 마음껏 새로운 기능을 실험하고 개발할 수 있습니다. 실험이 성공하면 원본에 합치고, 실패하면 그 평행 우주를 그냥 없애버리면 그만이죠!
협업의 필수 도구예요. 여러 개발자가 하나의 프로젝트를 함께 만들 때, 서로의 작업이 겹치지 않게 하고 각자가 만든 코드를 체계적으로 합칠 수 있도록 도와줍니다. 오늘날 IT 회사에서 Git을 사용하지 않는 곳은 거의 없다고 봐도 무방합니다.

💻git 설치하기

이제 여러분의 컴퓨터에 타임머신을 설치해 봅시다.

🪟Windows 사용자

git-scm.com 사이트에 접속해 설치 파일을 다운로드합니다.
설치 프로그램을 실행하고, 대부분의 옵션은 기본값 그대로 둔 채 'Next' 버튼을 눌러 설치를 완료합니다.
설치가 끝나면 시작 메뉴에서 'Git Bash'를 찾아 실행해 보세요. 검은 터미널 창이 나타나면 성공입니다.

macOS 사용자

macOS는 터미널(Terminal)을 열고 아래 명령어를 먼저 입력해 보세요.

git --version

git version 2.x.x 와 같이 버전 정보가 나오면 이미 설치된 것입니다. 만약 설치가 필요하다는 창이 뜨면 안내에 따라 '개발자 도구'를 설치하면 Git이 함께 설치됩니다. 최신 버전을 원한다면 **Homebrew**를 이용해 brew install git 명령어로 설치하는 것을 추천합니다.

최초 설정 (컴퓨터 당 딱 한 번!)

Git을 설치했다면, 앞으로 버전을 기록할 때마다 사용할 '서명'을 등록해야 합니다. 여러분의 이름과 이메일 주소죠. 이 작업은 컴퓨터에 딱 한 번만 해주면 됩니다.

Windows는 **'Git Bash'**를, macOS는 **'터미널'**을 열고 아래 명령어를 차례로 입력하세요.

# Git 사용자 이름 설정 (큰따옴표 안에 본인 영문 이름을 넣으세요)
git config --global user.name "Gildong Hong"

# Git 사용자 이메일 설정 (큰따옴표 안에 본인 이메일 주소를 넣으세요)
git config --global user.email "myemail@example.com"

설정이 잘 되었는지 아래 명령어로 확인해 봅시다.

# 전체 설정 리스트 확인
git config --list

🔧 실습: 포트폴리오 프로젝트 시작

1단계: 포트폴리오 프로젝트 시작

# 프로젝트 폴더 생성
mkdir my-portfolio
cd my-portfolio

# Git 저장소 초기화 (.git 폴더가 생성됩니다)
git init

# 현재 상태 확인
git status

2단계: 첫 번째 HTML 페이지 생성

# 기본 포트폴리오 페이지 생성
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;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>안녕하세요! 김개발입니다 👋</h1>
        <p>웹 개발자를 꿈꾸며 열심히 공부 중입니다</p>
        <p>이 사이트는 제가 Git을 배우면서 만들어가는 포트폴리오입니다</p>
    </div>
</body>
</html>
EOF

**참고
EOF는 **'Here Document'의 끝을 알리는 신호(delimiter)**입니다.
쉽게 말해, 터미널에 여러 줄의 텍스트를 바로 입력할 때 **"여기까지가 내용의 끝입니다!"**라고 알려주는 약속된 표시입니다.
EOF는 "End Of File"의 약자이지만, 여기서는 파일의 끝이라는 원래 의미보다 '입력의 끝'을 알리는 신호로 사용됩니다.

3단계: Git 상태 확인 및 기본 설정

# 생성된 파일 확인
git status

# .gitignore 파일 생성 (불필요한 파일 제외)
cat > .gitignore << 'EOF'
# 운영체제 관련
.DS_Store
Thumbs.db

# 에디터 관련
.vscode/
.idea/

# 로그 파일
*.log

# 임시 파일
*.tmp
*~
EOF

# README 파일 생성
echo "# 김개발의 포트폴리오 웹사이트

Git을 배우면서 만들어가는 개인 포트폴리오 사이트입니다.

## 기술 스택
- HTML
- CSS
- Git

## 개발 진행 상황
- [x] 기본 페이지 구조 생성
- [ ] About 섹션 추가
- [ ] 프로젝트 페이지 추가
- [ ] 연락처 페이지 추가" > README.md

.gitignore, 그게 뭔가요? 🤔

.gitignore는 이름 그대로, Git이 특정 파일이나 폴더를 추적하지 않도록(ignore) 만드는 설정 파일입니다. 이 파일 안에 무시하고 싶은 파일이나 폴더의 목록을 적어두면, Git은 그 파일들을 없는 셈 치고 상태 변화를 전혀 신경 쓰지 않습니다.
.gitignore 파일은 보통 프로젝트의 최상위 폴더(루트 디렉토리), 즉 .git 폴더가 있는 곳에 위치시킵니다.

🌐 결과 확인

index.html 파일을 더블클릭해서 브라우저로 열어보세요! 멋진 그라디언트 배경의 포트폴리오 첫 페이지가 나타납니다.

💡 핵심 개념 정리

Working Directory: 실제 파일들이 있는 작업 공간
Git Repository: .git 폴더 - Git이 버전을 관리하는 데이터베이스
git init: 현재 폴더를 Git 저장소로 만드는 명령어
git status: 현재 Git 상태를 확인하는 명령어

'git' 카테고리의 다른 글

HTML로 배우는 Git 입문 시리즈 Part 1: Git 기초 마스터하기 (총 5편) - 3편: 시간여행 마스터 - 실수했을 때 돌아가기 (0)	2025.08.21
HTML로 배우는 Git 입문 시리즈 Part 1: Git 기초 마스터하기 (총 5편) - 2편: 변화 추적하기 - 포트폴리오에 생명 불어넣기 (0)	2025.08.20
Git - 두 버전 합치기 ( merge ) (0)	2021.04.14
Git- branch (0)	2021.04.14
Git - 다른 사람이 만든 저장소 받아오기 (0)	2021.04.12

코개의 일상

HTML로 배우는 Git 입문 시리즈 Part 1: Git 기초 마스터하기 (총 5편) - 1편: Git과 첫 만남 - 나만의 포트폴리오 사이트 시작하기 (feat, 실습)

📖 무엇을 배우나요?

What is... git, 대체 뭔가요? 🧐

왜 꼭 git을 써야 할까요?

💻git 설치하기

🪟Windows 사용자

macOS 사용자

최초 설정 (컴퓨터 당 딱 한 번!)

🔧 실습: 포트폴리오 프로젝트 시작

.gitignore, 그게 뭔가요? 🤔

🌐 결과 확인

💡 핵심 개념 정리

'git' 카테고리의 다른 글

댓글

티스토리툴바

HTML로 배우는 Git 입문 시리즈 Part 1: Git 기초 마스터하기 (총 5편) - 1편: Git과 첫 만남 - 나만의 포트폴리오 사이트 시작하기 (feat, 실습)

📖 무엇을 배우나요?

What is... git, 대체 뭔가요? 🧐

왜 꼭 git을 써야 할까요?

💻git 설치하기

🪟Windows 사용자

macOS 사용자

최초 설정 (컴퓨터 당 딱 한 번!)

🔧 실습: 포트폴리오 프로젝트 시작

.gitignore, 그게 뭔가요? 🤔

🌐 결과 확인

💡 핵심 개념 정리

'git' 카테고리의 다른 글

관련글

댓글

티스토리툴바