05. DOIT - 웹 문서에 다양한 내용 입력하기(택스트 입력하기)

<hn> 태그

 

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

웹 문서에서 제목은 다른 텍스트보다 크고 진하게 표시합니다. 이렇게 자주 사용하는 제목 스타일을 미리 태그 형태로 만든 것이 바로 제목 태그입니다.

 

<hn> 태그에서 h는제목을 뜻하는 heading을 줄인 말입니다. n의 자리에는 1~6의 숫자가 들어가며 제목 텍스트를 크기별로 ㅍ시할 수 있습니다. <h1>이 가장 큰 제목이고 <h2>, <h3>, .... <h6>의 순서로 크기가 잡아집니다. <hn> 태그는 닫는 태그인 </hn>을 반드시 사용해야 합니다.

 

 

 

□ : <h1> 태그

□ : <h2> 태그

 

<p>,<br>태그

 

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

<p>와</p> 태그 사이에 텍스트를 입력하면 텍스트 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어집니다. 이때 기억해 두어야 할 점은 편집기에서 줄을 바꾸더라도 웹 브라우저에서는 한 줄로 표시된다는 것입니다.

 

 

 

 

따라서, <br>와</br>태그를 사용하여  줄을 바꾸고 싶은 텍스트 사이에  넣어 입력하면 바뀌게 된다. 

 

 

<strong>, <b> 태그

 

·  택스트 굵게표시하는 <strong>, <b> 태그

<strong> 태그와 <b> 태그는 눈으로 볼 때 별로 차이가 느껴지지 않지만 구분하는 이유는 화면 낭독기의 기능 때문입니다.

예를 들어 경고나 주의 사항처럼 중요한 내용을 강조해야 할 떄는 <strong> 태그를 키워드처럼 단순히 글자만 굵게 표시할 때는 <b> 태그를 사용합니다. 

 

 

 

□ : <b> 태그

□ : <strong> 태그

 

<em>, <i> 태그

 

·  기울인 텍스트를 입력해 주는 <em>, <i> 태그

<em> 태그에서 em은 강조를 뜻하는 emphasis의 줄임말이고 <i> 태그에서 i는 이탤릭체, 즉 기울기체를 뜻하는 italic의 줄임말입니다. <em> 태그는 문장에서 흐름상 특정 부분을 강조하고 싶을 떄 사용하고, <i> 태그는 마음속의 생각이나 용어, 관용구 등에 사용합니다. 

 

□ : <em> 태그

□ : <i> 태그

 

 

다양한 텍스트 관련 태그

 

태그(Tag) 종류	설명
<abbr> </abbr>	줄임말을 표시하고 title 속성을 함께 사용할 수 있습니다.
<cite> </cite>	웹 문서나 포스트에서 참고 내용을 표시합니다.
<code> </code>	컴퓨터 인식을 위한 소스 코드입니다.
<small></small>	부가 정보처럼 작게 표시해도 되는 텍스트입니다.
<sub> </sub>	아래 첨자를 표시합니다.
<sup> </sup>	위 첨자를 표시합니다.
<s> </s>	취소선을 표시합니다.
<u> </u>	밑줄을 표시합니다.
<ins> </ins>	공동 작업 문서에서 새로운 내용을 삽입합니다.
<del> </del>	공동 작업 문서에서 기존 내용을 삭제합니다.