본문으로 건너뛰기
웹 개발 기초집LESSON 01

HTML 소개

난이도입문
예상 시간25분
선수지식폴더와 파일 만들기

1강. HTML 소개

이번 강의에서 해결할 문제​

브라우저에 글자를 표시하는 것만으로는 제목과 본문, 문서 정보의 역할을 구분할 수 없습니다. 이번 강의에서는 브라우저가 콘텐츠의 의미와 구조를 이해할 수 있는 가장 작은 HTML 문서를 만듭니다.

이번 강의 목표​

핵심 개념​

HTML은 웹페이지의 콘텐츠와 구조를 표현하는 마크업 언어입니다. 브라우저는 태그를 읽어 제목, 문단, 링크 같은 요소로 해석합니다.

웹 문서를 책 한 쪽에 비유하면 콘텐츠는 실제 문장이고, 구조는 "이 문장은 제목이고 저 문장은 본문이다"라는 구분입니다. 글자가 똑같이 보여도 h1으로 표시한 글은 페이지의 대표 제목이고, p로 표시한 글은 하나의 문단입니다. 브라우저와 스크린 리더, 검색 엔진은 이 차이를 사용해 문서를 이해합니다.

HTML       무엇이 있는가? 제목, 문단, 메뉴
CSS        어떻게 보이는가? 색상, 간격, 배치
JavaScript 어떻게 반응하는가? 클릭, 데이터 변경

태그는 대부분 여는 태그, 내용, 닫는 태그로 구성됩니다.

<p>웹 개발을 시작합니다.</p>

용어 정리​

용어뜻이 강의의 예
태그(tag)요소의 종류를 표시하는 문법<p>, </p>
요소(element)여는 태그·내용·닫는 태그를 합친 한 단위<p>웹 개발을 시작합니다.</p>
속성(attribute)요소에 추가 정보를 주는 이름과 값lang="ko"
중첩(nesting)한 요소 안에 다른 요소를 넣는 구조html 안의 head와 body
렌더링(rendering)브라우저가 HTML을 해석해 화면으로 보여 주는 과정h1이 큰 제목으로 보임

가장 작은 예제로 시작하기​

완전한 문서를 쓰기 전에 본문에 들어갈 두 요소만 비교합니다.

<h1>나의 학습 기록</h1>
<p>오늘 HTML의 역할을 배웠습니다.</p>
  • 첫 줄은 페이지 전체를 대표하는 제목입니다.
  • 둘째 줄은 제목을 설명하는 문단입니다.
  • 두 줄을 브라우저에서 열면 기본 스타일 때문에 제목이 더 크고 굵게 보입니다. 중요한 점은 크기가 아니라 제목과 문단이라는 의미가 다르다는 것입니다.

코드 예시​

파일 위치:

D:\WebProject\html-introduction\index.html

파일명: index.html

index.html
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>나의 첫 웹페이지</title>
  </head>
  <body>
    <h1>안녕하세요!</h1>
    <p>HTML로 만든 첫 웹페이지입니다.</p>
  </body>
</html>

코드 한 줄씩 이해하기​

코드브라우저에 알려 주는 내용화면에서 확인할 것
<!doctype html>현대 HTML 문서로 해석하라는 선언직접 보이지 않음
<html lang="ko">문서 전체의 주 언어가 한국어임낭독·번역 도구가 활용
<meta charset="UTF-8">한글을 포함한 문자의 인코딩한글이 깨지지 않음
viewport meta모바일 화면 너비에 맞춰 표시휴대폰에서 축소된 데스크톱 화면이 되지 않음
<title>브라우저 탭과 북마크에 쓸 제목탭에 나의 첫 웹페이지 표시
<body>사용자에게 보일 콘텐츠의 범위h1과 p가 페이지에 표시

head는 페이지에 대한 정보를 담고, body는 사용자에게 보여 줄 내용을 담습니다. 따라서 탭 제목인 title을 body에 넣거나 화면 제목인 h1을 head에 넣지 않습니다.

실행 위치: D:\WebProject\html-introduction

python -m http.server 5500

브라우저에서 http://localhost:5500을 엽니다. Python이 없다면 VS Code의 Live Server 같은 정적 서버 확장을 사용할 수 있습니다.

실행 결과와 동작 흐름​

정상적으로 실행하면 브라우저 탭에는 나의 첫 웹페이지가 보이고, 페이지 본문에는 다음 두 줄이 보입니다.

안녕하세요!               ← 큰 대표 제목
HTML로 만든 첫 웹페이지입니다. ← 일반 문단

확인 흐름은 index.html 저장 → 브라우저가 파일 요청 → 위에서 아래로 태그 해석 → head 정보 적용 → body 요소 렌더링 순서입니다. h1의 글자를 바꾸고 저장한 뒤 새로 고침하면 제목만 바뀌고 문서 구조는 그대로 유지됩니다.

코드가 동작하는 이유​

브라우저는 <!doctype html>로 현대 HTML 문서임을 확인하고, head에서 언어 처리와 화면 표시 정보를 읽습니다. body 안의 h1과 p는 각각 최상위 제목과 문단이라는 의미를 가지므로 단순한 글자보다 문서 구조가 분명해집니다.

자주 하는 실수와 해결법​

실습​

점검 질문​

핵심 요약​

다음 강의 연결​

다음 강의에서는 head와 body에 무엇을 배치해야 하는지 문서 전체 구조를 더 자세히 살펴봅니다. 이번 파일을 그대로 유지하고 2강. HTML 문서 구조에서 각 메타 정보와 본문 계층을 확장합니다.

MINI QUIZ

HTML 소개 미니 퀴즈

선택 즉시 정답과 해설을 확인할 수 있습니다. 결과는 이 브라우저에만 저장됩니다.

0 / 2
  1. 문제 1“HTML 소개”의 역할과 의존성을 판단하는 올바른 기준은 무엇인가요?
  2. 문제 2“HTML 소개” 실습 중 ‘태그를 닫지 않음’ 상황을 발견했습니다. 본문과 일치하는 설명은 무엇인가요?

답을 선택하면 진행 결과가 자동으로 저장됩니다.

LESSON STATUS

학습을 마쳤나요?

직접 실습과 점검 질문까지 확인한 뒤 완료로 표시하세요.

1강. HTML 소개 미완료 상태