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

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

---

두 태그 모두 눈으로 보기에는 차이가 느껴지지 않는다. 

하지만 두 태그를 구분하는 이유는 화면 낭독기에서의 기능 때문이다. 화면 낭독기에서 이게 진짜 강조된 부분인지, 아니면 다른 내용과 구분하기 위해 단지 굵게 표시한 것인지 구별을 할 수 있게 해줘야 한다.

 

<strong> - 굵게 강조할 텍스트

경고나, 주의 사항처럼 중요한 내용이어서 강조해야할 때 사용한다.

 

<b> - 굵게 표시할 텍스트

문서의 키워드처럼 단순히 굵게 표시할 때 사용한다.

 

즉, 중요한지 아닌지에 따라서 구분한다.

 

 

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

---

텍스트가 비스틈히 이탤릭체로 표시된다.

 

<em> - 이탤릭체로 강조할 텍스트

문장에서 흐름상 특정 부분을 강조하고 싶을 때 사용한다.

 

<i> - 이탤릭체로 표시할 텍스트

마음 속의 생각이나 꿈, 기술적인 용어, 다른 언어의 관용구 등에 사용한다.

 

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

---

인용한 내용을 표시하기 위한 것으로 quote의 줄임말이다.

<blockquote> 와 다른 점은 인라인 요소라서 다른 내용과 한 줄에 표시가 가능하다.

그리고 인용 내용을 구별할 수 있도록 인용 내용에 따옴표를 붙여 표시한다.

<div id="cont">
    q태그와 blockquote 태그와 다른점은 q 태그는 인라인요소라서 다른 내용과 한 줄로 표시가 가능하고 <q>이렇게 따옴표도 붙는다</q>라는 특징이 있다.
</div>

 

결과값 :

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

---

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

css에서 background-color 속성을 사용해 태그의 배경색을 바꿀 수 있다.

<span> 태그 - 줄바꾸 없이 영역 묶기

---

태그 자체로는 아무 의미가 없다.

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

 

기타 텍스트 관련 태그들

---

태그	설명	예시
<ruby>	동아시아 글자 표시
<abbr>	약자로 표시할 때, title 속성을 함께 사용할 수 있다.	<p> <abbr title="Internet of Things">IoT</abbr>란 각종 사물에 센서와 통신 기능을 내장해 인터넷에 연결하는 기술을 의미한다. </p>
<cite>	웹 문서나 포스트에서 참고 내용 표시	<p> 내가 경험한 가장 흥미진진한 일은 누군가를 만나는 일이다 - 영화 <cite>'비포선셋'</cite> 중... </p>
<code>	컴퓨터 인식을 위해 소스 코드	<pre><code>    function savetheLocal( ){ ..... } </code></pre>
<kbd>	키보드 입력이나 음성 명령 같은 사용자 입력 내용	<p> 웹 화면을 다시불러오려면 <kbd>F5</kbd>키를 누르세요. </p>
<small>	부가 정보처럼 작게 표시해도 되는 텍스트	<p> 가격 : 13,000원 <small>(부가세 별도)</small> </p>
<sub>	아래 첨자	<p>물의 화학식은 <b>H<sub>2</sub>O</b>다.
<sup>	위 첨자	<p> E=mc<sup>2</sup> </p>
<s>	취소선	<p> <s>34,000원</s> <strong>19,000원</strong> </p>
<u>	밑줄	<p> 링크 표시 용도가 아니라 단순히 밑줄을 긋는다면 <u>u태그</u> </p>