diff --git a/01-linktree-skeleton.js b/01-linktree-skeleton.js
new file mode 100644
index 0000000..cc923be
--- /dev/null
+++ b/01-linktree-skeleton.js
@@ -0,0 +1,177 @@
+/* ======================================================
+   🚀 Week 01 Study File: HTML + Git + Deploy 개념 정리
+   ====================================================== */
+
+
+/* ======================================================
+   [1] Git 기본 설정 (터미널에서 실행)
+   - Git 커밋 작성자 정보 설정
+   - 최초 1회만 설정하면 됨
+   ====================================================== */
+
+/*
+git config --global user.name "이름"
+→ Git 커밋 작성자 이름 설정
+
+git config --global user.email "이메일"
+→ GitHub 계정 이메일과 동일하게 맞추는 것이 좋음
+*/
+
+
+/* ======================================================
+   [2] Git 저장소 생성 & GitHub 연결
+   - 로컬 저장소 생성 후 원격 저장소와 연결
+   - add → commit → push 흐름 이해하기
+   ====================================================== */
+
+/*
+git init
+→ 현재 폴더를 Git 저장소로 초기화
+
+git remote add origin https://github.com/username/linktree-project.git
+→ GitHub 원격 저장소 연결
+
+git add .
+→ 모든 파일을 스테이징 영역에 추가
+
+git commit -m "first commit"
+→ 첫 번째 커밋 생성
+
+git push -u origin main
+→ GitHub로 코드 업로드
+*/
+
+
+/* ======================================================
+   [3] Emmet 구조 생성 (HTML 자동 생성 도구)
+   - 반복되는 HTML 구조를 빠르게 생성
+   - 생산성 향상 필수 도구
+   ====================================================== */
+
+/*
+div.container>header+main+footer
+→ Tab 누르면 아래 HTML 자동 생성
+*/
+
+/*
+<div class="container">
+    <header></header>
+    <main></main>
+    <footer></footer>
+</div>
+*/
+
+
+/* ======================================================
+   [4] Semantic HTML 구조 예시
+   - 의미 중심 태그 사용
+   - 검색엔진 최적화(SEO)에 중요
+   ====================================================== */
+
+/*
+<main class="app-container">
+
+    <section class="profile-section">
+        프로필 영역
+    </section>
+
+    <section class="link-list">
+        링크 버튼 영역
+    </section>
+
+    <section class="social-icons">
+        SNS 아이콘 영역
+    </section>
+
+</main>
+*/
+
+// main    : 페이지 핵심 콘텐츠
+// section : 의미 있는 구역 구분
+// class   : CSS 스타일 적용을 위한 이름
+
+
+/* ======================================================
+   [5] Form 태그 (Frontend UI 구현)
+   - 사용자 입력을 받는 인터페이스
+   - 현재는 서버가 없어 실제 전송은 되지 않음
+   ====================================================== */
+
+/*
+<form>
+
+  <input 
+    type="text" 
+    placeholder="이름" 
+    required
+  >
+
+  <input 
+    type="email" 
+    placeholder="이메일" 
+    required
+  >
+
+  <textarea 
+    placeholder="메시지를 입력하세요"
+  ></textarea>
+
+  <button type="submit">
+    보내기
+  </button>
+
+</form>
+*/
+
+// ⚠ 서버 연결 전까지는 실제 데이터 전송되지 않음
+// 👉 이후 Node.js에서 서버와 연결 예정
+
+
+/* ======================================================
+   [6] OG Meta Tag (카카오톡 공유 썸네일)
+   - SNS 공유 시 미리보기 정보 설정
+   - title / description / image 중요
+   ====================================================== */
+
+/*
+<meta property="og:title" content="홍길동의 링크트리">
+<meta property="og:description" content="풀스택 개발자 포트폴리오입니다.">
+<meta property="og:image" content="./images/og-thumb.jpg">
+*/
+
+// ⚠ og:image 경로에 실제 이미지 파일이 존재해야 정상 작동
+
+
+/* ======================================================
+   [7] Favicon 설정
+   - 브라우저 탭 아이콘 설정
+   ====================================================== */
+
+/*
+<link rel="icon" href="./favicon.ico">
+*/
+
+
+/* ======================================================
+   [8] 배포 흐름 이해하기
+   - 코드가 사용자에게 전달되는 과정
+   ====================================================== */
+
+// Local (내 컴퓨터)
+//   ↓ git push
+// GitHub (원격 저장소)
+//   ↓ 자동 연동
+// Vercel 배포 서버
+//   ↓
+// 전 세계 접속 가능한 URL 생성
+
+
+/* ======================================================
+   🎯 핵심 요약
+   ====================================================== */
+
+// Git → 코드 버전 관리 시스템
+// Semantic HTML → 검색엔진이 이해하기 좋은 구조
+// Form → 사용자 입력 UI
+// OG Tag → SNS 공유 최적화
+// Deploy → 인터넷에 프로젝트 공개
diff --git a/01-linktree-skeleton.md b/01-linktree-skeleton.md
new file mode 100644
index 0000000..ba7e2cb
--- /dev/null
+++ b/01-linktree-skeleton.md
@@ -0,0 +1,295 @@
+# 🚀 Week 1 (수정안): 뼈대 잡기 & 개발 환경 "완벽" 구축
+
+> **"단순한 코딩이 아닙니다. 전 세계에 접속 가능한 '내 서버'를 갖는
+> 시간입니다."**
+
+------------------------------------------------------------------------
+
+## 🔥 변경 포인트
+
+-   ✅ **Git/GitHub 연동 추가**\
+    → 첫날부터 버전 관리를 시작합니다. (※ 여기서 시간 많이 소요됨)
+
+-   ✅ **Rich Content 구현**
+
+    -   `<iframe>` (유튜브 / 지도 삽입)
+    -   `<form>` (연락처 양식)
+    -   `<meta>` (카카오톡 공유 미리보기 OG 태그)
+
+-   ✅ **Live Deploy**
+
+    -   Vercel / GitHub Pages 활용
+    -   실제 URL 생성
+
+------------------------------------------------------------------------
+
+# 📅 Monday (오후 2.5h)
+
+## Pro처럼 시작하기 (Git & Semantic)
+
+------------------------------------------------------------------------
+
+## 1️⃣ The Real Environment (1시간)
+
+### 💻 VS Code 심화 세팅
+
+-   Prettier (자동 포맷팅)
+-   Material Icon Theme
+-   Live Server
+
+### ⚙ settings.json 설정
+
+-   저장 시 자동 정렬 옵션 활성화
+-   왜 편한지 직접 체감하게 하기
+
+------------------------------------------------------------------------
+
+### 🧠 Git & GitHub CLI (가장 중요 / 가장 오래 걸림)
+
+1.  Git 설치
+2.  git config 설정
+
+``` bash
+git config --global user.name "이름"
+git config --global user.email "이메일"
+```
+
+3.  GitHub Repository 생성\
+    → `linktree-project`
+
+4.  Local ↔ Remote 연결
+
+``` bash
+git init
+git remote add origin https://github.com/username/linktree-project.git
+```
+
+5.  첫 커밋
+
+``` bash
+git add .
+git commit -m "first commit"
+git push -u origin main
+```
+
+> ⚠ 학생들마다 인증 오류, 설치 오류 발생 → 여기서 1시간 훅 감
+
+------------------------------------------------------------------------
+
+## 2️⃣ Semantic Structure
+
+### "검색엔진이 좋아하는 구조" (1시간 30분)
+
+### ✨ Emmet 숙련
+
+``` html
+div.container>header+main+footer
+```
+
+단축키로 구조 빠르게 생성하는 법 훈련
+
+------------------------------------------------------------------------
+
+### 🏗 구조 고도화
+
+❌ 단순 `<div>` 남발 금지
+
+  태그          용도
+  ------------- -------------
+  `<nav>`       내비게이션
+  `<article>`   독립 콘텐츠
+  `<section>`   구역 구분
+  `<aside>`     보조 콘텐츠
+
+------------------------------------------------------------------------
+
+### 🎨 CSS를 위한 사전 준비
+
+-   class / id 미리 설계
+-   예시: `<div class="profile-card">`
+
+------------------------------------------------------------------------
+
+### 🧪 실습 코드
+
+``` html
+<main class="app-container">
+    <section class="profile-section">
+    </section>
+
+    <section class="link-list">
+    </section>
+
+    <section class="social-icons">
+    </section>
+</main>
+```
+
+------------------------------------------------------------------------
+
+# 📅 Tuesday (오전 2.5h)
+
+## 콘텐츠 채우기 & 실전 배포
+
+------------------------------------------------------------------------
+
+## 1️⃣ Advanced HTML Tags (1시간)
+
+### 🎵 Media Embedding (`iframe`)
+
+-   유튜브 → "소스 코드 복사"
+-   구글 맵 → 퍼가기 기능 활용
+
+------------------------------------------------------------------------
+
+### 📩 Input & Form (UI만 구현)
+
+``` html
+<form>
+  <input type="text" placeholder="이름" required>
+  <input type="email" placeholder="이메일" required>
+  <textarea placeholder="메시지를 입력하세요"></textarea>
+  <button type="submit">보내기</button>
+</form>
+```
+
+📌 학습 포인트
+
+-   `placeholder`
+-   `required`
+-   `type="email"`
+-   `button type="submit"`
+
+💬 설명 포인트:
+
+> 지금은 껍데기(Frontend)만 만든 상태입니다.\
+> 5주차(Node.js)에 서버를 배우면 실제로 메일이 전송되도록 구현할 수
+> 있습니다.
+
+------------------------------------------------------------------------
+
+## 2️⃣ Meta Tags & SEO (30분)
+
+### 📲 카톡 공유 썸네일 만들기 (OG Tag)
+
+`<head>` 안에 추가:
+
+``` html
+<meta property="og:title" content="홍길동의 링크트리">
+<meta property="og:description" content="풀스택 개발자 포트폴리오입니다.">
+<meta property="og:image" content="./images/og-thumb.jpg">
+```
+
+⚠ 주의:
+
+-   images 폴더 안에 `og-thumb.jpg` 파일이 실제로 존재해야 함
+-   파일이 없으면 카톡 미리보기가 깨짐
+-   수업 자료 폴더에 예제 이미지 미리 준비 권장
+
+------------------------------------------------------------------------
+
+## 3️⃣ Deploy
+
+### "Hello World to the World" (1시간)
+
+### 🚀 배포 플랫폼 (택 1)
+
+-   Vercel (가장 쉬움, 추천)
+-   Netlify
+-   GitHub Pages
+
+------------------------------------------------------------------------
+
+### 📱 모바일 확인
+
+1.  배포된 URL 복사
+2.  카카오톡 "나에게 보내기" 전송
+3.  스마트폰으로 접속 확인
+4.  친구들과 서로 접속해보기
+
+------------------------------------------------------------------------
+
+# ⚠️ 수업 전 마지막 체크리스트 (디테일 보강)
+
+이 부분만 미리 인지하고 계시면 수업 완성도 급상승합니다.
+
+------------------------------------------------------------------------
+
+## 1️⃣ Git 인증 이슈 (비밀번호 중단)
+
+2021년부터 GitHub는 비밀번호 인증을 지원하지 않습니다.
+
+### 상황
+
+터미널에서 비밀번호 입력 요구 → GitHub 웹사이트 비밀번호 입력 → 실패
+
+### 대비책
+
+**방법 A (추천)**\
+VS Code → 왼쪽 Source Control 탭 → "GitHub에 게시" 버튼 사용\
+→ 브라우저 인증으로 자동 연결
+
+**방법 B (정석)**\
+GitHub에서 Personal Access Token 발급 후 비밀번호 대신 입력\
+→ 초보자에게는 난이도 높음
+
+🎯 전략:
+
+> CLI가 막히면 바로 VS Code GUI 기능으로 우회시킨다.
+
+------------------------------------------------------------------------
+
+## 2️⃣ `<form>` 태그 작동 원리 설명
+
+상황:\
+학생들이 버튼 누르고 "메일이 안 와요!"라고 질문
+
+설명 전략:
+
+> 지금은 Frontend만 구현했기 때문입니다.\
+> 5주차(Node.js)에 서버를 배우면 실제 전송이 가능합니다.
+
+→ 다음 커리큘럼 자연스럽게 예고
+
+------------------------------------------------------------------------
+
+## 3️⃣ OG 이미지 경로 확인
+
+``` html
+<meta property="og:image" content="./images/og-thumb.jpg">
+```
+
+### 체크 사항
+
+-   images 폴더 존재 여부
+-   og-thumb.jpg 파일 실제 존재 여부
+-   파일명 오타 여부
+
+수업 전 예제 이미지 파일 반드시 준비
+
+------------------------------------------------------------------------
+
+# 👨‍🏫 Teacher's Note
+
+## Git 대참사 대비 핵심 전략
+
+> CLI가 막히면 즉시 GUI로 전환
+
+-   GitHub Desktop
+-   VS Code 내장 Git 기능 활용
+
+------------------------------------------------------------------------
+
+## ⏳ 시간이 남는다면 (심화)
+
+-   SVG 아이콘 직접 삽입
+-   `fill` 속성 확인
+-   favicon 설정 (`favicon.ico`)
+-   브라우저 탭 아이콘 변경
+
+------------------------------------------------------------------------
+
+# 📝 과제
+
+1.  본인 페이지 URL 제출
+2.  `README.md`에 프로젝트 소개 3줄 이상 작성 후 커밋
diff --git a/02-linktree-styling.js b/02-linktree-styling.js
new file mode 100644
index 0000000..ebc0019
--- /dev/null
+++ b/02-linktree-styling.js
@@ -0,0 +1,97 @@
+/* ======================================================
+   🎨 Week 02 Study File: 넷플릭스 스타일 UI 정리
+   ====================================================== */
+
+/* [1] Reset CSS (브라우저 기본값 제거)
+   - box-sizing: padding을 줘도 박스가 커지지 않게 함 (필수!)
+*/
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box; 
+}
+
+body {
+    background-color: #141414;        /* 다크 모드 배경 */
+    color: white;                     /* 기본 글자색 */
+    font-family: 'Noto Sans KR', sans-serif;
+}
+
+/* [2] Flexbox: 헤더 중앙 정렬 
+   - flex-direction: column (세로 정렬)
+   - align-items: center (가로축 가운데)
+*/
+header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 3rem 0;
+    text-align: center;
+}
+
+/* [3] 프로필 이미지 스타일링
+   - object-fit: cover (이미지 찌그러짐 방지)
+*/
+header img {
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;               /* 완전한 원형 */
+    object-fit: cover;
+    border: 3px solid #E50914;        /* 포인트 컬러 */
+    margin-bottom: 1rem;
+}
+
+/* [4] Grid 레이아웃 (링크 리스트)
+   - 1fr: 남은 공간을 비율대로 채움
+   - gap: 격자 사이의 간격
+*/
+.link-list ul {
+    display: grid;
+    grid-template-columns: 1fr;       /* 모바일 기본: 1줄 */
+    gap: 1rem;
+    list-style: none;                 /* 리스트 점 제거 */
+    max-width: 600px;
+    margin: 0 auto;                   /* 블록 요소 중앙 정렬 */
+    padding: 0 20px;
+}
+
+/* [5] 카드 디자인 & 버튼
+*/
+.link-list li a {
+    display: flex;                    /* 텍스트/아이콘 중앙 정렬용 */
+    align-items: center;
+    justify-content: center;
+    background-color: #333;
+    padding: 1.2rem;
+    border-radius: 8px;
+    font-weight: bold;
+    text-decoration: none;            /* 밑줄 제거 */
+    color: white;
+    
+    /* 애니메이션 준비 (0.3초) */
+    transition: all 0.3s ease;
+    border: 1px solid transparent;    /* 호버 시 흔들림 방지용 투명 테두리 */
+}
+
+/* [6] Hover 인터랙션 (마우스 올렸을 때) 
+*/
+.link-list li a:hover {
+    background-color: #E50914;
+    transform: scale(1.05);           /* 1.05배 확대 */
+    box-shadow: 0 10px 20px rgba(229, 9, 20, 0.4);
+}
+
+/* [7] 반응형 (태블릿/PC 대응)
+   - 768px 이상일 때 2열로 변경
+*/
+@media (min-width: 768px) {
+    .link-list ul {
+        grid-template-columns: 1fr 1fr;
+    }
+    
+    /* 첫 번째 카드는 가로로 꽉 채우기 (선택사항) */
+    .link-list li:first-child {
+        grid-column: span 2;
+    }
+}
diff --git a/02-linktree-styling.md b/02-linktree-styling.md
new file mode 100644
index 0000000..e9ecbdf
--- /dev/null
+++ b/02-linktree-styling.md
@@ -0,0 +1,234 @@
+
+# 🎨 Week 02. 옷 입히기 – 넷플릭스 스타일 UI (CSS Magic)
+
+> "CSS는 단순히 예쁘게 만드는 게 아닙니다. 사용자의 시선을 지휘하는 기술입니다."
+
+---
+
+## 🎯 이번 주 목표
+
+- CSS Box Model을 이해하고 여백(Margin / Padding)을 제어한다.
+- Flexbox & Grid를 사용하여 자유자재로 레이아웃을 구성한다.
+- Animation & Hover 효과로 살아있는 인터랙션을 구현한다.
+
+### 🔑 Key Tech
+- CSS3
+- Flexbox
+- CSS Grid
+- Media Query
+
+### 🏆 Result
+다크 모드 기반의 세련된 디자인 + 마우스를 올리면 반응하는 버튼 구현
+
+---
+
+# 📅 Monday (오후 2.5h)
+## 레이아웃의 혁명, Flexbox
+
+---
+
+## ✅ Check Point 1. HTML 클래스명 일치 여부 (수업 시작 전 확인)
+
+💬 수업 시작 멘트:
+
+> "여러분, 지난주에 만든 index.html을 켜세요.  
+> `<section>` 태그에 `class="link-list"`가 있는지,  
+> 그 안에 `<ul>`과 `<li>` 구조가 있는지 확인하세요.  
+> 다르다면 HTML을 수정하거나 CSS 선택자를 본인 코드에 맞게 바꿔야 합니다."
+
+⚠ CSS는 선택자가 정확히 일치해야 적용됩니다.
+
+---
+
+## 1️⃣ Setup: CSS 연결하기 (30분)
+
+### 📁 파일 생성
+- `style.css` 파일을 `index.html`과 같은 폴더에 생성
+
+### 🔗 HTML 연결
+
+```html
+<link rel="stylesheet" href="style.css">
+```
+
+### 🔤 Google Fonts
+- Google Fonts에서 `Noto Sans KR` 또는 `Pretendard` 검색
+- `<head>` 안에 폰트 링크 추가
+
+---
+
+## 2️⃣ Core Concept: 초기화와 박스 모델 (40분)
+
+### A. Reset CSS
+
+```css
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background-color: #141414;
+    color: white;
+    font-family: 'Noto Sans KR', sans-serif;
+}
+```
+
+### B. Box Model 이론
+
+- Content
+- Padding
+- Border
+- Margin
+
+---
+
+## 3️⃣ Hands-on: Flexbox로 중앙 정렬하기 (1시간 20분)
+
+### A. 프로필 영역
+
+```css
+header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 3rem 0;
+    text-align: center;
+}
+
+header img {
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 3px solid #E50914;
+    margin-bottom: 1rem;
+}
+
+header h1 {
+    font-size: 1.5rem;
+    margin-bottom: 0.5rem;
+}
+```
+
+### B. 링크 기본 스타일
+
+```css
+a {
+    text-decoration: none;
+    color: white;
+    cursor: pointer; /* 👈 디테일 추가 */
+}
+```
+
+---
+
+# 📅 Tuesday (오전 2.5h)
+## 그리드 시스템 & 인터랙션
+
+---
+
+## 1️⃣ Core Concept: Flex vs Grid (40분)
+
+- Flexbox → 1차원
+- Grid → 2차원
+
+---
+
+## 2️⃣ Hands-on: 벤토 그리드 배치 (1시간)
+
+```css
+.link-list ul {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1rem;
+    list-style: none;
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+.link-list li a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #333;
+    padding: 1.2rem;
+    border-radius: 8px;
+    font-weight: bold;
+    border: 1px solid transparent;
+}
+```
+
+---
+
+## 3️⃣ Interaction
+
+```css
+.link-list li a {
+    transition: all 0.3s ease;
+}
+
+.link-list li a:hover {
+    background-color: #E50914;
+    transform: scale(1.05);
+    box-shadow: 0 10px 20px rgba(229, 9, 20, 0.4);
+}
+```
+
+---
+
+## 4️⃣ Responsive (시간 부족 시 전략 포함)
+
+```css
+@media (min-width: 768px) {
+    .link-list ul {
+        grid-template-columns: 1fr 1fr;
+    }
+
+    .link-list li:first-child {
+        grid-column: span 2;
+    }
+}
+```
+
+⏱ 만약 시간이 부족하다면:
+
+- 코드를 그대로 복사해서 붙여넣게 한다.
+- `768px` 숫자를 바꿔보면서 화면이 어떻게 변하는지만 보여준다.
+- Media Query의 "개념 이해"에 집중하고 디테일 설명은 다음 기회로 넘겨도 충분하다.
+
+---
+
+# 👨‍🏫 Teacher's Note
+
+## ⚠ CSS가 안 먹혀요!
+
+- 오타 확인
+- `<link>` 경로 확인
+- 강력 새로고침: Ctrl + Shift + R
+
+### 🔎 F12 개발자 도구 활용
+- Margin / Padding 시각적으로 확인
+
+---
+
+## 🚀 심화 과제
+
+- Glassmorphism  
+  `backdrop-filter: blur(10px)`
+
+- Background Image 추가
+
+---
+
+# 📝 과제
+
+### 🎯 미션
+넷플릭스 스타일을 벗어나 **"나만의 테마 컬러"**로 커스터마이징
+
+### 📤 제출
+Vercel에 다시 배포(Push) 후 변경된 링크 제출
+
diff --git a/03-bootstrap-portfolio.js b/03-bootstrap-portfolio.js
new file mode 100644
index 0000000..6a5c42b
--- /dev/null
+++ b/03-bootstrap-portfolio.js
@@ -0,0 +1,166 @@
+
+/* ======================================================
+   ⚡ Week 03 Study File: Bootstrap 5 핵심 코드 정리
+   ====================================================== */
+
+/* ------------------------------------------------------
+   [1] CDN 설치 (Bootstrap 5 기본 세팅)
+   - 파일 다운로드 없이 링크만 연결
+   - CSS는 <head>, JS는 </body> 직전에 위치
+---------------------------------------------------------
+
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+
+------------------------------------------------------ */
+
+
+/* ------------------------------------------------------
+   [2] Grid System (12 Column System)
+   공식: container > row > col-숫자
+   - 한 row 안의 col 합은 12
+   - col-md-6 → md 이상에서만 6칸
+---------------------------------------------------------
+
+<div class="container">
+  <div class="row">
+    <div class="col-12 col-md-6">왼쪽</div>
+    <div class="col-12 col-md-6">오른쪽</div>
+  </div>
+</div>
+
+------------------------------------------------------ */
+
+
+/* ------------------------------------------------------
+   [3] Hero Section 예제
+   - order 클래스로 모바일 순서 변경
+   - img-fluid로 반응형 이미지 처리
+---------------------------------------------------------
+
+<div class="container mt-5">
+  <div class="row align-items-center">
+
+    <div class="col-md-7 col-12 order-md-1 order-2">
+      <h1 class="display-4 fw-bold">풀스택 개발자 홍길동</h1>
+      <p class="lead">문제를 해결하는 코드를 작성합니다.</p>
+      <button class="btn btn-primary btn-lg">포트폴리오 보기</button>
+    </div>
+
+    <div class="col-md-5 col-12 order-md-2 order-1 text-center">
+      <img src="./images/me.jpg"
+           class="img-fluid rounded-circle shadow-lg"
+           alt="프로필 사진">
+    </div>
+
+  </div>
+</div>
+
+------------------------------------------------------ */
+
+
+/* ------------------------------------------------------
+   [4] Navbar (다크모드 + 모바일 햄버거 버튼 포함)
+   - data-bs-theme="dark" 하나로 다크모드 끝
+   - button 태그: 모바일에서 나오는 3선 버튼
+---------------------------------------------------------
+
+<nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
+  <div class="container">
+    <a class="navbar-brand" href="#">My Portfolio</a>
+    
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <div class="collapse navbar-collapse" id="navbarNav">
+      <ul class="navbar-nav ms-auto"> <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
+        <li class="nav-item"><a class="nav-link" href="#">Projects</a></li>
+      </ul>
+    </div>
+  </div>
+</nav>
+
+------------------------------------------------------ */
+
+
+/* ------------------------------------------------------
+   [5] Card Component (플레이스홀더 이미지 적용)
+   - picsum.photos → 랜덤 이미지 자동 출력
+---------------------------------------------------------
+
+<div class="col-md-4">
+  <div class="card h-100">
+    <img src="https://picsum.photos/400/200"
+         class="card-img-top"
+         alt="랜덤 이미지">
+    <div class="card-body">
+      <h5 class="card-title">프로젝트 제목</h5>
+      <p class="card-text">프로젝트 설명입니다.</p>
+      <a href="#" class="btn btn-primary">보러가기</a>
+    </div>
+  </div>
+</div>
+
+------------------------------------------------------ */
+
+
+/* ------------------------------------------------------
+   [6] Utility Classes 정리
+---------------------------------------------------------
+
+# 여백 (Spacing)
+mt-5  → margin-top
+mb-3  → margin-bottom
+py-4  → padding-top & bottom
+
+# 텍스트
+text-center → 가운데 정렬
+fw-bold     → 굵게
+fs-1        → 큰 글씨
+
+# 색상
+bg-dark       → 검정 배경
+text-primary  → 파란색 글자
+text-danger   → 빨간색 글자
+
+------------------------------------------------------ */
+/* ------------------------------------------------------
+   [Bonus] Bootstrap Icons 사용법
+   - <i class="bi bi-이름"></i> 형태로 사용
+   - 공식 문서에서 아이콘 이름 검색해서 사용
+---------------------------------------------------------
+
+<button class="btn btn-primary">
+  <i class="bi bi-hand-thumbs-up-fill"></i> 좋아요
+</button>
+<i class="bi bi-instagram text-danger fs-3"></i>
+
+------------------------------------------------------ */
+
+/* ------------------------------------------------------
+   [7] Bootstrap 커스터마이징 (덮어쓰기)
+   - 반드시 Bootstrap CSS 아래에 style.css 연결
+---------------------------------------------------------
+
+<link href="bootstrap.min.css" rel="stylesheet">
+<link href="style.css" rel="stylesheet">
+
+------------------------------------------------------ */
+
+/* style.css 예시 */
+
+.btn-primary {
+  /* 만약 색상이 안 바뀌면 !important를 뒤에 붙여보세요 (최후의 수단) */
+  background-color: #6c5ce7 !important; 
+  border-color: #6c5ce7 !important;
+}
+
+
+/* ======================================================
+   🎯 핵심 요약
+   1. 외우지 말고 공식 문서를 검색하라
+   2. Grid만 이해하면 레이아웃은 끝
+   3. img-fluid 안 쓰면 100% 터진다
+   ====================================================== */
+
diff --git a/03-bootstrap-portfolio.md b/03-bootstrap-portfolio.md
new file mode 100644
index 0000000..5326410
--- /dev/null
+++ b/03-bootstrap-portfolio.md
@@ -0,0 +1,229 @@
+# ⚡ Week 03. CSS 치트키: 부트스트랩5 (Bootstrap 5)
+
+> "바퀴를 다시 발명하지 마세요. (Don't Reinvent the Wheel)" 현업
+> 개발자들은 모든 걸 처음부터 만들지 않습니다. 검증된 도구를 활용해
+> **'속도'**를 냅니다.
+
+------------------------------------------------------------------------
+
+## 🎯 이번 주 목표
+
+-   **Library(라이브러리)**의 개념을 이해하고 프로젝트에 불러온다 (CDN)
+-   **Grid System (12분할)**을 이해하여 반응형 레이아웃을 1초 만에 짠다
+-   Component를 복사+붙여넣기 하여 그럴싸한 포트폴리오 사이트를 완성한다
+
+**Key Tech:** Bootstrap 5, CDN, Utility Classes\
+**Result:** PC/모바일에서 완벽하게 작동하는 반응형 포트폴리오 웹사이트
+
+------------------------------------------------------------------------
+
+# 📅 Monday (오후 2.5h)
+
+## 1️⃣ Setup: 10초 만에 환경 구축 (CDN) (30분)
+
+내 컴퓨터에 파일을 다운로드하지 않고, 인터넷 주소(CDN)만 연결하면 설치가
+끝납니다.
+
+### ✅ Bootstrap 5 Starter Template
+
+index.html을 새로 만들고 아래 코드를 붙여넣으세요. (기존 파일은 백업!)
+
+``` html
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>My Portfolio</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
+  </head>
+  <body>
+    
+    <h1 class="text-center mt-5">Hello, Bootstrap!</h1>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+  </body>
+</html>
+```
+
+------------------------------------------------------------------------
+
+## 2️⃣ Core Concept: 12단 그리드 시스템 (1시간)
+
+부트스트랩의 심장입니다. 화면을 가로 12칸으로 쪼개서 생각합니다.
+
+공식: container \> row \> col-숫자\
+규칙: 한 줄(Row) 안에 있는 col 숫자의 합이 12가 되어야 함
+
+반응형 접두사:
+
+-   col-6: (모바일\~) 항상 절반
+-   col-md-6: (태블릿\~) 화면이 중간 이상일 때만 절반
+
+### 📝 실습 코드 (Hero Section)
+
+``` html
+<div class="container mt-5">
+  <div class="row align-items-center">
+    <div class="col-md-7 col-12 order-md-1 order-2">
+      <h1 class="display-4 fw-bold">풀스택 개발자 홍길동</h1>
+      <p class="lead">문제를 해결하는 코드를 작성합니다.</p>
+      <button class="btn btn-primary btn-lg">포트폴리오 보기</button>
+      <button class="btn btn-outline-secondary btn-lg">연락하기</button>
+    </div>
+
+    <div class="col-md-5 col-12 order-md-2 order-1 text-center">
+      <img src="./images/me.jpg" class="img-fluid rounded-circle shadow-lg" alt="내 사진">
+    </div>
+  </div>
+</div>
+```
+
+Tip: order 클래스를 쓰면 모바일에서 이미지와 글자의 순서를 바꿀 수
+있습니다.
+
+------------------------------------------------------------------------
+
+## 3️⃣ Utility Class: CSS 없이 디자인하기 (1시간)
+
+CSS 파일(style.css)을 열지 않고 클래스 이름만으로 디자인합니다.
+
+### 여백 (Spacing)
+
+-   m(margin), p(padding) + t(top), b(bottom) + 0\~5(크기)
+-   mt-5: Margin Top 5 (가장 큼)
+-   py-3: Padding Y축(위아래) 3 (중간)
+
+### 색상 (Color)
+
+-   text-primary (파랑)
+-   bg-dark (검정 배경)
+-   text-danger (빨강)
+
+### 텍스트
+
+-   text-center
+-   fw-bold (굵게)
+-   fs-1 (폰트 사이즈)
+
+------------------------------------------------------------------------
+
+# 📅 Tuesday (오전 2.5h)
+
+## 1️⃣ Component: 복사 붙여넣기의 예술 (1시간)
+
+직접 짜려면 3시간 걸리는 UI를 3분 만에 만듭니다. 공식 문서에서 코드를
+복사(Copy)해오세요.
+
+### A. 네비게이션 바 (Navbar)
+
+-   검색: Navbar
+-   복사 후 `<body>` 바로 아래 붙여넣기
+-   수정: bg-body-tertiary → bg-dark
+-   `data-bs-theme="dark"` 추가하면 다크모드 메뉴바 완성
+
+### B. 프로젝트 카드 (Card)
+
+-   검색: Card
+-   그리드 시스템 안에 넣어야 예쁩니다
+-   별도 이미지 파일 없이도 바로 보이도록 플레이스홀더 이미지를
+    사용합니다
+
+``` html
+<div class="container mb-5">
+  <h2 class="text-center mb-4">My Projects</h2>
+  <div class="row g-4">
+    <div class="col-md-4">
+      <div class="card h-100">
+        <img src="https://picsum.photos/400/200" class="card-img-top" alt="랜덤 이미지">
+        <div class="card-body">
+          <h5 class="card-title">링크트리 프로젝트</h5>
+          <p class="card-text">HTML/CSS로 만든 첫 웹사이트입니다.</p>
+          <a href="#" class="btn btn-primary">보러가기</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+------------------------------------------------------------------------
+
+## 2️⃣ Customizing: 부트스트랩 덮어쓰기 (1시간)
+
+"부트스트랩 티가 너무 나요!" → 내 스타일(style.css)로 덮어씁니다.
+
+style.css 파일을 만들고 부트스트랩 링크 아래쪽에 연결합니다. (순서
+중요!)
+
+``` html
+<link href="bootstrap.min.css..." rel="stylesheet">
+<link href="style.css" rel="stylesheet">
+```
+
+### !important 없이 덮어쓰기 연습
+
+``` css
+/* 부트스트랩 버튼 색상 바꾸기 */
+.btn-primary {
+    background-color: #6c5ce7; /* 나만의 보라색 */
+    border-color: #6c5ce7;
+}
+
+.btn-primary:hover {
+    background-color: #5541c8;
+}
+```
+
+------------------------------------------------------------------------
+
+## 3️⃣ Wrap-up: 최종 점검 및 배포 (30분)
+
+-   모바일 확인: 브라우저 창을 줄였을 때 깨지는 곳이 없는지 확인
+-   이미지가 튀어나가면 `img-fluid` 클래스 추가
+-   Vercel에 다시 Push 하여 업데이트
+
+------------------------------------------------------------------------
+
+# 👨‍🏫 Teacher's Note (Tip)
+
+### 학생들이 자주 묻는 질문
+
+> "선생님, 제 CSS가 안 먹혀요!"
+
+👉 99%는 HTML `<head>`에서 부트스트랩 링크가 내 CSS 링크보다 아래에
+있어서 그렇습니다.\
+내 CSS가 더 밑에 있어야 덮어쓸 수 있습니다 (Cascading).
+
+------------------------------------------------------------------------
+
+### 클래스 이름 외우지 마세요
+
+"마진이 ml-5였나 ms-5였나?"\
+(부트스트랩5부터 Left/Right가 Start/End로 바뀜)
+
+👉 외우지 말고 **공식 문서를 검색(Ctrl+K)하는 법**을 가르쳐주세요.\
+그게 실무입니다.
+
+------------------------------------------------------------------------
+
+## 🔥 심화 (시간 남을 때)
+
+-   Bootstrap Icons: `<i>` 태그로 아이콘 넣기
+-   Modal: 버튼 클릭 시 팝업창 기능 복사해오기
+
+------------------------------------------------------------------------
+
+# 📝 과제
+
+### 🎯 미션
+
+부트스트랩 컴포넌트 중 수업 시간에 안 배운 것\
+(예: Carousel, Accordion, Modal)을 최소 1개 이상 찾아서\
+내 포트폴리오에 적용해 오기
+
+### 📌 제출
+
+Vercel 링크 제출
+
diff --git a/04-js-interaction.js b/04-js-interaction.js
new file mode 100644
index 0000000..94d7aee
--- /dev/null
+++ b/04-js-interaction.js
@@ -0,0 +1,117 @@
+
+/* ======================================================
+   ⚡ Week 04 Study File: JavaScript DOM & 인터랙션 정리
+   ====================================================== */
+
+/* ------------------------------------------------------
+   [1] JS 연결 위치 (매우 중요)
+   - 반드시 </body> 닫기 직전에 연결
+   - HTML이 먼저 로딩된 후 JS 실행
+---------------------------------------------------------
+
+<script src="script.js"></script>
+
+------------------------------------------------------ */
+
+
+/* ------------------------------------------------------
+   [2] DOM 선택 기본 공식
+   Select → Listen → Act
+---------------------------------------------------------
+
+// 1️⃣ Select (선택)
+const title = document.querySelector('h1');
+
+// 2️⃣ Act (행동)
+title.innerText = "자바스크립트로 변경된 제목";
+title.style.color = "red";
+
+------------------------------------------------------ */
+
+
+/* ======================================================
+   🌙 [3] Dark Mode 구현
+   ====================================================== */
+
+/* -------------------------------
+   1️⃣ Select
+---------------------------------- */
+
+const modeBtn = document.getElementById('mode-btn');
+const body = document.querySelector('body');
+
+
+/* -------------------------------
+   2️⃣ Listen + 3️⃣ Act
+   (주의: style.css에 .dark-mode 스타일이 정의되어 있어야 색이 변함!)
+---------------------------------- */
+
+modeBtn.addEventListener('click', function() {
+
+    // dark-mode 클래스 토글
+    body.classList.toggle('dark-mode');
+
+    // 버튼 텍스트 변경
+    if (body.classList.contains('dark-mode')) {
+        modeBtn.innerText = "Light Mode";
+    } else {
+        modeBtn.innerText = "Dark Mode";
+    }
+});
+
+
+/* ======================================================
+   🧭 [4] Scroll Event - Navbar 변신
+   ====================================================== */
+
+/* ⚠️ 사전 준비
+   - <nav> 태그에서 bg-dark 제거 (기본은 투명)
+   - CSS에 transition 추가
+   - style.css에 transition 추가 필수!
+   - .navbar { transition: all 0.5s ease; }  ← 이거 없으면 뚝뚝 끊김
+*/
+const navbar = document.querySelector('.navbar');
+
+window.addEventListener('scroll', function() {
+
+    // ⚠️ 수업 후 반드시 제거 (성능 저하 원인)
+    // console.log(window.scrollY);
+
+    if (window.scrollY > 50) {
+        navbar.classList.add('bg-dark');
+        navbar.classList.add('shadow');
+    } else {
+        navbar.classList.remove('bg-dark');
+        navbar.classList.remove('shadow');
+    }
+});
+
+
+/* ======================================================
+   🛑 [5] 자주 발생하는 에러
+   ====================================================== */
+
+/*
+❌ Cannot read property of null
+
+원인:
+- getElementById('mode-btn') ← HTML에 id 오타
+
+해결:
+- HTML id와 JS id가 완전히 동일한지 확인
+- 복사 & 붙여넣기 사용
+*/
+
+
+/* ======================================================
+   🎯 핵심 요약
+   ====================================================== */
+
+/*
+1. Select → Listen → Act 패턴을 기억하라
+2. classList.toggle()은 다크모드 필수 치트키
+3. scroll 이벤트는 매우 많이 실행됨 (console.log 제거)
+4. 변수는 위, 이벤트는 아래 정리
+*/
+
+
diff --git a/04-js-interaction.md b/04-js-interaction.md
new file mode 100644
index 0000000..e9f198b
--- /dev/null
+++ b/04-js-interaction.md
@@ -0,0 +1,204 @@
+# ⚡ Week 04. 숨 불어넣기 -- 동적 기능 (JavaScript DOM)
+
+> "HTML/CSS가 마네킹이라면, 자바스크립트는 로봇의 엔진입니다." 이제
+> 버튼을 누르면 화면이 바뀌고, 스크롤을 내리면 메뉴가 변하는 '진짜
+> 웹사이트'를 만듭니다.
+
+------------------------------------------------------------------------
+
+## 🎯 이번 주 목표
+
+-   **DOM(문서 객체 모델)**의 개념을 이해하고 자바스크립트로 HTML을
+    조작한다
+-   Event Listener를 사용하여 클릭, 스크롤 등의 사용자 행동을 감지한다
+-   classList Toggle을 활용해 다크모드와 투명 내비게이션을 구현한다
+
+**Key Tech:** JavaScript(ES6), DOM API, Event Listener, classList\
+**Result:** 클릭하면 색이 반전되는 다크모드 + 스크롤 시 변하는 투명
+내비게이션
+
+------------------------------------------------------------------------
+
+# 📅 Monday (오후 2.5h)
+
+## 1️⃣ Setup: 엔진 장착하기 (30분)
+
+HTML과 JS를 연결합니다. 위치가 매우 중요합니다.
+
+``` html
+<script src="https://cdn.jsdelivr.net/npm/bootstrap..."></script>
+<script src="script.js"></script>
+</body>
+```
+
+테스트:
+
+``` javascript
+alert('Hello Somago!');
+```
+
+------------------------------------------------------------------------
+
+## 2️⃣ Core Concept: DOM과 선택자 (40분)
+
+``` javascript
+const title = document.querySelector('h1');
+title.innerText = "자바스크립트로 바꾼 제목";
+title.style.color = "red";
+```
+
+공식:
+
+    document.querySelector('CSS선택자')
+
+------------------------------------------------------------------------
+
+## 3️⃣ Hands-on: 다크모드 스위치 만들기 (1시간 20분)
+
+------------------------------------------------------------------------
+
+### ✅ Step 1: HTML 버튼 추가
+
+``` html
+<button id="mode-btn" class="btn btn-outline-secondary">
+  Dark Mode
+</button>
+```
+
+------------------------------------------------------------------------
+
+### ✅ Step 2: CSS 다크모드 정의 (🔥 중요 보강)
+
+⚠️ **Critical Check: 부트스트랩과 다크모드 충돌 방지**
+
+부트스트랩 기본 글자색이 검정이기 때문에,\
+배경만 검게 바꾸면 글씨가 사라지는 문제가 발생합니다.
+
+따라서 모든 글자색을 강제로 흰색으로 지정합니다.
+
+``` css
+/* 다크모드 기본 배경 + 글자색 */
+.dark-mode {
+    background-color: #000000;
+    color: #ffffff;
+}
+
+/* 부트스트랩 기본 스타일 덮어쓰기 (중요!) */
+.dark-mode a,
+.dark-mode h1,
+.dark-mode h2,
+.dark-mode p {
+    color: #ffffff !important;
+}
+
+/* 카드 색상 변경 */
+.dark-mode .card {
+    background-color: #333;
+    color: white;
+}
+```
+
+------------------------------------------------------------------------
+
+### ✅ Step 3: JS로 토글 구현
+
+``` javascript
+const modeBtn = document.getElementById('mode-btn');
+const body = document.querySelector('body');
+
+modeBtn.addEventListener('click', function() {
+
+    body.classList.toggle('dark-mode');
+
+    if (body.classList.contains('dark-mode')) {
+        modeBtn.innerText = "Light Mode";
+    } else {
+        modeBtn.innerText = "Dark Mode";
+    }
+});
+```
+
+------------------------------------------------------------------------
+
+# 📅 Tuesday (오전 2.5h)
+
+## 1️⃣ 스크롤 이벤트 (Navbar 변신)
+
+⚠️ **Critical Check: Navbar 사전 정리**
+
+스크롤 효과를 주기 전에\
+`<nav class="navbar bg-dark">` 에서 `bg-dark` 또는\
+`bg-body-tertiary` 클래스를 제거하여 **기본 상태를 투명하게** 만드세요.
+
+------------------------------------------------------------------------
+
+### ✅ CSS 보강 (부드러운 전환 효과)
+
+``` css
+.navbar {
+    transition: all 0.5s ease;
+}
+```
+
+------------------------------------------------------------------------
+
+### ✅ JS 구현
+
+``` javascript
+const navbar = document.querySelector('.navbar');
+
+window.addEventListener('scroll', function() {
+
+    // console.log(window.scrollY); ← 수업 후 반드시 제거!
+
+    if (window.scrollY > 50) {
+        navbar.classList.add('bg-dark');
+        navbar.classList.add('shadow');
+    } else {
+        navbar.classList.remove('bg-dark');
+        navbar.classList.remove('shadow');
+    }
+});
+```
+
+------------------------------------------------------------------------
+
+## 👨‍🏫 Teacher's Tip (성능 지도 포인트)
+
+`console.log(window.scrollY);` 는\
+스크롤할 때마다 1초에 수백 번 실행됩니다.
+
+✔ 확인이 끝났으면 반드시 **주석 처리하거나 삭제**하세요.\
+✔ 불필요한 로그는 성능을 크게 저하시킵니다.
+
+------------------------------------------------------------------------
+
+## 2️⃣ Refactoring
+
+-   변수 선언은 위에
+-   이벤트 리스너는 아래
+-   주석은 미래의 나를 위해
+
+------------------------------------------------------------------------
+
+## 3️⃣ Final Deploy
+
+-   Git Commit & Push
+-   Vercel 자동 배포 확인
+-   Show & Tell
+
+------------------------------------------------------------------------
+
+# 📝 과제
+
+## 🎯 미션
+
+나만의 인터랙션 포인트 하나 추가하기
+
+예시: - 맨 위로 가기 버튼 - 이미지 클릭 확대 (Lightbox) - Scroll Reveal
+애니메이션
+
+## 📌 제출
+
+최종 Vercel 링크 제출
+