📌 웹 개발 목차

1️⃣ 웹의 기본 개념

🌍 웹이란?
- 웹의 역사, 발전 과정
🌐 웹 브라우저 & 서버
- 클라이언트와 서버의 역할
💬 HTTP/HTTPS 프로토콜
- 요청 & 응답 흐름, HTTPS의 필요성
🔒 웹 표준 & 접근성
- W3C, WCAG, 웹 접근성 중요성

2️⃣ HTML 기초

📄 HTML 정의와 역할
- 웹 페이지 구조화
🖋️ HTML 파일의 기본 구조
- <!DOCTYPE>, <html>, <head>, <body>, <meta> 등
⚙️ 문서 작성 시 주의사항
- 태그의 올바른 사용, 문서 규칙
📝 예제 제공
- 기본 HTML 구조 실습

3️⃣ HTML 주요 태그

🔠 텍스트 관련 태그

<h1> ~ <h6>: 제목 태그 (숫자 커질수록 글씨 작아짐)
<p>: 문단
<span>: 인라인 텍스트
<strong>: 굵게 강조
<em>: 기울임 강조
<br>: 줄바꿈
<abbr>: 약어 (hover 시 전체 표시)
<mark>: 하이라이트 효과
<blockquote>: 인용문 블록
<cite>: 출처
<code>, <pre>: 코드 표시, 서식 유지
<small>: 작은 글씨
<sub>, <sup>: 아래/위 첨자

🔢 목록 관련 태그

<ul>: 순서 없는 리스트 (●, ○)
<ol>: 순서 있는 리스트 (1,2,3…)
<li>: 리스트 항목
<dl>: 정의 목록
<dt>: 용어 제목
<dd>: 용어 설명

📊 표 관련 태그

<table>, <tr>, <th>, <td>: 표 구성
<caption>: 표 제목
<thead>, <tbody>, <tfoot>: 표 머리, 본문, 하단
<colgroup>, <col>: 열 스타일

🖼️ 이미지 & 미디어 관련 태그

<img>: 이미지 삽입 (src, alt, width, height, title)
<figure>, <figcaption>: 이미지/미디어 묶음 + 설명
<audio>, <video>, <source>: 미디어 삽입

🔗 하이퍼링크 & 내비게이션 관련 태그

<a>: 하이퍼링크 (href, target, rel)
<nav>: 내비게이션 메뉴

🔒 폼 관련 태그

<form>: 폼 영역 (action, method)
<input>, <textarea>, <select>, <option>, <button>
<fieldset>, <legend>, <label>: 폼 그룹화, 라벨
<datalist>, <output>, <progress>, <meter>: 고급 폼 기능

📦 시맨틱 구조 & 레이아웃 관련 태그

<div>, <section>, <article>: 구조화
<header>, <footer>, <main>, <aside>, <nav>: 레이아웃 구성

🌍 메타 정보 & 기타 태그

<meta>, <link>, <script>, <style>, <title>: 문서 정보, 외부 연결

4️⃣ CSS 기초

🎨 CSS 정의 & 역할: 웹 스타일 지정
⚙️ CSS 작성 방법: Inline, Internal, External
🔍 CSS 선택자: 태그, 클래스, 아이디, 속성, 자식/후손 선택자
📦 박스 모델: Content, Padding, Border, Margin
🖌️ 배경 설정: 배경색, 배경 이미지, 위치, 반복 등

5️⃣ CSS 심화

📐 레이아웃 & 정렬
- display, position, flexbox, grid, float, clear
📱 반응형 웹 디자인
- @media, flexbox, grid 활용
✨ 애니메이션 & 트랜지션
- @keyframes, transition, animation
🔤 폰트 & 텍스트 스타일
- font-family, font-size, line-height 등
🎨 색상 & 배경
- color, rgba, hsla, opacity
🔧 CSS 변수
- -변수명, var()

6️⃣ HTML5 & 최신 웹 기술

🌐 HTML5 시맨틱 태그
- <article>, <section>, <aside>, <header> 등
📱 웹 스토리지
- localStorage, sessionStorage, 쿠키
🎥 오디오 & 비디오 태그
- <audio>, <video>, controls, autoplay, loop
🖋️ 폼 고급 기능
- 이메일, 날짜, 범위 입력
🔠 웹 폰트
- @font-face, Google Fonts
📊 SVG & Canvas
- 벡터 그래픽, 2D 그래픽

7️⃣ 실전 예제

🖥️ 웹 페이지 레이아웃 구현
📋 폼과 데이터 제출 예제
🎨 웹 애니메이션 효과
🖼️ 이미지 & 미디어 슬라이더

8️⃣ 웹 접근성 & SEO

🔑 웹 접근성 (ARIA, 장애인 접근성)
🖋️ 접근성을 고려한 HTML 태그 사용
🔍 SEO (검색 엔진 최적화)
- 메타 태그, 키워드 전략
🚀 웹 페이지 최적화
- 이미지, 파일 크기 최적화, CDN

9️⃣ 웹 프로젝트 관리 & 최적화

🗂️ 폴더 구조 관리
📈 버전 관리 (Git, GitHub)
⚡ 웹 성능 최적화
- 리소스 압축, 비동기 로딩
🔒 웹 보안 기본
- XSS, CSRF, HTTPS, 쿠키 보안