topic★★★★★난이도 · 약 15분

웹은 어떻게 작동하는가?

브라우저가 서버에 요청하고, 서버가 HTML을 응답하고, 브라우저가 렌더링한다.

#브라우저#서버#요청#응답#렌더링

왜 배우는가

주소창에 URL을 입력한 순간부터 화면이 나타나기까지 '요청 → 응답 → 렌더링' 흐름을 이해하면, 이후 배울 모든 웹 기술의 맥락이 잡힌다.

웹은 '요청'과 '응답'으로 작동합니다

브라우저(크롬, 사파리 등)가 서버에 '이 페이지 주세요'라고 요청하면, 서버는 HTML 파일을 보내줍니다. 브라우저는 이 파일을 읽어서 화면에 그립니다.

1. 요청 — 브라우저가 URL을 서버에 전송 2. 처리 — 서버가 해당 파일을 찾음 3. 응답 — HTML/CSS/JS 파일 전송 4. 렌더링 — 브라우저가 화면에 표시

HTTP 요청·응답 사이클 — 브라우저가 서버에 URL을 보내면 HTML이 돌아오고 화면에 그려진다

웹 페이지는 세 가지 언어로 만들어집니다

HTML = 집의 구조 (벽, 문, 창문) CSS = 인테리어 (벽지, 가구 배치) JavaScript = 전기·수도 (스위치 누르면 불 켜짐)

가장 간단한 웹 페이지를 한번 살펴봅시다

html

<!DOCTYPE html>
<html>
<head>
  <title>내 첫 페이지</title>
</head>
<body>
  <h1>안녕하세요!</h1>
  <p>웹 개발의 세계에 오신 것을 환영합니다.</p>
</body>
</html>

가장 간단한 웹 페이지. 브라우저에 표시되면 큰 제목 '안녕하세요!'와 문단이 나타난다. CSS가 없으므로 검은 글씨 + 흰 배경의 기본 모습.

이 코드가 브라우저에 표시되면: 큰 제목 '안녕하세요!'와 그 아래 문단이 나타납니다. 아직 CSS가 없으므로 검은 글씨 + 흰 배경의 기본 모습입니다.

핵심 개념	설명
브라우저	사용자가 URL을 입력하면 서버에 요청을 보내는 프로그램
서버	요청을 받아 HTML/CSS/JS 파일을 응답으로 돌려주는 컴퓨터
렌더링	브라우저가 받은 코드를 해석해 화면에 표시하는 과정

모든 웹 페이지는 HTML(뼈대) + CSS(옷) + JS(행동)로 구성됩니다.

실기 드릴 3문항

edit실기 드릴 · 단답형

웹 페이지의 '구조(뼈대)'를 담당하는 언어는?

check_circle실기 드릴 · OX

브라우저는 서버에서 받은 HTML 파일을 읽어서 화면에 표시한다.

check_circle실기 드릴 · OX

HTML 파일의 확장자는 .html이다.