html 인라인 요소 글자태그

html 인라인 요소 글자태그

 

1. <strong> , <b> 태그

태그	특징	코드 사용
<strong>	- 글자를 굵게 해주는 태그 - 경고, 주의사항과 같이 중요한 내용을 강조할 때 사용하는 '의미를 가지는 태그'	<p><strong>의미론적으로</strong> 강조할 부분</p>
<b>	- 글자를 굵게 해주는 태그 - 의미없이 시각적인 요소만 나타낼때 사용하는 태그	<p><b>글자 서식의</b> 볼드처리</p>

 

웹 리더기로 읽었을 때 <strong> 태그는 강조되어 읽히지만 <b> 태그는 일반 텍스트처럼 읽힌다는 차이점이 있습니다. 이는 웹접근성을 고려한 것으로 코드 입력 시 단락의 의미에 따라 사용여부를 다르게 하면 됩니다.

 

1-1. 코드 실행 결과

---

2. <em>, <i> 태그

태그	특징	코드 사용
<em>	- 이탤릭체 표현시 사용, 영어 폰트에 유용 - 저자의 생각과 강조하고 싶은 부분에 '의미론적 사용'	<em>Hello, Nice to meet you</em>
<i>	- 이탤릭체 표현시 사용, 영어 폰트에 유용	<i>Thank you for visiting my vlog</i>

 

2-1. 코드 실행 결과

---

3. <del>, <s> 태그

태그	특징	코드 사용
<del>	- 문서에서 삭제된 부분이나 지워야할 부분을 강조 - 글자 중간에 선 표현, 의미를 가지는 태그	<p>     문서에서 <del>지워야할 부분을</del> 강조     </p>
<s>	- 글자 중간에 선 표현, 의미 없는 태그	<p>의미 없이 <s>지우고 싶은 부분</s>을 나타냄</p>

 

3-1. 코드 실행 결과

---

4. <ins>, <u> 태그

태그	특징	코드 사용
<ins>	- 문서에서 텍스트를 강조하거나 밑줄 표현, 의미 있는 태그	<p>     문서에서 <ins>의미있는 텍스트를 강조</ins>할 때 밑줄 표시     </p>
<u>	- 밑줄 표현 시, 아무 의미 없는 태그	<p>의미 없이 <u>텍스트에 밑줄</u>을 표현하고 싶을 때</p>

 

4-1. 코드 실행 결과

---

5. <sup>, <sub> 태그

태그	특징	코드 사용
<sup>	- 글자 위로 붙는 위첨자	<p>글자의 위로 붙는 <sup>위첨자</sup></p>
<sub>	- 글자 아래로 붙는 아래첨자	<p>글자의 아래로 붙는 <sub>아래첨자</sub></p>

 

5-1. 코드 실행 결과

---

6. <q> 태그

태그	특징
<q>	- 짧은 인용구에 쓰임 - 글자의 앞뒤로 쌍따옴표가 나타남

 

6-1 코드 실행 결과

<q>문장의 앞뒤로 쌍따옴표가 나타남</q>

---

7. <mark> 태그

태그	특징
<mark>	- 중요한 부분을 강조할 때 사용 - 형광펜으로 줄을 그은 것처럼 노란 배경이 나타남 - html5 개정되면서 새롭게 나타난 태그

 

7-1. 코드 실행 결과

<p>
mark 태그는 강조를 하고 싶을때 <mark>형광펜 효과</mark>를 낼수있어요
</p>

---

8. <span> 태그

태그	특징
<span>	- css를 사용하여 글자를 꾸밀때 사용 - 태그 자체가 어떤 특정한 디자인을 나타내진 않음 - 의미가 없는 태그

 

8-1. 코드 실행 결과

<p>
span 태그는 <span style="color:red; background-color: aqua;">css를 사용하여</span> 
꾸밀때 사용하는 태그입니다
</p>

---

9. <ruby> 태그

태그	특징
<ruby>	- 동아시아 문자(일본 후리가나, 한자의 독음, 중국어의 병음 및 주음) 의 발음을 표기할 때 - 글자 상단에 주석을 달아줌 - 백과사전이나 나무위키 같은 페이지에 자주 쓰는 태그 - <rt></rt> : 발음이나 설명을 정의 - <rp></rp> : <ruby> 요소를 지원하지 않는 구형 브라우저에만 표시될 문자를 정의

 

9-1. 코드 실행 결과

<ruby>
大韓民國<rt>대한민국</rt>
</ruby>

 

---

https://shunintil.tistory.com/21

html 블록요소 성질의 글자태그