HTML - 기본 태그: 초学者的 가이드

안녕하세요, 미래의 웹 개발자 여러분! HTML의 세계로의 흥미로운 여정을 안내해 드리게 되어 기쁩니다. 컴퓨터 과학을 10년 이상 가르쳐온 경험을 가진 저는 HTML이 웹사이트의 뼈대라고 말씀드릴 수 있습니다 - 모든 것을 지탱하는 구조를 제공합니다. 그麼, 기본 태그를 탐구해 보고 웹 개발 기술의 기초를 다지ましょう!

HTML - Basic Tags

HTML이란?

HTML은 HyperText Markup Language의 약자로, 웹 페이지를 만드는 표준 언어입니다. 집의 도면을 생각하시면 됩니다 - 브라우저가 웹 페이지의 콘텐츠를 어떻게 구조화하고 표시해야 하는지 알려줍니다.

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>
<!-- 여기에 콘텐츠를 작성하세요 -->
</body>
</html>

이것을 분해해 보겠습니다:

<!DOCTYPE html>는 이 문서가 HTML5 문서임을 선언합니다.
<html>는 HTML 페이지의 루트 엘리먼트입니다.
<head>는 문서에 대한 메타 정보를 포함합니다.
<body>는 문서의 본문을 정의하며, 모든 시각적인 콘텐츠를 포함합니다.

HTML 기본 태그 예제

이제 가장 흔히 사용할 HTML 태그를 탐구해 보겠습니다. 각 태그에 대해 예제와 설명을 제공하겠습니다.

1. 제목

HTML은 <h1> (가장 중요)에서 <h6> (가장 덜 중요)까지 6단계의 제목을 제공합니다.

<h1>이것은 주요 제목입니다</h1>
<h2>이것은 보조 제목입니다</h2>
<h3>이것은 세차 제목입니다</h3>

이 태그는 텍스트를 크게 만들뿐만 아니라, 검색 엔진이 콘텐츠의 구조를 이해하는 데 도움을 줍니다. 책의 장标题을 생각해 보세요!

2. 문단

<p> 태그는 문단을 정의하는 데 사용됩니다.

<p>이것은 문단입니다. 여기에는 여러 문장이 포함될 수 있으며, HTML 코드에서 여러 줄에 걸쳐 나타날 수 있지만, 브라우저에서는 단일 텍스트 블록으로 표시됩니다.</p>

Pro tip: 문단을 정의할 때 항상 <p> 태그를 사용하세요. 이는 접근성과 SEO에 도움이 됩니다!

3. 링크

링크는 <a> (앵커) 태그를 사용하여 만듭니다.

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

href 속성은 링크가 가는 페이지의 URL을 지정합니다. 링크는 웹사이트의 문을 생각하시면 됩니다 - 사용자가 하나의 페이지에서 다른 페이지로 이동할 수 있게 합니다!

4. 이미지

이미지는 <img> 태그를 사용하여 삽입됩니다.

<img src="cat.jpg" alt="창가에 앉은 귀여운 고양이">

src 속성은 이미지 파일의 경로를 지정하며, alt는 화면阅读기나 이미지 로드 실패 시 대체 텍스트를 제공합니다. 항상 설명적인 alt 텍스트를 포함하세요 - 이미지에 목소리를 주는 것입니다!

5. 목록

HTML은 순서가 있는 목록( 번호로된 목록)과 순서가 없는 목록( 원형 목록)을 지원합니다.

순서가 없는 목록:

<ul>
<li>사과</li>
<li>바나나</li>
<li>자두</li>
</ul>

순서가 있는 목록:

<ol>
<li>일어나기</li>
<li>이끼 치우기</li>
<li>아침 식사하기</li>
</ol>

목록은 정보를 정리하는 데 좋습니다. 발표 자료의 별표를 생각해 보세요!

6. 강조와 강한 중요성

<em> 태그는 강조( 일반적으로 이탤릭으로 표시)에 사용되고, <strong> 태그는 강한 중요성( 일반적으로 굵게 표시)에 사용됩니다.

<p>저는 HTML을 가르치는 것을 <em>진심으로</em> 좋아합니다. 이는 웹 개발에 <strong> 필수적 </strong>입니다!</p>

이 태그는 텍스트에 의미를 더하는 것이 아니라 스타일을 더하는 것입니다. 말할 때 톤과 강조를 추가하는 것을 생각해 보세요!

7. 줄 바꿈과 수평선

때로는 문단을 새로 시작하지 않고 줄을 바꾸고 싶을 때가 있습니다. 그때 <br> 태그를 사용합니다:

<p>장미는 빨간색,<br> violets are blue,<br>HTML은 최고이고,<br>당신도 그렇습니다!</p>

수평선을 추가하려면 <hr> 태그를 사용합니다:

<p>이것은 하나의 섹션의 끝입니다.</p>
<hr>
<p>다른 섹션의 시작입니다.</p>

<br>는 키보드의 부드러운 리턴을 생각하시면 되고, <hr>는 종이에 섹션을 나누는 선을 그리는 것을 생각하시면 됩니다.

HTML 방법 표

이제 우리가 다룰 기본 HTML 태그를 요약한 표를 제공합니다:

태그	설명	예제
`<h1>` to `<h6>`	제목	`<h1>주요 제목</h1>`
`<p>`	문단	`<p>이것은 문단입니다.</p>`
`<a>`	링크	`<a href="https://example.com">링크</a>`
`<img>`	이미지	`<img src="image.jpg" alt="설명">`
`<ul>`	순서가 없는 목록	`<ul><li>항목</li></ul>`
`<ol>`	순서가 있는 목록	`<ol><li>첫 번째</li></ol>`
`<em>`	강조	`<em>강조된 텍스트</em>`
`<strong>`	강한 중요성	`<strong> 중요한 텍스트 </strong>`
`<br>`	줄 바꿈	`줄 1<br>줄 2`
`<hr>`	수평선	`<hr>`

기억하세요, HTML은 구조와 의미에 관한 것입니다. 연습을 하면서 이 기본적인 건축 블록들이 어떻게 모여 전체 웹 페이지를 만드는지 보게 될 것입니다. 알파벳을 배우고 첫 이야기를 쓰는 것처럼, 이 기본기를 마스터하면 웹 개발의 전 세계가 열려드립니다!

이 가이드가 HTML 여정을 시작하는 데 도움이 되길 바랍니다. 계속 연습하고, 호기심을 가지고, 실험을 두려워하지 마세요. 깜빡할 때까지 연습을 하면, 자랑스럽게 공유할 수 있는 놀라운 웹 페이지를 만들 수 있을 것입니다. 행복한 코딩을 기원합니다!

Credits: Image by storyset