코딩 첫걸음 | HTML 텍스트 지정 태그의 종류
이번 주제는 HTML의 텍스트 서식을 지정하는 태그입니다. 텍스트의 모양과 구조를 정의할 때 사용되며, 웹 표준과 접근성을 유지하기 위해서는 태그 선택 시 의미론적 조건도 함께 고려해야 합니다.
1.<b> 태그
<b> 태그는 텍스트를 굵게 표시하는 데 사용됩니다. 텍스트의 특정 부분에 주의를 집중시키는 데 사용됩니다. 이는 가독성에 도움이 되거나 중요한 정보를 강조하는 데 도움이 됩니다. 시각적인 강조 목적으로 사용되며, 의미론적으로 중요도를 갖지는 않습니다.
<p>This is normal text - and this is <b>bold text</b>.</p>
위 HTML 코드는 다음과 같은 형태로 웹페이지에 표시됩니다.
This is normal text - and this is bold text.
2. <i> 태그
<i> 태그는 텍스트를 이탤릭체로 표시합니다. 주로 기술 용어, 외국어 구문, 문장에서 강세를 나타내는 데 사용됩니다.
<p>She said, <i>“See you soon!”</i></p>
위 HTML 코드는 다음과 같은 형태로 웹페이지에 표시됩니다.
3. <u> 태그
<u> 태그는 텍스트에 밑줄을 표시합니다. 밑줄은 고유명사 또는 책 제목과 같은 언어적 뉘앙스를 나타낼 수도 있고, 강조를 추가하기 위해 이탤릭체나 굵게 표시할 수도 있습니다. 하이퍼링크와 혼동될 수 있으므로 주의해서 사용해야 합니다.
<p>Do not forget to read the <u>Terms and Conditions</u>.</p>
위 HTML 코드는 다음과 같은 형태로 웹페이지에 표시됩니다.
Do not forget to read the Terms and Conditions.
4. <strong> 태그
<strong> 태그는 내용의 중요성, 심각성 또는 긴급성이 매우 높다는 것을 나타냅니다. 브라우저는 일반적으로 이 텍스트를 굵게 표시합니다. <b> 태그와 유사하게 굵게 표시되지만, <strong> 태그는 텍스트의 중요성을 지니므로 의미상 다릅니다. 브라우저나 운영 체제에서 스크린 리더를 사용하는 경우 음성 합성 도구는 <strong>태그가 붙여진 곳을 거센 억양으로 읽어 줍니다. 즉, 문체 목적으로는 <b> 태그를 선택하고, 텍스트의 중요성이나 긴급성을 사용자와 보조 기술에 의미론적으로 전달해야 하는 경우에는 <strong> 태그를 선택해야 합니다.
<p><strong>Warning:</strong> This action cannot be undone!</p>
위 HTML 코드는 다음과 같은 형태로 웹페이지에 표시됩니다.
Warning: This action cannot be undone!
5. <em> 태그
<em> 태그는 강조해야 할 텍스트를 나타내는 데 사용됩니다. <i> 태그와 유사하게 이탤릭체로 표시되지만, 의미론적으로 중요한 텍스트를 나타냅니다.
<p>I <em>really</em> think you should reconsider your decision.</p>
위 HTML 코드는 다음과 같은 형태로 웹페이지에 표시됩니다.
6. <mark> 태그
<mark> 태그는 참조 또는 표기를 위해 텍스트의 일부를 강조 표시하는 데 사용됩니다. 이는 중요하거나 관련 섹션에 독자의 주의를 끄는 데 도움이 됩니다.
<p>Do not forget to bring the following items: <mark>passport, tickets, and voucher</mark>.</p>
위 HTML 코드는 다음과 같은 형태로 웹페이지에 표시됩니다.
Do not forget to bring the following items: passport, tickets, and voucher.
7. <small> 태그
<small> 태그는 더 작은 텍스트 크기를 나타내는 데 사용되며 부가 정보, 법적 고지, 저작권 등을 나타내는 데 사용됩니다. 예를 들면 '<small>© 2023 All rights reserved.</small>'와 같이 사용할 수 있죠.
8. <sub> 태그
<sub> 태그는 아래 첨자 텍스트를 만드는 데 사용됩니다. 이 텍스트는 일반 줄 아래에 문자 절반이 나타나며 때로는 나머지 텍스트보다 작습니다. 주로 화학식이나 수학 공식에서 사용됩니다. 예를 들면 'H<sub>2</sub>O is the chemical formula for water.'와 같이 사용할 수 있습니다.
9. <sup> 태그
<sup> 태그는 위 첨자 텍스트를 만드는 데 사용됩니다. 위 첨자는 일반 줄 위에 문자 절반이 표시됩니다. 주로 각주, 지수, 서수 등을 나타낼 때 사용합니다. 예를 들면 'x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup>' 와 같이 사용할 수 있습니다.
10. <del> 태그
<del> 태그는 문서에서 삭제된 텍스트를 나타내는 데 사용됩니다. 일반적으로 취소선으로 나타납니다.
<p>He bought <del>five</del> three apples.</p>
위 HTML 코드는 다음과 같은 형태로 웹페이지에 표시됩니다.
He bought five three apples.
11. <ins> 태그
<ins> 태그는 문서에 추가된 텍스트를 표시하는 데 사용됩니다. 이 태그에는 일반적으로 삽입을 나타내기 위해 밑줄이 그어져 있습니다.
<p>She completed <ins>all</ins> her assignments on time.</p>
위 HTML 코드는 다음과 같은 형태로 웹페이지에 표시됩니다.
She completed all her assignments on time.
12. <abbr> 태그
<abbr> 태그는 약어 또는 두문자어를 정의하는 데 사용됩니다. title 속성을 사용하면 <abbr> 요소 위에 마우스를 올려 놓았을 때 약어의 전체 형태를 나타나게 할 수 있습니다.
<p><abbr title="International Olympic Committee">IOC</abbr>
(국제 올림픽 위원회)는 스위스 로잔에 본부를 둔 국제 스포츠 기구이다.</p>
위 HTML 코드는 다음과 같은 형태로 웹페이지에 표시됩니다.
IOC(국제 올림픽 위원회)는 스위스 로잔에 본부를 둔 국제 스포츠 기구이다.
13. <blockquote>, <cite> 태그
<blockquote> 태그는 긴 인용문이나 인용 단락을 나타냅니다. 주로 들여쓰기 형식으로 표현됩니다. 주요 내용에서 텍스트를 분리하여 더 큰 규모의 인용문을 나타내는 데 유용합니다.
<cite> 태그는 창작물에 대한 참조를 설명하는 데 사용됩니다. 원작자, 책, 논문, 영화 등의 제목을 표시할 때 사용합니다. 이 태그는 일반적으로 기울임꼴로 표시됩니다.
<blockquote>
우리는 한 번도 존재하지 않았던 것을 꿈꿀 수 있는 사람들이 필요하다.
<cite>존 F. 케네디</cite>
</blockquote>
위 HTML 코드는 다음과 같은 형태로 웹페이지에 표시됩니다.
우리는 한 번도 존재하지 않았던 것을 꿈꿀 수 있는 사람들이 필요하다. 존 F. 케네디
14. <q> 태그
<q> 태그는 단락이나 문장의 흐름 내에 있는 짧은 인용문에 사용됩니다. 브라우저는 일반적으로 <q> 안의 콘텐츠를 따옴표로 표시됩니다.
<p>He said, <q>Be the change you wish to see in the world.</q></p>
위 HTML 코드는 다음과 같은 형태로 웹페이지에 표시됩니다.
He said, "Be the change you wish to see in the world."
15. <address> 태그
<address> 태그는 연락처 정보를 나타냅니다. 주로 이메일 주소, 물리적 주소, 전화번호 등을 표시할 때 사용합니다.
<address>
John Doe<br>
123 Main Street<br>
City, State 12345<br><a href="mailto:john@example.com">john@example.com</a>
</address>
위 HTML 코드는 다음과 같은 형태로 웹페이지에 표시됩니다.
