03_HTML 텍스트 태그

• 제목을 나타내는 <hn>태그

- 웹문서에서 제목은 다른 텍스트보다 크고 진하게 표시합니다.

- 자주 사용하는 제목 스타일을 미리 태그 형태로 만든 것이 바로 <hn>태그 입니다.

- <hn>태그에서 h는 제목을 뜻하는 heading을 줄인 말입니다.

- n의 자리에는 1~6의 숫자가 들어가며 제목 텍스트를 크기별로 표시할 수 있습니다.

- <h1>이 가장 큰 제목이고 <h2>, <h3>, <h4>, <h5>, <h6>의 순서대로 크기가 작아집니다.

기본형

<hn>제목</hn>

 

 

 

• 텍스트 단락을 만드는 <p>태그, 줄을 바꾸는 <br>태그

- 텍스트를 적절하게 단락으로 묶어서 표시하려면 <p>태그를 사용합니다.

- <p>태그와 </p>태그 안에 입력한 내용이 너무 길어서 브라우저 창에 한 줄로 표시할 수 없을 경우 자동으로 줄이 바뀝니다.

- 원하는 위치에서 줄을 바꿔서 표시할 때는 <br>태그를 사용합니다.

Tip 1. p는 paragraph의 줄임말이고, br은 break row의 줄임말입니다. 2. <br> 태그는 실제로는 단락이 만들어진 게 아니므로 CSS를 사용해 단락 스타일을 적용할 때 문제가 생깁니다. 따라서 텍스트 단락을 만들 때는 <p>태그를 사용해야 합니다.

 

기본형

<p>내용</p>
<br>

Tip <br>

• 분위기를 전환하는 <hr>태그

- <hr>태그는 hr은 horizontal의 줄임말로, 처음에는 가로줄을 그리는 용도로 만들었습니다.

- 최근에는 여러 내용을 나열하는 도중에 분위기를 전환할 때 주로 사용합니다.

- <hr>태그로 추가한 가로줄은 CSS를 사용해 화면에서 감춥니다.

Tip 웹 문서에서 가로줄을 그릴 때는 <hr> 태그 대신 CSS를 사용합니다.

 

• 인용할 때 쓰는 <blockquote>태그

- 인용할 때 흔히 큰따옴표("")를 사용하는 것을 웹 브라우저에서는 이렇게 표시한 인용문을 인식할 방법이 없습니다. 브라우저가 인용문을 인식할 수 있게하려면 <blockquote> 태그로 감싸주어야 합니다.

- 웹브라우저는 <blockquote> 태그 안의 내용을 인용문으로 알고 다른 텍스트보다 약간 들여 씁니다.

기본형

<blockquote>인용문</blockquote>

 

• 텍스트를 강조하거나 굵게 표시하는 <strong>, <b>태그

- 텍스를 갈조하거나 굴게 표시할 때는 <strong>이나 <b>태그를 사용합니다.

- 경고나 주의 사항처럼 중요한 내용을 강조하 때는 <strong>태그를 사용합니다.

- 키워드 처럼 단순히 글자만 굵게 표시할 때는 <b>태그를 사용합니다.

- 화면 낭독기는 <strong>태그를 사용한 부분을 강조하여 읽어줍니다.

기본형

<strong>굵게 강조할 텍스트</strong>
<b>굵게 표시 할 텍스트</b>

Tip 화면 낭독기(screen reader): 시각 장애인이 컴퓨터를 사용할 때 화면에 나타나는 정보를 음성으로 들려주는 프로그램

 

• 기울인 텍스트를 표시하는 <em>, <i>, <cite>태그

- <em>태그에서 em은 강조를 뜻하는 emphasis의 줄임말로, 문장에서 특정 부분을 강조하고 싶을 때 사용합니다.

- <i>태그는 마음속의 생각이나 용어, 관용구 등에 사용합니다. 최근에는 글꼴 아이콘을 표시하는 용도로 많이 사용합니다.

- <cite>태그는 책이나 영화, 블로그 같은 저작물의 제목을 나타낼 때 사용합니다.

기본형

<em>이탤릭체로 강조할 텍스트</em>
<i>이탤릭체로 표시할 텍스트</i>
<cite>저작물 제목</cite>

 

• 그 밖에 다양한 텍스트 관련 태그

종류	설명	예시
<abbr>	줄임말을 표시합니다. title 속성을 함께 사용해 줄이기 전의 텍스트를 지정합니다.	<abbr title = "Artificial Intelligence">AI</abbr>
<code>	소스 코드를 표시합니다.	<code>push()</code> 침수
<del>	문서에서 삭제된 텍스트를 나타냅니다.	<del>삭제된 내용</del>
<ins>	문서에 추가된 텍스트를 나타냅니다.	<ins>추가된 내용</ins>
<mark>	태그를 적용한 부분에 하이라이트를 표시합니다.	<p>사과는<mark>빨간색</mark>이다</p>
<small>	덧붙이는 글이나 저작권 등 부가 정보를 작게 표시할 때 사용합니다.	<p>가격: 0,000원<small>(부가세별도)</small></p>
<sub>	아래첨자를 표시합니다.	<p>물의 화학식은 H<sub>2</sub>O입니다</p>
<sup>	위첨자를 표시합니다.	<p>E = mc<sup>2</sup></p>

 

 

•  W3Schools의 다양한 HTML 태그

https://www.w3schools.com/tags/tag_comment.asp

W3Schools.com