[HTML 기본] 텍스트 관련 태그 모음

텍스트를 덩어리로 묶어 주는 태그

<h1> ~ <h6>  제목 표시하기

제목 텍스트는 일반 텍스트보다 굵고 진하게 표시됩니다. 

 

<p> 단락 만들기

<br> 줄 바꾸기

웹 브라우저에서 줄바꿈을 하려면 줄을 바꿀 위치에 <br> 태그를 사용해야 합니다.

<blockquote> 인용문 넣기

다른 블로그나 사이트의 글을 인용할 경우 <blockquote> 태그를 이용해 표시합니다.

이때 인용한 문장은 다른 텍스트보다 안으로 들여 써지므로 다른 텍스트와 구별됩니다.

<pre> 입력하는 그대로 화면에 표시하기

HTML에서는 아무리 많은 공백을 넣더라도 브라우저 창에는 한 개의 공백만 표시됩니다. 

하지만 <pre> 태그를 사용할 경우, 소스에 표시한 공백이 브라우저에 그대로 표시됩니다.

 

텍스트를 한 줄로 표시하는 태그

<srtong>, <b>  굵게 표시하기

<strong> : 경고나 주의 사항처럼 중요한 내용을 강조해야 할 때 사용

<b> : 단순히 굵게 표시해야 할 때 사용

<em>, <i> 이탤릭체로 표시하기

<em> : 문장에서 흐름상 특정 부분을 강조하고 싶을 때 사용

<i> :  단순히 이탤릭체로 표시할 때 사용

<q> 인용 내용 표시하기

<q> 태그는 인용한 내용을 표시하기 위한 것으로 quote의 줄임말입니다. 

<q>태그와 <blockquote> 태그의 차이점은

       <blockquote> 태그는 블록 레벨 태그이기 때문에 인용 내용이 줄이 바뀌어 나타나고 다른 내용과 구별되도록 안으로 들여 써지지만,         <q> 태그는 인라인 레벨 테그이기 때문에 줄바꿈 없이 다른 내용과 함께 한 줄로 표시되고 인용 내용을 구별할 수 있도록 인용 내용에         따옴표를 붙여 표시하는 점이 다릅니다.

<mark> 형광펜 효과 내기

선택한 부분의 배경색이 노란색이 되며 형관펜으로 그어 놓은 듯한 효과를 냅니다.

<span> 줄바꿈 없이 영역 묶기

텍스트 단락 안에서 줄바꿈 없이 일부 텍스트만 묶어 스타일을 적용하려고 할 때 주로 사용합니다.

기타 텍스트 관련 태그들

태그	설명
<abbr>	약자 표시, title 속성을 함께 사용할 수 있음
<cite>	웹 문서나 포스트에서 참고 내용 표시
<code>	컴퓨터 인식을 위한 소스 코드
<kbd>	키보드 입력이나 음성 명령 같은 사용자 입력 내용
<small>	부가 정보처럼 작게 표시해도 되는 텍스트
<sub>	아래 첨자
<sup>	위 첨자
<s>	취소선
<u>	밑줄