[HTML 1일차] HTML 기본 개념 ~ 완전 기초 실습

H T M L (HyperText Markup Language)

HTML은 웹 페이지의 구조를 정의하는 언어입니다.

이는 글의 제목, 문단, 이미지, 링크와 같은 웹 페이지의 뼈대(구조)를 만드는 역할을 수행합니다.

서버가 HTML 문서를 브라우저에 전달하면, 브라우저는 이를 읽고 화면의 기본 구조를 그립니다.

1. 웹과 HTML의 관계

웹 페이지가 화면에 보이기까지의 기본 흐름은 다음과 같습니다.

서버가 HTML 문서를 만들어 브라우저에 전달합니다.
브라우저는 HTML을 읽고 화면의 기본 구조를 그립니다.

즉 서버 → HTML 전달 → 브라우저 → 화면 구조 생성 입니다.

🍀 HTML 기본 구조태그의 기본 규칙

HTML 문서는 항상 일정한 기본 틀을 가집니다.
HTML 문서는 태그(tag)들의 조합으로 구성됩니다.
태그는 <태그이름> 형태로 작성합니다.
각 태그마다 요소의 의미와 역할이 정해져 있습니다.
대부분의 태그는 여는 태그와 닫는 태그로 이루어집니다.

정말 간단한 기본 예시는 다음과 같습니다.

<h1>제목</h1>
<p>문단 내용</p>

2. 태그의 중첩 구조

HTML에서는 태그 안에 또 다른 태그가 들어갈 수 있습니다.
이런 구조를 중첩 구조라고 하며,
이 중첩 구조로 문서의 계층이 만들어집니다.

예시는 다음과 같습니다.

<body>
  <h1>제목</h1>
  <p>내용</p>
</body>

3. HTML 기본 구조

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    Hello, HTML
  </body>
</html>

빨간색으로 표시한 부분이 <title> 에 입력한 부분,

파란색으로 표시한 부분이 <body> 에 입력한 부분입니다.

요소	설명
<!DOCTYPE html>	문서가 HTML5임을 브라우저에 알리는 선언 (최상단)
<html>	HTML 문서의 최상위 태그 (모든 요소 포함)
<head>	화면에 직접 보이지 않는 설정 영역 (제목, 인코딩, CSS, 메타 정보 등)
<title>	브라우저 탭 및 검색 결과에 표시되는 제목
<body>	브라우저 화면에 실제로 보이는 내용 영역 (텍스트, 이미지, 버튼 등 모든 화면 요소)

4. HTML 문서가 화면에 표시되는 과정

브라우저가 서버에 HTML 요청
서버가 HTML 문서 응답
브라우저가 HTML을 해석(parsing)
화면 구조(DOM) 생성
CSS 적용 → 화면 표시

DOM (Document Object Model)

DOM은 브라우저가 HTML 문서를 해석해 만든 객체 기반 구조입니다.

HTML을 트리 구조로 표현
각 태그와 텍스트가 노드(node)가 됨
HTML = 설계도, DOM = 브라우저 안의 실제 구조
JavaScript가 화면을 조작할 때 사용하는 대상

✨ DOM(문서 객체 모델)은 웹사이트의 지휘 본부입니다.

HTML이 종이에 그린 설계도라면 DOM은 그 설계도대로 브라우저 메모리 속에 실제로 만들어진 입체적인 구조물입니다.

자바스크립트는 이 DOM을 조작해서 화면의 내용을 바꾸거나 움직이는 등 동적인 기능을 구현합니다.

📍갑자기 왠 자바? 싶을 수 있습니다.

HTML 을 배우다 보면 DOM 설명에서 항상 JavaScript가 같이 등장합니다.

DOM 이라는 개념의 정체를 설명하기 위해서인데요.

DOM은 브라우저가 HTML 문서를 해석해서 만든 화면의 구조 정보이고,

이 구조를 실제로 만지고 바꾸는 도구가 JavaScript 이기 때문에 자연스럽게 같이 나오는 겁니다.

즉 DOM 은 "브라우저가 만들어 둔 화면 구조", JavaScript는 "나중에 그 구조를 조작하는 도구" 입니다.

주요 HTML 태그 (요소)

태그	역할	예시
<p>	문단(Paragraph)을 정의. 일반 텍스트 문단.	<p>내용</p>
<h1> ~ <h6>	제목(Heading)을 정의. h1이 가장 큰 제목.	<h1>제목</h1>
<hr>	수평선(Horizontal Rule)을 삽입.	<hr>
<ul>/<ol> + <li>	순서 없는 목록(ul) / 순서 있는 목록(ol)의 항목(li) 정의.	<ul><li>항목</li></ul>
<table>	표 구조를 정의 (<thead>, <tbody>, <tr>(행), <th>(헤더), <td>(데이터)).	<table>...</table>
<img>	이미지를 삽입. (src, alt 속성 사용)	<img src="image.png" alt="설명">
<a>	하이퍼링크를 생성. (href 속성 사용)	<a href="url">링크</a>
<form>	사용자 입력을 서버로 전송하기 위한 양식 정의.	`<form action="url" method="get
<div>	단순한 컨테이너 역할, 공통 스타일 적용을 위해 요소를 묶을 때 사용.	<div class="intro">...</div>

캡쳐에서는 위에서부터 차례대로 <h1>, <h2>, <h3> 태그를 적용해서 제목의 크기가 다른 모습을 볼 수 있습니다.

문단 내용들은 'lorem' 이라고 입력하면 디자인 시안 작업 시 레이아웃의 시각적 효과를 보여주기 위해 사용하는 의미 없는 라틴어 기반의 더미 텍스트를 쓸 수 있습니다. (lorem100 이라고 입력할 경우 더미 텍스트 100자가 나옵니다!)

요소들은 한번씩 실습해보시는 것이 좋습니다.

추가로, <li> 태그의 예시는 아래와 같습니다.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

'[오즈코딩스쿨] AI 헬스케어 > 🌐 HTML_CSS' 카테고리의 다른 글

사용자가 https://google.com 을 입력하면 일어나는 일 (2)	2025.12.29