HTML - TEXT

안녕하세요. 오늘은 HTML의 TEXT태그 종류에 알아볼게요.

 

<hn> 태그

 

hn태그는 제목을 나타내는 태그로 

 

n자리에 1~6의 숫자 입력으로 제목 크기를 조절이 가능해요.

 

 

 

<p>, <br /> 태그

 

p태그는 텍스트 단락을 만드는 문단 태그예요.

//기본형
<p>첫번째 단락입니다.</p>
<p>두번째 단락입니다.</p>
<br/>

<p>와 </p> 태그 사이에 텍스트 입력해야 해요.

 

편집기에서 줄 변경한다면 웹 브라우저에서는 한 줄로 표시가 돼요.

 

<br> 태그

 

br태그는 텍스트 단락에서 줄 바꿈이 가능해요.

 

그리고 단독으로 사용이 가능해서 닫는 태그를 사용할 필요가 없어요.

 

 

 

<span> 요소

 

span요소는 텍스트의 일부 또는 문서의 일부를 표시하기 위해 사용되는 인라인 컨테이너로

 

필수 속성이 없지만 style, class 및 id를 공통으로 사용할 수 있어요.

 

추가로 CSS와 함께 사용하면 span요소를 사용하여 텍스트의 일부를 스타일링할 수 있어요.

 

 

 

<blockquote> 태그

 

blockquote 태그는 태그 안의 내용을 들여 쓰기 기능을 가지고 있어요.

 

화면 낭독기 사용 시에도 <blockquote> 태그 안에 내용을 다른 텍스트와 구분을 시켜요.

 

※ 화면 낭독기(screen reader)란?

 

시각 장애인이 컴퓨터를 사용할 때 화면에 나타나는 정보를 음성으로 들려주는 프로그램

 

 

 

<strong>, <b> 태그

 

strong은 텍스트를 굵게 강조할 때 사용하고,

 

b는 텍스트를 굵게 표시할 때 사용하는 태그예요.

 

두 가지의 태그의 공통점이 매우 흡사한데 사용목적이 다른데요.

 

경고나 주의 사항처럼 중요한 내용을 강조하고 싶을 때

 

strong 태그를(화면 낭독기 사용 시 강조하여 읽음)

 

단순히 글자만 굵게 표시할 때 b태그를 사용해요.

 

 

 

<em>, <i> 태그

 

em은 텍스트를 기울여 강조할 때 사용할 때 사용하고,

 

i는 텍스트를 기울여 표시할 때 사용하는 태그예요.

 

 

 

그 외 다양한 텍스트 관련 태그들이 있는데요. 

 

간단하게 표로 정리해봤어요.

종류	설명	예시
<abbr>	줄임말 표시 (title속성 사용 가능)	<abbr title=”HyperText Markup Language”>HTML</addr>
<cite>	웹 문서, 포스트의 참고내용	<p>웹 페이지를 다른 페이지로 연결하는 링크 - <cite>’HTML mdn 문서’</cite> 중에</p>
<code>	컴퓨터 인식을 위한 소스 코드	<code>function savetheLocal()</code>
<small>	정보처럼 작게 표시되는 텍스트	<p>가격: 23,000원 <small>(부가세 별도)</small></p>
<sub>	아래 첨자 표시	<p>물의 화학식은 H<sub>2</sub>0입니다.</p>
<sup>	위 첨자 표시	<p>E = mc<sup>2</sup></p>
<s>	취소선 표시	<p><s>34,000원</s>23,800원</p>
<u>	밑줄 표시	<u>텍스트에 단순히 밑줄 긋기</u>
<ins>	공동 작업 문서에 새로운 내용 삽입	<ins>새로운 내용을 삽입합니다.</ins>
<del>	공동 작업 문서에 기존 내용 삭제	<dei>기존 내용을 삭제합니다.</del>

 

 

 

 

여기까지 HTML TEXT 태그 종류에 알아봤는데요.

 

HTML은 java와 다르게 태그 안에 화면을 출력하고자 하는 내용을 담고,

 

태그 내에서 글꼴 등을 수정이 가능한데요.

 

TEXT 태그를 작성하면 화면에 바로바로 확인이 돼서 재밌게 배운 것 같아요.

 

여러분들은 어떠신가요?