HTML : <i>, <em> - 주위를 위한 태그

HTML : <i>, <em> - 주위를 위한 태그

---

<i>, <em> : 둘 다 글씨를 기울이지만 의미가 다른 요소

<i> : 주위와 구분할 때 사용하는 요소

• 텍스트에서 어떤 이유로 주위와 구분해야 하는 부분을 나타낸다.
• 앞뒤와 톤이 달라야 할때 사용한다.
• 기술용어, 외국어 구절, 등장인물의 생각 등에 사용된다.

 

i

Iron Man is a hero

자바스크립트에서 console.log()는 정말 많이 보게 될거예요.

라틴어 문구 Veni, vidi, vici는 음악과 예술, 문학에 자주 등장합니다.

<h2>i</h2>

<pre><i>Iron Man</i> is a hero</pre>

<pre>자바스크립트에서 <i>console.log()</i>는 정말 많이 보게 될거예요.</pre>

<pre>라틴어 문구 <i>Veni, vidi, vici</i>는 음악과 예술, 문학에 자주 등장합니다.</pre>

• Iron Man is a hero 문장을 보았을 때 <i>로 기울임을 줌으로써 Iron /Man이 아닌 하나의 문장으로 보여줄 수 있게 앞 혹은 뒤와 톤이 다르게 나타낼 때 사용한다.
• 자바스크립트에서 console.log()는 정말 많이 보게 될 거예요.처럼 기술이나 외국어 구절 등을 나타낼 때 사용하기도 한다.
• 외국어를 강조하기 위해 <i>요소를 사용한다. (Veni, vidi, vici)를 강조하였다.

 

기술 요약

• 콘텐츠 카테고리 : 플로우 콘텐츠, 구문 콘텐츠
• 가능한 콘텐츠 : 구문 콘텐츠
• 태그 생략 : 불가능, 시작 요소와 종료 요소 모두 필요하다.
• 가능한 상위 요소 : 구문 콘텐츠를 허용하는 모든 요소

---

 

<em>  : 약간의 강조가 필요할 때 사용하는 요소 

• 주위 텍스트에 비해 강조된 부분을 나타낼 때 사용한다. (텍스트의 강세를 나타낸다.)
• 보통 한 문장에서 단어 하나 혹은 몇 개로 제한되며, 문장의 의미에 영향을 미칠 수 있다.
• <em> 요소를 중첩하면 더 큰 강세를 뜻한다.
• 스크린리더를 사용 시 강조해서 나타낸다.

 

 Get Out of bed now!

<pre> Get Out of bed <em>now</em>!</pre>

• 스크리리더를 사용했을 때 now를 강조해서 말할 것이다.

 

기술 요약

• 콘텐츠 카테고리 : 플로우 콘텐츠, 구문 콘텐츠
• 가능한 콘텐츠 : 구문 콘텐츠
• 태그 생략 : 불가능, 시작 요소와 종료 요소 모두 필요하다.
• 가능한 상위 요소 : 구문 콘텐츠를 허용하는 모든 요소

---

정리

<i>와 <em>은 시각적 모습은 동일하나 의미가 다르다.

<em>은 콘텐츠를 강조하지만, <i>는 학명 등 과학적인 이름이나 다른 언어의 단어 등 주변과 다른 톤을 가진 텍스트를 나타낼 때 사용한다. (책이나 영화 등의 제목은 <cite>를 사용한다.)

만약, 주변보다 중요도가 높은 텍스트는 <strong>으로 강조하면 된다.

---

2022.05.02 - [TIL/HTML] - HTML : , - 강조를 위한 태그

HTML : <b>, <strong> - 강조를 위한 태그