1강. 웹과 HTML/CSS 개요 | HTML·CSS 웹 입문 24강 · 입문 — 누구나패스

🎯 학습 목표

이 강을 마치면 웹 페이지 한 장이 화면에 그려지기까지 어떤 일이 벌어지는지를 큰 그림으로 설명할 수 있습니다. 여러분이 매일 보는 웹사이트는 사실 세 가지 언어가 협력해 만들어 낸 결과물입니다. 이 강에서는 그 세 언어인 HTML·CSS·JavaScript가 각각 무슨 일을 맡는지 구분하고, 브라우저가 서버에서 받아온 문서를 어떻게 해석해 눈에 보이는 화면으로 바꾸는지 이해하게 됩니다. 앞으로 24강에 걸쳐 직접 코드를 작성할 텐데, 그 전에 이번 강에서 "전체 지도"를 먼저 그려 두는 것이 목적입니다. 지도가 있으면 이후 세부 문법을 배울 때 "이게 지금 어디에 해당하는 이야기지?"를 스스로 짚어 낼 수 있습니다.

🌐 웹은 어떻게 동작하는가

이 섹션에서는 주소창에 주소를 입력하고 엔터를 누르는 순간부터 화면이 뜨기까지의 흐름을 살펴보겠습니다. 웹의 기본 구조는 클라이언트-서버 모델입니다. 여기서 클라이언트는 여러분이 사용하는 브라우저(크롬·사파리·엣지 등)이고, 서버는 웹 페이지 파일을 보관하고 있다가 요청이 오면 건네주는 컴퓨터입니다.

과정을 단계로 나누면 이렇습니다. 첫째, 주소창에 https://example.com 같은 URL(웹 주소)을 입력합니다. 둘째, 브라우저는 이 주소에 해당하는 서버를 찾아 "이 페이지를 주세요"라고 요청(request)을 보냅니다. 이때 브라우저와 서버가 사용하는 대화의 약속(규칙)이 HTTP(HyperText Transfer Protocol)입니다. 셋째, 서버는 요청을 받아 해당하는 HTML 문서와 관련 파일(CSS·이미지 등)을 응답(response)으로 돌려줍니다. 넷째, 브라우저가 이 파일들을 해석해 화면에 그립니다.

여기서 꼭 기억할 점은, 서버가 보내 주는 것은 완성된 그림이 아니라 텍스트로 된 설계도라는 사실입니다. 즉 서버는 "여기에 제목을 크게, 그 아래 문단을, 오른쪽에 이미지를 놓아라"라는 지시가 담긴 문서를 보내고, 실제로 그것을 그림으로 바꾸는 일은 전적으로 브라우저의 몫입니다. 그래서 같은 웹 페이지라도 브라우저 종류나 화면 크기에 따라 조금씩 다르게 보일 수 있는 것입니다. 이 "설계도를 보내고, 받는 쪽이 그린다"는 구조가 앞으로 배울 모든 내용의 바탕이 됩니다.

🧩 HTML·CSS·JavaScript — 세 가지 역할 분담

이 섹션에서는 웹 페이지를 이루는 세 언어의 역할을 구분해 보겠습니다. 가장 흔히 쓰는 비유는 집짓기입니다. 한 채의 집을 지을 때 뼈대를 세우는 일, 벽지를 바르고 색을 칠하는 일, 조명과 자동문을 다는 일이 서로 다르듯, 웹 페이지도 세 가지 관심사가 분리되어 있습니다.

HTML(HyperText Markup Language)은 구조를 담당합니다. 어떤 것이 제목이고, 어디가 문단이며, 무엇이 목록이고 링크인지를 의미로 표시합니다. 집으로 치면 기둥과 벽, 방의 배치를 정하는 골조에 해당합니다. HTML이 없으면 페이지에 아무 내용도 존재하지 않으므로, 셋 중 가장 근본이 되는 언어입니다.

CSS(Cascading Style Sheets)는 표현(스타일)을 담당합니다. 글자의 크기와 색, 여백, 배경, 요소의 배치와 정렬 같은 "어떻게 보일지"를 정합니다. 집으로 치면 페인트칠, 벽지, 가구 배치입니다. 같은 HTML 구조라도 CSS만 바꾸면 완전히 다른 분위기의 페이지가 됩니다.

JavaScript는 동작(행동)을 담당합니다. 버튼을 눌렀을 때 반응하거나, 입력값을 검사하거나, 새 데이터를 불러오는 등 사용자와의 상호작용을 처리합니다. 집으로 치면 전기 배선과 자동문, 보일러처럼 "움직이는" 부분입니다. 이 시리즈는 HTML과 CSS에 집중하지만, 세 번째 조각인 JavaScript가 어디에 끼어드는지는 알아 두는 편이 좋습니다.

이렇게 역할을 나누는 것을 관심사의 분리(separation of concerns)라고 부릅니다. 구조·표현·동작을 따로 관리하면 코드를 수정하고 재사용하기가 훨씬 쉬워집니다. 예를 들어 사이트 전체의 색만 바꾸고 싶다면 HTML은 손대지 않고 CSS만 고치면 됩니다. 아래 표로 세 언어를 한눈에 정리했습니다.

언어	담당(관심사)	집짓기 비유	예시 질문
HTML	구조·의미	골조·벽	"이게 제목인가, 문단인가?"
CSS	표현·스타일	페인트·가구	"글자 색과 크기는?"
JavaScript	동작·상호작용	전기·자동문	"버튼을 누르면 무슨 일이?"

🖥️ 브라우저가 페이지를 그리는 과정

이 섹션에서는 브라우저가 텍스트 문서를 받아 실제 화면으로 바꾸는 렌더링(rendering) 과정을 단계별로 살펴보겠습니다. 이 흐름을 알아 두면 나중에 "왜 스타일이 안 먹지?" 같은 문제를 훨씬 빠르게 진단할 수 있습니다.

첫 단계는 파싱(parsing)입니다. 브라우저는 HTML 텍스트를 위에서 아래로 읽으며 DOM(Document Object Model)이라는 나무 모양의 구조로 바꿉니다. DOM은 문서의 모든 요소를 부모-자식 관계로 정리한 지도라고 생각하면 됩니다. 마찬가지로 CSS도 읽어서 CSSOM(CSS Object Model)이라는 스타일 규칙 목록으로 만듭니다.

두 번째 단계에서 브라우저는 DOM과 CSSOM을 합쳐 렌더 트리(render tree)를 만듭니다. 렌더 트리에는 화면에 실제로 보이는 요소만 담깁니다. 예를 들어 display: none으로 숨긴 요소는 렌더 트리에서 빠지므로 자리조차 차지하지 않습니다.

세 번째 단계는 레이아웃(layout)입니다. 각 요소가 화면의 어느 위치에, 얼마만 한 크기로 놓일지를 계산합니다. 이 단계를 리플로우(reflow)라고도 부릅니다. 마지막으로 페인트(paint) 단계에서 색·글자·이미지를 실제 픽셀로 칠하고, 여러 겹을 합성(composite)해 최종 화면을 완성합니다.

정리하면 HTML → DOM, CSS → CSSOM을 만든 뒤 둘을 합쳐 렌더 트리 → 레이아웃 → 페인트 순서입니다. 이 흐름을 기억해 두면, CSS가 왜 페이지의 "겉모습"만 바꾸고 문서의 구조 자체는 바꾸지 않는지 자연스럽게 이해됩니다.

💻 실전 예제 — 가장 작은 웹 페이지

이 섹션에서는 실제로 동작하는 가장 단순한 HTML 문서를 함께 읽어 보겠습니다. 지금 당장 직접 작성하지 않아도 괜찮습니다. 이번에는 "웹 페이지의 뼈대가 이렇게 생겼구나"를 눈에 익히는 것이 목표입니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>나의 첫 페이지</title>
  </head>
  <body>
    <h1>안녕하세요</h1>
    <p>이것은 첫 번째 웹 페이지입니다.</p>
  </body>
</html>

한 줄씩 살펴보겠습니다. <!DOCTYPE html>은 "이 문서는 최신 HTML 규칙(HTML Living Standard)을 따릅니다"라고 브라우저에 알리는 선언이며, 반드시 문서 맨 위에 한 번 씁니다. <html lang="ko">는 문서 전체를 감싸는 최상위 요소이고, lang="ko"로 이 페이지가 한국어임을 표시해 검색엔진과 화면 낭독기가 언어를 알 수 있게 합니다.

<head> 안에는 화면에 직접 보이지 않는 정보가 들어갑니다. <meta charset="UTF-8">은 문자 인코딩을 UTF-8로 지정해 한글이 깨지지 않게 하고, <title>은 브라우저 탭에 표시되는 제목입니다. 반대로 <body> 안에는 화면에 실제로 보이는 내용이 들어갑니다. <h1>은 가장 큰 제목, <p>는 문단을 뜻합니다. 대부분의 태그는 <p>로 열고 </p>로 닫는 여는 태그·닫는 태그 한 쌍으로 이루어진다는 점도 눈여겨보세요.

⚠️ 자주 하는 실수와 주의점

이 섹션에서는 입문 단계에서 흔히 겪는 오해를 미리 짚어 보겠습니다. 처음에 개념을 바르게 잡아 두면 이후 학습이 훨씬 수월해집니다.

HTML을 프로그래밍 언어로 오해하기 — HTML은 계산이나 조건 분기를 하는 언어가 아니라, 내용의 구조를 표시하는 마크업 언어입니다. 논리적 동작은 JavaScript의 몫입니다.
화면에 보이는 대로만 판단하기 — 눈에 똑같이 보여도 구조(HTML)가 엉망이면 검색엔진 노출과 접근성이 나빠집니다. 예를 들어 제목을 <h1> 대신 그냥 큰 글씨 문단으로 만들면 사람 눈에는 같아 보여도 의미상으로는 제목이 아닙니다.
닫는 태그 빠뜨리기 — 여는 태그만 쓰고 닫지 않으면 이후 요소들이 의도치 않게 중첩되어 레이아웃이 무너질 수 있습니다.
인코딩 선언 생략 — <meta charset="UTF-8">을 빼면 환경에 따라 한글이 깨져 보일 수 있으므로, 습관처럼 넣는 것이 좋습니다.

📝 핵심 요약

웹은 클라이언트(브라우저)-서버 구조이며, 둘은 HTTP라는 약속으로 요청·응답을 주고받습니다.
서버가 보내는 것은 완성된 그림이 아니라 텍스트 설계도이고, 그것을 화면으로 바꾸는 일은 브라우저가 합니다.
HTML은 구조, CSS는 표현, JavaScript는 동작을 맡는 관심사의 분리 구조입니다.
브라우저는 HTML→DOM, CSS→CSSOM을 만든 뒤 합쳐 렌더 트리→레이아웃→페인트 순으로 화면을 그립니다.

다음 2강 "개발 환경과 첫 페이지"에서는 코드를 직접 작성하기 위한 편집기(VS Code)를 설치하고, 방금 눈으로 살펴본 HTML 문서를 여러분 손으로 만들어 브라우저에 직접 띄워 보겠습니다.

웹과 HTML/CSS 개요