VSCode Git HTM CSS JS GitHub git

✅ 1. VSCode 학습 및 정리

📌 1-1. 설치 및 준비

• VSCode 설치
  • 링크: https://code.visualstudio.com/docs/?dv=win64user
  • 설치파일: VSCodeUserSetup-x64-1.99.3.exe
• 참고 사이트
  • HTML 태그 문서:
    W3Schools
    MDN Web Docs

---

📌 1-2. VSCode 확장 프로그램 (Extensions) 설치

• 필수 설치 항목:
  • Auto Rename Tag (자동 태그 닫기)
  • Live Server (HTML 실시간 미리보기)

---

📌 1-3. VSCode에서 HTML 실행하기

• index.html 파일에서 우클릭 → Open with Live Server
• 실시간 웹 미리보기 가능

---

📌 1-4. 작업 폴더 열기

• 메뉴: File → Open Folder
• 폴더 경로 예시: E:\work
  → 이 폴더에서 HTML, CSS, JS 파일을 관리

---

📌 1-5. 소스 제어 (Git과 연계)

• 왼쪽 사이드바의 Source Control 아이콘 클릭
• 변경된 파일에 + 클릭 후 → Commit 메시지 입력 → 체크 아이콘 클릭
• 푸시는 터미널 또는 Git과 연계해서 실행

 

 

✅ 2. Git 관련 학습 요약 및 정리

📌 2-1. Git 설치 및 초기 설정

• Git 다운로드: https://git-scm.com/
• 설치 시 main 브랜치 옵션 선택

bash

 

# 사용자 정보 설정

git config --global user.name "Your Name"

git config --global user.email "your@email.com"

---

📌 2-2. Git 로컬 저장소 초기화 및 커밋

bash

 

# 작업 폴더에서 실행

cd E:\work

git init     # Git 저장소 초기화

git add .  # 모든 파일 추가

git commit -m "v1"  # 첫 커밋

---

📌 2-3. Git 버전 확인 및 이동

bash

 

git log # 커밋 목록 보기

git checkout <커밋ID> # 특정 버전 이동

git checkout main # 최신 브랜치로 복귀

---

📌 2-4. GitHub와 연동

bash

 

# 원격 저장소 연결

git remote add origin https://github.com/yourname/test.git

git branch -M main # 브랜치 이름 설정

git push -u origin main # GitHub로 최초 업로드

 

*자신의 브랜치, 폴더 Code의 HTTPS 복사

---

📌 2-5. GitHub → 로컬로 변경사항 가져오기

bash

 

git pull # 원격 저장소의 변경사항 내려받기

---

📌 2-6. GitHub 기존 저장소 클론하기

bash

 

git clone https://github.com/yourname/507_html.git cd 507_html

git pull

---

📌 2-7. 변경사항 저장 후 푸시

bash

 

git add .

git commit -m "변경내용 커밋"

git push