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

HTML 소개

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

1강. HTML 소개

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

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

이번 강의 목표​

핵심 개념​

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

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

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

<p>웹 개발을 시작합니다.</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>

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

python -m http.server 5500

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

코드가 동작하는 이유​

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

자주 하는 실수와 해결법​

실습​

점검 질문​

핵심 요약​

MINI QUIZ

HTML 소개 미니 퀴즈

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

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

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

LESSON STATUS

학습을 마쳤나요?

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

1강. HTML 소개 미완료 상태