프론트엔드/HTML

Tag - 텍스트 관련 2

ksge7 2020. 8. 18. 18:30

인라인 레벨 텍스트 태그

 

<Strong>과 <b> 태그 - 굵게 표시하기

<Strong> 굵게 의미까지 강조되는 텍스트 </Strong>
<b> 굵게 표시하는 텍스트 </b>

 

<Strong>과 <b> 태그 모두 텍스트를 굵게 강조해준다.

 

둘의 차이는 <Strong>은 의미상으로도 의미가 있는 경우 사용해준다.

 

<b>는 그저 텍스트 자체를 굵게하고 싶을 때 쓴다.

 

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

<em> 흐름상 특정 부분 강조시 em </em>
<i> 관용구, 기술적 용어 등을 사용시 i </i>

 

<i>, <em> 모두 비스듬히 이탤릭체로 표시할 때 사용한다.

 

<em> 태그는 문장의 흐름상 특정 부분을 강조하고 싶을 때 사용한다.

 

<i>는 꿈, 생각, 기술적 용어, 관용어 등 표시할 때 사용한다.

 

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

<q>  인라인 레벨의 인용문 </q>

 

<q> 태그는 <blockquote>와 같이 인용문을 쓰는 태그다.

 

하지만 <blockquote>는 블록레벨 단위의 인용문을 쓸 때 사용한다.

 

<q>는 인라인 레벨 단위의 인용문을 쓸 때 사용한다.

 

<mark> 태그 - 형광펜 효과

<mark> 마크입니다. </mark>

 

선택한 부분의 배경색이 노란색이 되며 형광펜으로 그은 듯한 효과가 난다.

 

다만 배경색은 스타일 시트를 통해 바꿔줄 수 있다.

 

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

<span> 줄 바꿈 없이 문장을 묶어줌 </span>

<p> 태그와 달리 줄바꿈 없이 텍스트를 묶어서 스타일 적용할 때 사용.

 

<sup>와 <sub> 태그 - 위 첨자, 아래 첨자 달기

<p> 물은 H<sub>2<sub>O다.</p> / h₂O 출력

<p> E = mc<sup>2<sup></p> / E = mc² 출력

 

<sup>은 위첨자, <sub>는 아래 첨자를 표현하는데 사용된다.