통합 요약노트
Ch.1 웹의 시작 — 첫 HTML 페이지
웹의 작동 원리, HTML 문서 구조, 제목과 문단
이 챕터의 내용
1
웹은 어떻게 작동하는가?
HTML, CSS, JavaScript — 이 세 가지가 모든 웹 페이지를 만드는 재료입니다.
웹은 '요청'과 '응답'으로 작동합니다
브라우저(크롬, 사파리 등)가 서버에 '이 페이지 주세요'라고 요청하면, 서버는 HTML 파일을 보내줍니다. 브라우저는 이 파일을 읽어서 화면에 그립니다.
웹 페이지는 세 가지 언어로 만들어집니다
- 웹은 브라우저의 요청 → 서버의 응답으로 작동한다
- HTML(구조) + CSS(스타일) + JS(동작) = 웹 페이지
- 브라우저가 HTML을 읽어서 화면에 렌더링한다
2
HTML 문서의 뼈대
DOCTYPE, html, head, body — 이 네 가지가 모든 HTML 문서의 출발점입니다.
모든 HTML 문서는 같은 뼈대에서 시작합니다
head는 '보이지 않는 설정' body는 '보이는 내용'
나만의 홈페이지 뼈대를 직접 작성해봅시다
- 모든 HTML은 DOCTYPE → html → head + body 구조
- head는 보이지 않는 설정, body는 보이는 내용
- <meta charset="UTF-8">로 한글 깨짐을 방지한다
3
제목과 문단으로 말하기
h1~h6 제목 태그와 p 문단 태그 — 콘텐츠에 구조를 부여하는 가장 기본적인 도구입니다.
HTML에는 6단계의 제목 크기가 있습니다
본문 텍스트는 p 태그로 감쌉니다
홈페이지에 제목과 문단을 추가해봅시다
- h1~h6 제목은 계층 순서를 지켜야 한다 (h1은 1번만)
- <p>는 문단, <br>은 줄바꿈, <hr>은 수평선
- 모든 태그는 열고 닫아야 한다 (<br>, <hr> 제외)
key
핵심 용어 모음
🦴
HTML
구조 — 뼈대와 내용을 담당
🎨
CSS
스타일 — 색상, 크기, 배치를 담당
⚡
JavaScript
동작 — 클릭, 애니메이션을 담당
📋
<!DOCTYPE html>
'이 문서는 HTML5입니다'라고 브라우저에 알림
📦
<html>
문서 전체를 감싸는 최상위 태그
⚙️
<head>
보이지 않는 설정 (제목, 문자 인코딩)
👁️
<body>
화면에 보이는 모든 내용
📄
<p>
문단 — 텍스트 블록을 만든다
↩️
<br>
줄바꿈 — 닫는 태그가 없다 (셀프 클로징)
➖
<hr>
수평선 — 내용을 구분하는 가로 줄
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 코스 시작하기