Ch.1 웹의 시작 — 첫 HTML 페이지
웹은 어떻게 작동하는가?
주소를 입력하면 어떤 일이 벌어질까?
매일 수십 번 웹사이트에 접속하지만, 주소창에 URL을 입력한 순간부터 화면이 나타나기까지 무슨 일이 일어나는지 아는 사람은 드뭅니다.
브라우저는 어떻게 코드를 화면으로 바꿀까?
HTML, CSS, JavaScript — 이 세 가지가 모든 웹 페이지를 만드는 재료입니다.
핵심 내용
웹은 '요청'과 '응답'으로 작동합니다
브라우저(크롬, 사파리 등)가 서버에 '이 페이지 주세요'라고 요청하면, 서버는 HTML 파일을 보내줍니다. 브라우저는 이 파일을 읽어서 화면에 그립니다.
1. 요청: 브라우저가 URL을 서버에 전송
2. 처리: 서버가 해당 파일을 찾음
3. 응답: HTML/CSS/JS 파일 전송
4. 렌더링: 브라우저가 화면에 표시
웹 페이지는 세 가지 언어로 만들어집니다
HTML = 집의 구조 (벽, 문, 창문) CSS = 인테리어 (벽지, 가구 배치) JavaScript = 전기·수도 (스위치 누르면 불 켜짐)
가장 간단한 웹 페이지를 한번 살펴봅시다
<!DOCTYPE html>
<html>
<head>
<title>내 첫 페이지</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>웹 개발의 세계에 오신 것을 환영합니다.</p>
</body>
</html>이 코드가 브라우저에 표시되면: 큰 제목 '안녕하세요!'와 그 아래 문단이 나타납니다. 아직 CSS가 없으므로 검은 글씨 + 흰 배경의 기본 모습입니다.
웹 페이지의 '구조(뼈대)'를 담당하는 언어는?
브라우저는 서버에서 받은 HTML 파일을 읽어서 화면에 표시한다
HTML 파일의 확장자는 .html이다
웹의 작동 원리
핵심 용어
HTML
구조 — 뼈대와 내용을 담당
CSS
스타일 — 색상, 크기, 배치를 담당
JavaScript
동작 — 클릭, 애니메이션을 담당
정리 노트
웹은 어떻게 작동하는가?
요청-응답 흐름
- 브라우저
- 사용자가 URL을 입력하면 서버에 요청을 보내는 프로그램
- 서버
- 요청을 받아 HTML/CSS/JS 파일을 응답으로 돌려주는 컴퓨터
- 렌더링
- 브라우저가 받은 코드를 해석해 화면에 표시하는 과정
웹의 세 가지 언어
- HTML
- 웹 페이지의 구조와 내용을 담당
- CSS
- 웹 페이지의 디자인과 스타일을 담당
- JavaScript
- 웹 페이지의 동작과 상호작용을 담당
모든 웹 페이지는 HTML(뼈대) + CSS(옷) + JS(행동)로 구성됩니다.
시각 자료
핵심 정리
- 1웹은 브라우저의 요청 → 서버의 응답으로 작동한다
- 2HTML(구조) + CSS(스타일) + JS(동작) = 웹 페이지
- 3브라우저가 HTML을 읽어서 화면에 렌더링한다
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 레슨 시작