본문 바로가기
Front end/HTML

[HTML] 텍스트 태그

by 더 이프 2023. 9. 7.
728x90

HTML 텍스트 태그에 대한 이해

안녕하세요, 웹 개발자를 꿈꾸는 분들! 오늘은 웹 페이지의 기본 구조를 이루는 HTML의 텍스트 관련 태그에 대해 알아보겠습니다.

 

1. 제목 태그: <h1> ~ <h6>

웹 페이지의 제목이나 부제목을 나타내기 위해 사용되는 태그입니다. <h1>은 가장 큰 제목을 의미하며, <h6>까지 점차 크기가 작아집니다.

<h1>이것은 h1 태그입니다.</h1>
<h2>이것은 h2 태그입니다.</h2>
<h3>이것은 h3 태그입니다.</h3>
<h4>이것은 h4 태그입니다.</h4>
<h5>이것은 h5 태그입니다.</h5>
<h6>이것은 h6 태그입니다.</h6>

이것은 h1 태그입니다.

이것은 h2 태그입니다.

이것은 h3 태그입니다.

이것은 h4 태그입니다.

이것은 h5 태그입니다.
이것은 h6 태그입니다.

 

2. 단락 태그: <p>

텍스트의 단락을 나타내기 위한 태그입니다.

<p>이것은 단락입니다. 웹 페이지에서 내용을 설명할 때 주로 사용됩니다.</p>

이것은 단락입니다. 웹 페이지에서 내용을 설명할 때 주로 사용됩니다.

 

3. 강조 태그: <em><strong>

텍스트를 강조할 때 사용하는 태그입니다. <em>은 이탤릭체로, <strong>은 굵은 글씨로 텍스트를 강조합니다.

<p>이것은 <em>이탤릭체</em>로 강조된 텍스트입니다.</p>
<p>이것은 <strong>굵은 글씨</strong>로 강조된 텍스트입니다.</p>

이것은 이탤릭체로 강조된 텍스트입니다.

이것은 굵은 글씨로 강조된 텍스트입니다.

 

4. 줄바꿈 태그: <br>

텍스트 내에서 줄바꿈을 할 때 사용하는 태그입니다.

<p>이것은 첫 번째 줄입니다.<br>이것은 두 번째 줄입니다.</p>

이것은 첫 번째 줄입니다.
이것은 두 번째 줄입니다.

 

5. 인용 태그: <blockquote><q>

텍스트를 인용할 때 사용하는 태그입니다. <blockquote>는 긴 인용문을, <q>는 짧은 인용문을 위해 사용됩니다.

<blockquote>이것은 긴 인용문입니다. 여러 문장의 내용을 인용할 때 주로 사용됩니다.</blockquote>
<p>이것은 <q>짧은 인용문</q>을 나타냅니다.</p>
이것은 긴 인용문입니다. 여러 문장의 내용을 인용할 때 주로 사용됩니다.

이것은 짧은 인용문을 나타냅니다.

 

6. 코드 태그: <code>, <pre>

텍스트 중에서 코드를 나타낼 때 사용하는 태그입니다. <code>는 한 줄의 코드를, <pre>는 여러 줄의 코드를 표현할 때 사용됩니다.

<p>이것은 <code>코드</code>를 나타내는 태그입니다.</p>
<pre>
function sayHello() {
  alert("Hello, World!");
}
</pre>

이것은 코드를 나타내는 태그입니다.

function sayHello() {
  alert("Hello, World!");
}

 

마치며

이렇게 HTML은 다양한 텍스트 태그를 통해 웹 페이지의 내용을 구성하고 스타일링할 수 있습니다. 태그들의 적절한 조합으로 의미 있는 웹 문서를 만들어 보세요! 다음 시간에는 다른 태그들에 대해 알아보겠습니다. :)