HTML - 소개

안녕하세요, 야심찬 웹 개발자 여러분! HTML의 세상으로의 흥미로운 여정을 안내해드리게 되어 기쁩니다. 컴퓨터 과학을 10년 넘게 가르쳐온 저는 HTML이 웹의 기초라 말씀드릴 수 있으며, HTML을 배우는 것은 마치 초능력을 풀어주는 것과 같습니다. 그럼 시작해보겠습니다!

HTML - Introduction

HTML이란?

HTML은 HyperText Markup Language의 약자입니다. 이 이름이 조금 무서울 수 있지만, 웹 페이지의 골격이라고 생각하면 됩니다. 우리의 뼈가 몸의 구조를 지탱하듯, HTML은 웹 페이지에 구조를 제공합니다.

이를 구분해보면:

HyperText: 다른 텍스트로의 링크를 포함한 텍스트를 의미합니다.
Markup: 평범한 텍스트에 특별한 "태그"를 추가하여 의미와 구조를 부여하는 것을 의미합니다.
Language: 컴퓨터와 소통하는 방법으로, 내용을 어떻게 표시해야 하는지 알려줍니다.

다음은 간단한 HTML 예제입니다:

<h1>내 첫 번째 웹 페이지에 오신 것을 환영합니다!</h1>
<p>이 텍스트는 문단입니다.</p>

이 예제에서, <h1>과 <p>는 브라우저가 텍스트를 어떻게 표시해야 하는지 알려주는 HTML 태그입니다.

HTML을 사용하는 이유

"왜 HTML을 배우는 데 힘을 써야 할까?"라고 궁금할 수 있습니다. 저는 이 작은 이야기를 들려드리겠습니다. 저는 처음에는 화려한 웹 사이트 빌더를 사용하면 모든 것을 할 수 있다고 생각했습니다. 하지만 특정한 요구를 하는 고객을 만났을 때, 이 도구들이 할 수 없는 일이 있음을 알게 되었습니다. 그때 HTML의 힘을 깨달았습니다.

HTML이 중요한 이유는 다음과 같습니다:

웹의 보편적인 언어: 방문한 적 있는 모든 웹 사이트는 HTML을 사용합니다.
통제력: 당신이 원하는 것을 정확히 만들 수 있으며, 도구가 허용하는 것만이 아닙니다.
고급 웹 개발의 기초: CSS와 자바스크립트를 배우기 위해서는 먼저 HTML이 필요합니다.
비교적 쉽게 배울 수 있습니다: 저가 배울 수 있었던 만큼, 여러분도 배울 수 있습니다!

HTML 버전

HTML은 연간에 따라 진화해 왔습니다. 다음은 주요 버전의 개요입니다:

버전	연도	주요 특징
HTML 1.0	1991	매우 기본적, 18개의 요소만 포함
HTML 2.0	1995	폼과 테이블 도입
HTML 3.2	1997	더 많은 태그와 속성 지원
HTML 4.01	1999	CSS와 스크립트에 대한 개선된 지원
XHTML	2000	엄격한, XML 기반의 HTML 버전
HTML5	2014	현재 표준, 새로운 의미적 요소와 API 포함

오늘날 우리는 매우 강력하고 유연한 HTML5를 주로 사용합니다.

HTML 문서 구조

모든 HTML 문서는 특정 구조를 따릅니다. 웹 페이지의 도면이라고 생각하면 됩니다. 다음은 그 구조입니다:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내 첫 번째 웹 페이지</title>
</head>
<body>
<h1>내 웹 페이지에 오신 것을 환영합니다!</h1>
<p>여기서 모든 시각적인 콘텐츠가 들어갑니다.</p>
</body>
</html>

이를 구분해보면:

<!DOCTYPE html>: 브라우저에게 우리가 HTML5를 사용하고 있음을 알립니다.
<html>: HTML 페이지의 루트 요소입니다.
<head>: 문서에 대한 메타 정보를 포함합니다.
<body>: 시각적인 페이지 콘텐츠를 포함합니다.

웹 브라우저의 역할

웹 브라우저는 HTML의 해석자입니다. 그들은 HTML 코드를 읽고 시각적인 웹 페이지로 렌더링합니다. 다른 브라우저는 동일한 HTML을 약간 다르게 렌더링할 수 있으므로, 여러 브라우저에서 웹 사이트를 테스트하는 것이 중요합니다.

재미있는 사실은 첫 번째 웹 브라우저가 Tim Berners-Lee에 의해 만들어졌으며, WorldWideWeb(후에 Nexus로 개명)이라는 이름이었다는 것입니다!

HTML 태그, 속성 및 요소

HTML은 세 가지 주요 구성 요소로 구성됩니다:

태그: HTML의 기본 블록으로, 항상 각형括弧으로 둘러싸여 있습니다. 예를 들어, <p>는 문단 태그입니다.
속성: 요소에 대한 추가 정보를 제공합니다. 시작 태그에서 지정됩니다.
요소: 시작 태그에서 끝 태그까지의 모든 것입니다.

다음은 예제를 보겠습니다:

<a href="https://www.example.com" title="Example 방문">여기를 클릭하세요</a>

이 예제에서:

<a>는 태그(하이퍼링크를 위한 태그)
href과 title은 속성
전체 줄은 요소입니다

다음은 일부 일반적인 HTML 태그입니다:

태그	설명
`<h1>` to `<h6>`	제목
`<p>`	문단
`<a>`	하이퍼링크
`<img>`	이미지
`<ul>`과 `<ol>`	비정렬 및 정렬 목록
`<table>`	테이블
`<div>`	구분이나 섹션

HTML을 배우는 중요성

HTML을 배우는 것은 디지털 시대에 읽고 쓰는 것을 배우는 것과 같습니다. 웹의 작동 방식과 그 안에서 창조하는 방법을 이해하는 첫 번째 단계입니다. HTML을 배우면 다음과 같은 일을 할 수 있습니다:

자신만의 웹 사이트를 처음부터 만들 수 있습니다.
기존 웹 사이트를 이해하고 수정할 수 있습니다.
디자이너와 개발자와 더 효과적으로 소통할 수 있습니다.
웹 개발 분야에서 직업 기회를 열 수 있습니다.

저는 HTML을 배우기 어렵다고 생각했던 학생을 가르치기도 했습니다. 그녀는 HTML로 시작했고, 몇 주 만에 첫 번째 웹 사이트를 만들었습니다. 그녀의 자랑스러움과 성취감이 가득한 얼굴을 보는 것은 가치가 있었습니다. HTML의 힘은 이렇습니다 - 접근성이 뛰어나지만 강력합니다.

결론적으로, HTML은 웹의 뼈대이며, 배우는 것은 웹 개발의 흥미로운 첫 걸음입니다. 처음에는 어려워 보일 수 있지만, 연습과 인내심을 가지면 곧 놀라운 웹 페이지를 만들 수 있을 것입니다. 기억하세요, 모든 전문가는 초보자였습니다. 그럼 HTML 여정을 시작해보세요! 코드를 작성해봅시다!

Credits: Image by storyset