README.md - Examples

  1# Web_Development 예제
  2
  3Web_Development 폴더의 14개 레슨에 해당하는 실행 가능한 예제 코드입니다.
  4
  5## 폴더 구조
  6
  7```
  8examples/
  9├── 01_html_basics/       # HTML 기초
 10│   ├── index.html        # 기본 태그
 11│   └── semantic.html     # 시맨틱 HTML
 12│
 13├── 02_html_forms/        # 폼과 테이블
 14│   ├── form_example.html # 폼 요소
 15│   └── table_example.html # 테이블
 16│
 17├── 03_css_basics/        # CSS 기초
 18│   ├── index.html        # 선택자, 박스모델
 19│   └── style.css
 20│
 21├── 04_css_layout/        # CSS 레이아웃
 22│   ├── flexbox.html      # Flexbox
 23│   ├── grid.html         # Grid
 24│   └── style.css
 25│
 26├── 05_css_responsive/    # 반응형 디자인
 27│   ├── index.html        # 미디어쿼리
 28│   └── style.css
 29│
 30├── 06_js_basics/         # JavaScript 기초
 31│   ├── index.html        # 변수, 함수, 배열, 객체
 32│   └── script.js
 33│
 34├── 07_js_dom/            # DOM 조작
 35│   ├── index.html        # DOM API, 이벤트
 36│   └── script.js
 37│
 38├── 08_js_async/          # 비동기 프로그래밍
 39│   ├── index.html        # Promise, async/await
 40│   └── script.js
 41│
 42├── 09_project_todo/      # Todo 앱 프로젝트
 43│   ├── index.html
 44│   ├── style.css
 45│   └── app.js
 46│
 47├── 10_project_weather/   # 날씨 앱 프로젝트
 48│   ├── index.html
 49│   ├── style.css
 50│   └── app.js
 51│
 52├── 11_typescript/        # TypeScript
 53│   ├── basics.ts         # 타입 기초
 54│   ├── interfaces.ts     # 인터페이스
 55│   └── tsconfig.json
 56│
 57├── 12_accessibility/     # 웹 접근성
 58│   ├── index.html        # ARIA, 키보드
 59│   └── style.css
 60│
 61├── 13_seo/               # SEO
 62│   └── index.html        # 메타태그, 구조화데이터
 63│
 64└── 14_build_tools/       # 빌드 도구
 65    ├── vite-project/
 66    └── webpack-example/
 67```
 68
 69## 실행 방법
 70
 71### HTML/CSS/JS 예제
 72
 73```bash
 74# 방법 1: 브라우저에서 직접 열기
 75open examples/01_html_basics/index.html
 76
 77# 방법 2: VS Code Live Server
 78# VS Code에서 Live Server 확장 설치 후 Go Live 클릭
 79
 80# 방법 3: Python 간이 서버
 81cd examples
 82python -m http.server 8000
 83# 브라우저에서 http://localhost:8000 접속
 84```
 85
 86### TypeScript 예제
 87
 88```bash
 89# TypeScript 설치
 90npm install -g typescript
 91
 92# 컴파일
 93cd examples/11_typescript
 94tsc basics.ts
 95
 96# 또는 ts-node로 직접 실행
 97npx ts-node basics.ts
 98```
 99
100### 빌드 도구 예제
101
102```bash
103# Vite
104cd examples/14_build_tools/vite-project
105npm install
106npm run dev
107
108# Webpack
109cd examples/14_build_tools/webpack-example
110npm install
111npm run build
112npm run dev
113```
114
115## 레슨별 예제 목록
116
117| 레슨 | 주제 | 예제 파일 |
118|------|------|-----------|
119| 01 | HTML 기초 | index.html, semantic.html |
120| 02 | HTML 폼/테이블 | form_example.html, table_example.html |
121| 03 | CSS 기초 | 선택자, 박스모델, 텍스트 |
122| 04 | CSS 레이아웃 | Flexbox, Grid |
123| 05 | 반응형 디자인 | 미디어쿼리, 모바일 퍼스트 |
124| 06 | JS 기초 | 변수, 함수, 배열, 객체, 클래스 |
125| 07 | DOM/이벤트 | DOM 조작, 이벤트 처리 |
126| 08 | 비동기 JS | Promise, async/await, fetch |
127| 09 | Todo 앱 | CRUD, 로컬스토리지, 필터 |
128| 10 | 날씨 앱 | API 연동, 비동기 처리 |
129| 11 | TypeScript | 타입, 인터페이스, 제네릭 |
130| 12 | 웹 접근성 | ARIA, 키보드, 스크린리더 |
131| 13 | SEO | 메타태그, 구조화 데이터 |
132| 14 | 빌드 도구 | Vite, Webpack |
133
134## 학습 순서
135
1361. **기초**: 01 → 02 → 03 → 04 → 05
1372. **JavaScript**: 06 → 07 → 08
1383. **프로젝트**: 09 → 10
1394. **고급**: 11 → 12 → 13 → 14
140
141## 브라우저 호환성
142
143- Chrome 80+
144- Firefox 75+
145- Safari 13+
146- Edge 80+
147
148## 참고 자료
149
150- [MDN Web Docs](https://developer.mozilla.org/ko/)
151- [CSS-Tricks](https://css-tricks.com/)
152- [JavaScript.info](https://javascript.info/)