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