1강. HTML이란? 그리고 HTML 문서의 기본 구조

안녕하세요. 웹 개발의 첫걸음, HTML 강좌에 오신 것을 환영합니다. 이번 강의에서는 HTML이 무엇인지, 그리고 HTML 문서의 기본 구조가 어떻게 구성되는지 알아보겠습니다.

HTML은 HyperText Markup Language의 약자입니다. 웹 페이지의 뼈대를 만드는 언어로, 우리가 브라우저에서 보는 모든 웹 페이지는 HTML을 기반으로 만들어집니다. 블로그 글, 뉴스 기사, 쇼핑몰 상품 정보 등도 모두 HTML로 작성됩니다.

HTML은 컴퓨터가 이해할 수 있는 방식으로 정보를 표현하는 역할을 합니다. 작성된 HTML 문서는 브라우저(Chrome, Safari, Edge 등)가 해석하여 사용자에게 보이는 웹 페이지로 변환합니다.

HTML 문서는 정해진 틀을 가지고 있습니다. 기본 구조를 이해하면 다양한 웹 페이지를 만들 때도 쉽게 적용할 수 있습니다. 아래는 간단한 HTML 문서 예시입니다.

코드를 하나씩 살펴보겠습니다.

<!DOCTYPE html> : 이 선언은 “이 문서가 HTML5 문서임을 알린다”는 의미입니다. 필수 요소는 아니지만, 표준을 지키기 위해 포함하는 것이 좋습니다.
<html> ... </html> : HTML 문서의 시작과 끝을 나타냅니다. 모든 HTML 코드는 이 태그 안에 포함됩니다.
<head> ... </head> : 문서의 정보를 담고 있는 부분입니다. 여기에는 페이지 제목, 스타일 정보, 외부 파일 연결 등이 포함됩니다. 화면에 직접 보이지 않지만 중요한 역할을 합니다.
<title> ... </title> : 브라우저 탭에 표시될 제목을 설정하는 태그입니다. 예를 들어, 이 코드를 사용하면 브라우저 탭에 “내 첫 번째 웹 페이지”라고 표시됩니다.
<body> ... </body> : 실제로 화면에 표시되는 모든 내용이 포함되는 부분입니다. 사용자가 보게 될 웹 페이지의 주된 내용은 모두 이 안에 작성합니다.
<h1> ... </h1> : 큰 제목을 표시할 때 사용하는 태그입니다. 보통 페이지의 가장 중요한 제목에 사용합니다.
<p> ... </p> : 본문을 작성할 때 사용하는 태그입니다. 문장을 입력하고 싶을 때 사용합니다.

이제 HTML 문서를 직접 만들어 보겠습니다. 메모장이나 VSCode 같은 코드 편집기를 열고, 위의 예제 코드를 그대로 작성해 보세요. 파일 이름은 index.html로 저장하고 브라우저로 열어보세요.

브라우저에서 작성한 내용이 제대로 표시된다면 성공입니다!

다음 강의에서는 HTML의 다양한 태그들을 하나씩 배워보겠습니다. 꾸준히 연습하면서 익혀 보시기 바랍니다.

예지파파