2. 텍스트 태그

2.1 제목 태그 (h1 ~ h6)

제목 태그 사용법

<h1>가장 큰 제목</h1>
<h2>두 번째 제목</h2>
<h3>세 번째 제목</h3>
<h4>네 번째 제목</h4>
<h5>다섯 번째 제목</h5>
<h6>가장 작은 제목</h6>

실제 브라우저에서 보여지는 모습:

가장 큰 제목

두 번째 제목

세 번째 제목

네 번째 제목

다섯 번째 제목

가장 작은 제목

2.2 단락과 줄바꿈

단락(p)과 줄바꿈(br) 태그

<p>이것은 첫 번째 단락입니다.</p>
<p>이것은 두 번째 단락입니다.<br>
줄바꿈이 된 텍스트입니다.</p>

실제 브라우저에서 보여지는 모습:

이것은 첫 번째 단락입니다.

이것은 두 번째 단락입니다.
줄바꿈이 된 텍스트입니다.

2.3 텍스트 강조와 스타일

다양한 텍스트 스타일 태그

<strong>굵은 텍스트</strong>
<em>기울어진 텍스트</em>
<mark>하이라이트된 텍스트</mark>
<small>작은 텍스트</small>
<del>삭제된 텍스트</del>
<ins>밑줄 텍스트</ins>
<sub>아래 첨자</sub>
<sup>위 첨자</sup>

실제 브라우저에서 보여지는 모습:

굵은 텍스트

기울어진 텍스트

하이라이트된 텍스트

작은 텍스트

~~삭제된 텍스트~~

밑줄 텍스트

H₂O (물의 화학식)

2³ = 8 (2의 3제곱)

2.4 인용문

인용문 태그

<blockquote>
    <p>인용문은 다른 출처에서 가져온 텍스트를 표시할 때 사용합니다.</p>
    <cite>- 출처: HTML 가이드</cite>
</blockquote>

<q>짧은 인용문은 q 태그를 사용합니다.</q>

실제 브라우저에서 보여지는 모습:

인용문은 다른 출처에서 가져온 텍스트를 표시할 때 사용합니다.
- 출처: HTML 가이드

짧은 인용문은 q 태그를 사용합니다.

2.5 실습 과제

다음 요구사항을 만족하는 웹 페이지를 만들어보세요:

제목: "나의 취미 소개"
취미에 대한 간단한 설명 (단락 태그 사용)
취미의 장점 3가지 (리스트 사용)
취미와 관련된 인용문 하나
중요한 부분은 강조 표시

예시 결과:

나의 취미 소개

저의 취미는 독서입니다. 매일 밤 잠들기 전에 책을 읽는 것이 제가 가장 좋아하는 시간입니다.

독서의 장점

지식을 넓힐 수 있습니다.
집중력이 향상됩니다.
스트레스 해소에 도움이 됩니다.

책은 마음의 양식이다.
- 익명

2.6 퀴즈

다음 문제를 풀어보세요:

웹 페이지에서 가장 큰 제목을 표시하는 태그는 무엇인가요?
텍스트를 굵게 표시하는 태그는 무엇인가요?
줄바꿈을 할 때 사용하는 태그는 무엇인가요?
인용문을 표시할 때 사용하는 태그는 무엇인가요?
텍스트에 밑줄을 그을 때 사용하는 태그는 무엇인가요?

정답:

<h1> 태그
<strong> 태그
<br> 태그
<blockquote> 태그
<ins> 태그