Chapter 1-6. 텍스트 표시하기

📌 HTML에서 텍스트 표시하는 방법과 특징

이번 튜토리얼은 HTML에서 텍스트를 표시하는 기본적인 방법과 관련된 태그들을 다루며, 텍스트를 구성하는 데 필요한 중요한 개념들을 설명합니다. 주요 태그인 p(문단), h1~h6(제목), hr(수평선) 등을 사용하고, HTML 텍스트에서 발생할 수 있는 엔터 무시, 공백 축소 문제를 해결하는 방법을 배웁니다.

---

📝 1. HTML에서 텍스트를 표시하는 기본적인 태그들

HTML 웹페이지는 다양한 콘텐츠로 구성되지만, 텍스트는 그 중 가장 직관적으로 정보를 전달하는 요소입니다. 텍스트를 표현하기 위해 p 태그, h1~h6 태그, hr 태그를 사용합니다.

🔹 p 태그 (문단)

• p 태그는 텍스트 단락을 정의하는 데 사용됩니다.
• 각 p 태그는 문단을 나타내며, 문단 사이에 여백이 생겨서 콘텐츠가 시각적으로 구분됩니다.

✅ 예시

<p>고양이는 귀여운 동물입니다.</p>

🔹 h1~h6 태그 (제목)

• 제목을 표시할 때 사용하며, 숫자가 클수록 글자의 크기가 작아집니다.
• h1 태그는 가장 큰 제목을 나타내고, h6은 가장 작은 제목을 나타냅니다.

✅ 예시

<h1>고양이</h1>
<h3>식성</h3>

🔹 hr 태그 (수평선)

• 콘텐츠를 구분하는 수평선을 표시할 때 사용합니다.
• hr 태그는 단일 태그로, 콘텐츠 구분을 시각적으로 도와줍니다.

✅ 예시

<hr>

---

📝 2. HTML 텍스트 표시의 특징과 해결법

HTML에서 텍스트를 표시할 때 엔터와 공백에 대한 몇 가지 특징이 있습니다.

🔹 엔터 키를 이용한 줄바꿈 무시

• HTML에서는 엔터 키로 입력한 줄바꿈이 무시됩니다. 여러 줄로 텍스트를 작성하더라도 화면에서는 하나로 이어져서 표시됩니다.

✅ 예시

<p>고양이는 귀여운 동물입니다.
  그것은 매우 활발하고 사랑스럽습니다.</p>

• 위 코드에서 줄바꿈이 무시되어 하나의 문단으로 표시됩니다.

🔹 스페이스를 한 번만 허용

• HTML에서는 여러 개의 공백을 입력해도 하나의 공백으로 처리됩니다.

✅ 예시

<p>고양이      고양이  고양이</p>

• 위 코드에서는 공백이 하나로 처리되어 표시됩니다.

🔹 문제 해결: BR 태그와 엔티티 코드 사용

• 줄바꿈을 원할 때는 <br> 태그를 사용합니다.
• 여러 개의 공백을 표시하려면   엔티티 코드를 사용합니다.

✅ 예시

<h1>고양이</h1>
<hr>
<h3>식성</h3>

• <br>은 줄바꿈을, &nbsp;는 여러 공백을 추가하는 데 사용됩니다.

---

✍️ 3. 텍스트 태그와 HR 태그 활용법

HTML에서 텍스트와 HR 태그를 사용하여 콘텐츠를 명확히 구분할 수 있습니다. 특히 HR 태그는 단일 태그로 사용되며, 수평선을 화면에 추가하여 두 개의 콘텐츠를 시각적으로 구분하는 데 도움을 줍니다.

✅ 예시

<h1>고양이</h1>
<hr>
<h3>식성</h3>

• 위와 같은 코드에서는 HR 태그를 사용하여 고양이와 식성 사이를 구분합니다.

---

📝 4. HTML 텍스트의 줄바꿈 및 공백 처리

🔹 줄바꿈 처리: <br> 태그

HTML에서는 엔터를 통한 줄바꿈이 반영되지 않으므로, <br> 태그를 사용하여 줄바꿈을 강제로 추가할 수 있습니다.

🔹 공백 처리: &nbsp; 엔티티 코드

여러 공백을 표시할 때는 **&nbsp;**를 사용하여 여러 개의 공백을 추가할 수 있습니다.

✅ 예시

<p>고양이&nbsp;&nbsp;&nbsp;고양이</p>

• 위 코드는 3개의 공백을 추가하는 예시입니다.

---

📚 5. HTML 텍스트 표시 방법 정리

이번 시간에는 HTML을 사용하여 텍스트를 표시하는 방법과 텍스트의 특징에 대해 다루었습니다. 중요한 점은 HTML에서 줄바꿈과 공백 처리가 기본적으로 무시된다는 점입니다. 이를 해결하기 위한 방법은 <br> 태그와 &nbsp; 엔티티 코드를 사용하는 것입니다.

✅ 핵심 포인트

• p 태그: 문단을 정의합니다.
• h1~h6 태그: 제목을 정의합니다.
• hr 태그: 콘텐츠 구분을 위한 수평선 표시.
• <br>: 줄바꿈을 추가하는 태그.
• &nbsp;: 여러 공백을 추가하는 엔티티 코드.

이제 HTML 텍스트 태그를 제대로 활용하여 웹페이지의 텍스트를 효과적으로 구성할 수 있습니다. 다음 강의에서는 더욱 심화된 HTML 문법을 다룰 예정입니다!

---

🎯 마무리

이번 강의를 통해 HTML 텍스트 태그와 그 특징을 이해하고 실습을 통해 익혔습니다. 이제 텍스트 구성에 대해 한 단계 더 발전된 이해를 가지셨을 것입니다. 계속해서 실습을 진행하며 더 많은 HTML 태그를 익혀 나가세요! 👏✨