2일차: 텍스트 형식화와 링크

이번 시간에는 HTML에서 텍스트를 포맷팅하는 방법과 링크를 만드는 방법에 대해 다룰 것입니다. 텍스트 포맷팅은 웹 페이지에서 텍스트의 스타일을 정의하고, 링크는 웹 페이지 간 이동을 가능하게 합니다.

텍스트 포맷팅

HTML에서 텍스트를 포맷팅하는 데 사용할 수 있는 여러 가지 태그가 있습니다. 이 태그들은 텍스트의 스타일이나 강조를 나타내는데 사용됩니다. 주요 포맷팅 태그는 다음과 같습니다:

1. <b> 태그 - 볼드체 (굵은 글씨)
   <b> 태그는 텍스트를 볼드체로 표시합니다. 굵은 텍스트를 나타낼 때 사용되며, 단순히 시각적인 효과를 위해 사용됩니다.

   <p><b>이것은 굵은 텍스트입니다.</b></p>

   출력: 이것은 굵은 텍스트입니다.

2. <i> 태그 - 이탤릭체 (기울임 글씨)
   <i> 태그는 텍스트를 이탤릭체로 표시합니다. 보통 강조할 때나 외국어 표현, 인용 등을 나타낼 때 사용됩니다.

   <p><i>이것은 이탤릭체 텍스트입니다.</i></p>

   출력: 이것은 이탤릭체 텍스트입니다.

3. <strong> 태그 - 강조 (중요한 텍스트)
   <strong> 태그는 텍스트를 강조할 때 사용되며, 일반적으로 굵은 텍스트로 표시됩니다. 그러나 <strong>은 단순히 스타일을 변경하는 것 외에도 "의미상 중요한" 텍스트를 나타내는 데 사용됩니다.

   <p><strong>이 텍스트는 중요합니다!</strong></p>

   출력: 이 텍스트는 중요합니다!

4. <em> 태그 - 강조 (기울임체로 강조된 텍스트)
   <em> 태그는 텍스트를 강조할 때 사용되며, 보통 기울임체로 표시됩니다. <strong>과 달리 이 태그는 의미적으로 텍스트에 강한 강조를 주기 위해 사용됩니다.

   <p><em>이 텍스트는 강조되어야 합니다.</em></p>

   출력: 이 텍스트는 강조되어야 합니다.

---

단락과 줄 바꿈

웹 페이지에서 텍스트를 구분하고 정렬하는 데 사용되는 여러 태그가 있습니다. 주요 태그들은 다음과 같습니다:

1. <p> 태그 - 단락 (Paragraph)
   <p> 태그는 문서 내에서 텍스트 단락을 구분하는 데 사용됩니다. 이 태그는 자동으로 단락을 나누고, 텍스트 앞뒤에 여백을 추가합니다.

   <p>첫 번째 단락입니다. 이 단락은 <b>텍스트 포맷팅</b>을 사용하여 강조할 수 있습니다.</p>
   <p>두 번째 단락입니다.</p>

   출력:

   첫 번째 단락입니다. 이 단락은 텍스트 포맷팅을 사용하여 강조할 수 있습니다.
   
   두 번째 단락입니다.

2. <br> 태그 - 줄 바꿈 (Line Break)
   <br> 태그는 텍스트에서 줄 바꿈을 할 때 사용됩니다. 이 태그는 텍스트 사이에 공백을 추가하지 않고 바로 다음 줄로 내려가도록 합니다.

   <p>이 텍스트는 <br>줄 바꿈을 사용하여 <br>분리되었습니다.</p>

   출력:

   이 텍스트는
   줄 바꿈을 사용하여
   분리되었습니다.

3. <blockquote> 태그 - 인용 (Block Quotation)
   <blockquote> 태그는 긴 인용문을 나타낼 때 사용됩니다. 일반적으로 왼쪽과 오른쪽에 들여쓰기가 적용되어 인용문임을 시각적으로 구분합니다.

   <blockquote>
     "HTML은 웹 페이지를 구성하는 중요한 언어입니다. 이 언어 없이는 웹 페이지를 만들 수 없습니다."
     - 웹 개발자
   </blockquote>

   출력:

   "HTML은 웹 페이지를 구성하는 중요한 언어입니다. 이 언어 없이는 웹 페이지를 만들 수 없습니다."
   — 웹 개발자

---

링크 만들기

HTML에서 링크를 만들 때는 <a> 태그를 사용합니다. <a> 태그는 "Anchor" 태그라고도 하며, 웹 페이지 내에서 다른 페이지나 외부 사이트로 이동할 수 있는 링크를 생성합니다.

1. <a> 태그 사용법
   링크를 만들기 위해서는 <a> 태그를 사용하고, 그 안에 href 속성으로 링크할 URL을 지정합니다.

   <a href="https://www.example.com">Example 사이트로 이동</a>

   출력: Example 사이트로 이동

   위 코드를 클릭하면 사용자는 "https://www.example.com" 주소로 이동합니다.

2. href 속성
   href는 "Hypertext Reference"의 약자로, 링크 대상이 되는 URL을 지정하는 속성입니다. 이 URL은 다른 웹 페이지나 파일, 이메일 주소 등 다양한 자원을 참조할 수 있습니다.

   <a href="https://www.google.com">구글</a>
   <a href="mailto:someone@example.com">이메일 보내기</a>

   출력:
   구글
   이메일 보내기

   • 첫 번째 링크는 구글 사이트로 이동합니다.
   • 두 번째 링크는 이메일 클라이언트를 열어 지정된 이메일 주소로 메일을 보낼 수 있게 합니다.

---

링크 속성

<a> 태그의 속성에는 다양한 옵션이 있습니다. 그 중 두 가지 중요한 속성은 target과 title입니다.

1. target 속성
   target 속성은 링크를 클릭했을 때 링크가 열리는 방법을 지정할 수 있습니다. 가장 일반적인 값은 _blank입니다. _blank는 링크를 새 탭에서 열게 합니다.

   <a href="https://www.example.com" target="_blank">새 탭에서 Example 사이트 열기</a>

   출력: 새 탭에서 Example 사이트 열기

   이 링크를 클릭하면 웹 페이지가 새 탭에서 열립니다.

2. title 속성
   title 속성은 링크에 마우스를 올렸을 때 나타나는 추가적인 정보를 제공합니다. 이 속성은 링크를 클릭하지 않고도 해당 링크가 무엇인지 설명하는 데 사용됩니다.

   <a href="https://www.example.com" title="Example 사이트로 이동">Example 사이트</a>

   출력: Example 사이트
   이 링크 위에 마우스를 올리면 "Example 사이트로 이동"이라는 텍스트가 툴팁으로 표시됩니다.

---

결론

오늘은 HTML에서 텍스트를 포맷팅하는 여러 방법과 링크를 만드는 방법에 대해 배웠습니다. <b>, <i>, <strong>, <em> 태그를 사용해 텍스트를 강조하고, <p>, <br>, <blockquote> 태그로 텍스트를 구분하거나 인용할 수 있습니다. 또한, <a> 태그를 사용해 링크를 만들고, 다양한 속성(target, title)을 사용하여 링크의 동작 방식을 조정할 수 있음을 알게 되었습니다.

HTML의 텍스트 포맷팅과 링크 기능은 웹 페이지에서 콘텐츠를 효과적으로 표현하고, 사용자에게 다른 페이지나 외부 사이트로의 이동 경로를 제공하는 데 중요한 역할을 합니다.