Git과 Github는 완전히 다르다.
Git은 내 컴퓨터 안에서 소스코드를 기록하는 도구의 개념이고
Github는 도구로 만든 결과물을 개발자들과 공유하고 협업할 수 있게 하는 공간의 개념이다.
1. Git 설치하기
1_1) 링크접속 > Downloads 클릭

1_2) 64-bit Git for Windows Setup 클릭 후 다운로드
설치파일 그냥 쭉 Next누르며 설치

1_3) Finish단계 체크박스 해제

2. Git 기본 명령어 (버전관리)
명령 프롬프트를 먼저 실행(cmd)한다.
본격적으로 버전관리 명령어를 실행하기 전 Git 설치 확인을 진행 후
아래 순서대로 버전 관리를 진행한다.
# Git 설치확인
git --version
2_1. mysite 폴더를 추적할 수 있도록 할것임!
cd 폴더경로

2_2. 프로젝트 디렉토리 내에 로컬 저장소 생성
git init
폴더안에 투명폴더 생긴것 확인
투명폴더가 같은 레벨에 있는 파일이나 폴더를 추적함
같은 레벨에 애들은 연습생
데뷔를 하기위한 스테이지를 만들어서 누굴 데뷔시킬지 올린 후 앨범 사진을 찍음
스테이지에 올리는 작업 = add
add를 했다고 해서 데뷔하는거 아님(버전 만들어지는거 아님)
사진을 찍어 = 기록이 남음 = 버전으로 만든다 = commit

2_3. git 버전 관리할 파일 선택 (add, stage에 올리는 작업)
git add index.html
2_4. 하나의 버전으로 만들기 (commit)
스테이지에 올린게 버전으로 만들어지는것임!!
실제로 작업할때 버전 만들어서 올린 후 공유를 함.
언제든지 돌아갈 수 있는 지금까지의 버전
따옴표안에는 지금 올리는 버전에 대한 설명을 쓰면 됨
git commit -m "버전에 대한 설명"
📌 Git을 처음 설치하는 경우 (아래와 같은 메세지 출력되는 경우)

# 등록
git config --global user.email "Github에서 사용할 이메일 주소"
git config --global user.name "이름"
# 등록확인
git config user.email
git config user.name
잘못 등록한 경우 등록 코드에 메일주소나 이름을 다시 입력하여 실행하면 된다.
등록 후 다시 실행 ▶

2_5. 로그 확인하기
git log
실행결과 ▶

2_6. 여러 파일 함께 선택(stage에 현재 디렉토리에 있는 변화된 모든 파일)
여러 파일 선택 예제를 보기 위해 아래와 같이 3개의 파일들을 생성하였다.

※ README.md : 프로젝트에 대한 설명서를 작성하는 파일 (가장 먼저 보여지는 문서), 마크다운으로 작성
# 모든 파일 선택
git add .
2_7. 선택된 여러 파일을 commit
git commit -m "현재 디렉토리에 있는 모든 파일을 커밋"
추가한 3개의 파일 변경사항이 있었다고 출력이 된다.
실행결과 ▶

3. Github 설정하기
3_1. Github 가입 후 Create repository 클릭 > repository 만들기
3_1_a. 가입 후 새로운 repositories 생성

3_1_b. site이름과 설명 설정
Add README 별도로 만들지 않은 경우 on으로 설정하여 Github에서 만들 수 있음.

3_2. 원격 저장소 주소 설정하기
만든 Github의 원격 저장소 주소를 복사한 후 아래 명령어에 맞게 설정하여 cmd창에 입력한다.

# 기본 문법
git remote add 별칭 원격저장소주소
# 작성 코드
git remote add origin https://github.com/sdesign416/mysite.git
3_3. 원격 저장소 주소 확인하기
git remote -v
3_4. 원격 저장소 주소 삭제하기
# 기본 문법
git remote remove 별칭
# 작성 코드
git remote remove origin
3_5. 생성한 버전들 github로 전송
Git에서 Commit했던 버전들을 github으로 전송(푸시)한다.
3_5_a. cmd창에 아래 코드 입력
# 기본 문법
git push -u 별칭 master
# 작성 코드
git push -u origin master
3_5_b. 코드 입력 후 나오는 팝업창 실행 (처음 한번만 팝업창 나타남)

3_5_c. Github로 가서 mysite에서 파일들 올라왔는지 확인
파일 잘 올라왔으면 전송이 된것임

💡 -u
-u 옵션을 사용하면 로컬 브랜치와 원격 브랜치의 연결(추적)을 설정할 수 있다.
처음 한 번 설정하면 다음부터는 브랜치 이름 없이
git push나 git pull만 입력해도 자동으로 origin/master와 연결할 수 있다.
3_6. Github Pages활용해서 웹사이트 배포하기
작성한 파일을 누구나 접속할 수 있도록 인터넷에 배포하는 방법이다.
3_6_a. 내 저장소에 접속하여 상단 톱니바퀴모양 settings 클릭

3_6_b. 배포 브랜치(Branch) 설정
Pages 메뉴로 들어가
Branch 설정을 master로 변경 후 save 해준다.
※ Github는 첫 시작 페이지를 index.html로 보여주기때문에 메인 페이지의 파일은 index.html로 해주어야 한다.

Save 후 새로고침을 해보면 아래 이미지와 같이 웹사이트 주소가 만들어진다.

'웹 개발' 카테고리의 다른 글
| [JavaScript] Node.js에서 .js와 .mjs 파일의 차이점 (0) | 2026.06.30 |
|---|---|
| [JavaScript] 정규식(Regex)에서 +는 언제 사용할까? (0) | 2026.06.22 |
| VSCode에서 바로 Github에 프로젝트 올리기 (0) | 2026.06.18 |
| [JavaScript] 자바스크립트 기본 개념 (0) | 2026.06.15 |
| HTML문서 기본 설정, 알아두면 좋은 단축키(VSCode사용) (0) | 2026.06.10 |