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

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

• 아래 태그들은 텍스트에서 사용하는 태그들 중에서 태그를 적용해도 줄바꿈 없이 텍스트를 표시하는 '인라인 레벨'태그 입니다.

1. <strong> 태그, <b> 태그 - 굵게 표시하기

• 텍스트 중에서 굵게 표시하려고 할 때 ><strong> 태그나 <b> 태그를 사용합니다.
• 화면으로 보기에는 차이가 느껴지지 않는 두 태그를 구분하는 이유는 화면 낭독기에서의 기능 때문입니다. 화면 낭독기에서는 강조하고 싶은 부분을 굵게 표시하더라도 내용을 눈으로 보는 것이 아니기 때문에 그 부분이 강조된 것인지, 다른 내용과 구분하기 위해 단지 굵게 표시한 것인지 구별하지 못합니다.
• 따라서 경고나 주의 사항처럼 중요한 내용이어서 강조해야 할 때는 <strong>태그를 사용하고 문서의 키워드처럼 단순히 굵게 표시할 때는 <b> 태그를 사용합니다.

 

기본형 : <strong> 굵게 강조할 텍스트 </strong>
             <b> 굵게 표시할 텍스트 </b>

2. <em> 태그, <i> 태그 - 이탤릭체로 표시하기

• 텍스트를 비스듬히 이탤칙체로 표시할 때는 <em> 태그나 <i> 태그를 사용합니다.
• 문장에서 흐름상 특정 부분을 강조하고 싶을 때는 <em> 태그를 사용하고 마음 속의 생각이나 꿈, 기술적인 용어, 다른 언어의 관용구 등에는 <i> 태그를 사용합니다.
• 중요한 내용을 담고 있는 것이 <em> 태그 이고 단순히 이탤칙체로 표시하는 것이 <i> 태그입니다.

 

기본형 : <em> 이탤릭체로 강조할 텍스트 </em>
             <i> 이탤릭체로 표시할 텍스트 </i>

3. <q> 태그 - 인용 내용 표시하기

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

4. <mark> 태그 - 형광펜 효과 내기

• <mark> 태그는 선택한 부분의 배경색이 노란색이 되며 형광펜으로 그어 놓은 듯한 효과를 냅니다.
• HTML4에서는 텍스트에 형광펜을 그은 듯한 효과를 내려면 CSS를 사용해야 했지만 HTML5에서는 <mark> 태그로 이런 효과를 쉽게 낼 수 있습니다.

 

기본형 : <mark> 텍스트 </mark>

 

5. <span> 태그 - 줄바꿈 없이 영역 묶기

• <span>태그는 태그 자체로는 아무 의미가 없지만 텍스트 단락 안에서 줄바꿈 없이 일부 텍스트만 묶어 스타일을 적용하려고 할 때 주로 사용합니다.

 

기본형 : <span> 내용 </span>

 

span안의 내용을 빨간색으로 바꾼 경우

 

<style>
    .exam2 {width: 900px; height: 100px; border: 2px solid pink; padding: 20px;}
    .exam2 span {color: red}
</style> 

 

6. <ruby> - 동아시아 글자 표시하기

• <ruby> 태그는 주로 동아시아 국가들의 글자들에 주석을 함께 표기하기 위한 용도로 사용됩니다.
• 주석으로 표시할 내용을 <ruby>태그 안에 <rt> 태그로 표시합니다.

기본형 : <ruby> 내용 <rt> 주석 </rt> </ruby>

 

7. 기타 텍스트 관련 태그들

태그	설명	예제
<abbr>	약자 표시. title 속성을 함께 사용할 수 있음.	<p><b><abbr title="HyperText Markup Language">HTML</abbr></b>란 웹페이지를 만들기 위한 언어로 웹브라우저 위에서 동작하는 언어다.</p>
<cite>	웹 문서나 포스트에서 참고 내용 표시	<p>내가 경험한 가장 흥미진진한 일은 누군가를 만나는 일이다 - 영화, <cite>'비포선셋'</cite> 중
<code>	컴퓨터 인식을 위한 소스 코드	<pre><code> .exam {width: 900px; height: 100px; border: 2px solid pink;}</code></pre>
<kbd>	키보드 입력이나 음성 명령 같은 사용자 입력 내용	<p>웹 화면을 다시 불러오려면 <kbd>F5</kbd>키를 누릅니다.</p>
<small>	부가 정보처럼 작게 표시해도 되는 텍스트	<p> 가격:20,000원 <small>(부가세 별도)</small></p>
<sub>	아래 첨자	<p>물의 화학식은 <b>H<sub>2</sub>O</b>다.</p>
<sup>	위 첨자	<p>E = mc<sup>2</sup></p>
<s>	취소선	<p><s>40,000원</s><strong>21,000원</strong></p>
<u>	밑줄	<p> 링크 표시 용도가 아니라 단순히 밑줄을 긋는다면 <u> u 태그</u></p>

 

 

참고 : HTML5 + CSS3 웹 표준의 정석