HTML-101 #1. HTML이란? 그리고 웹은 어떻게 작동하나요

Source: Dev.to

짧은 소개 (왜 이 글을 쓰는가)

저는 현재 HTML을 배우고 있으며, 학습 과정을 공개적으로 기록하기로 했습니다.
이 시리즈는 전문가가 쓴 것이 아니라—초보자가 큰 소리로 배우면서 공유하는 내용입니다:

• 제가 이해한 것,
• 저를 혼란스럽게 하는 것,
• 그리고 배우면서 알게 된 것.

목표는 일관성과 명확성을 기르고, 토론을 유도하는 것입니다.

이번 글에서는 다음을 다룹니다:

• HTML이 무엇이며 왜 존재하는가
• 웹사이트에서 HTML이 할 수 있는 일과 할 수 없는 일
• 웹의 구조(뼈대)로서 HTML 이해하기
• 웹 애플리케이션에서 HTML, CSS, JavaScript의 역할
• 페이지가 로드될 때 브라우저 내부에서 실제로 일어나는 일(DOM, CSS, JS)

모든 노트, 예제, 연습 코드는 GitHub 레포에 있습니다: .

---

HTML이란?

HTML은 HyperText Markup Language의 약자이며(‘hyper’라는 단어와는 관계 없습니다). 웹 페이지의 표준 언어로, 웹사이트의 뼈대를 정의합니다. 브라우저에 다음을 알려줍니다:

• 어떤 콘텐츠가 존재하는지,
• 그 콘텐츠가 어떤 종류인지,
• 어떻게 조직되어 있는지.

HTML은 제목을 정의하고, 단락을 만들며, 이미지를 표시하고, 폼을 구축하는 등 여러 작업을 수행합니다. 스타일(CSS)이나 동작/인터랙션(JavaScript)을 추가하지는 않습니다.

예시

  My First Page

  
## Hello World

  
This is my first webpage

위 마크업은 큰 제목 “Hello World”와 단락 “This is my first webpage”를 보여줍니다.

---

HTML, CSS, JavaScript의 역할

CSS와 JS 없이도 웹사이트는 동작하지만, 외관이 단조롭습니다.

---

브라우저가 페이지를 로드하는 과정

1. 브라우저가 HTML을 한 줄씩 읽어 DOM(Document Object Model)이라는 트리 구조로 변환합니다.
2. 브라우저가 연결된 CSS 파일을 다운로드하고 스타일을 적용합니다.
3. 브라우저가 연결된 JavaScript 파일을 다운로드하고 스크립트를 실행합니다.
4. 최종 렌더링된 페이지가 표시됩니다.

간단히 말하면:

HTML → DOM → CSS 적용 → JavaScript 실행 → 최종 페이지

---

다음 글

다음 글에서는 HTML 구조에 대해 다루고, 진행 상황에 따라 GitHub 레포를 계속 업데이트할 예정입니다.

---

참고 자료

• GitHub 레포지토리: