<i> 태그의 정의 및 사용법
<i> 태그는
주위 텍스트에 비해서 다른 목적으로 구분되어야 하는 텍스트를 나타냅니다.
주로 일반적인 문체에서 벗어나 구분되는 다른 품질의 텍스트를 나타내는 경우에 사용됩니다.
예제
<i> 태그는 대체 음성이나 분위기, 또는 문맥상 특별한 의미를 전달하는 텍스트에 적용하는 것이 좋습니다.
예를 들어, 학술이나 기술 용어, 외국어 표현, 특정 생각이나 감정, 관용적 문구 등을 표현할 때 유용합니다.
학술이나 기술 용어
대부분의 브라우저에서는 <i> 태그의 글꼴 스타일(font-style)을 이탤릭체(italic)로 표현합니다.
이 예제는 <i> 태그를 사용함으로써 이 용어가 일반적인 텍스트와 구분되어 특별한 의미를 가진다는 것을 나타냅니다.
이렇게 하면 독자가 해당 용어를 인식하고, 그 중요성을 이해하는 데 도움이 됩니다.
외국어 표현
코드 부연설명
lang="fr"은 "bonjour"라는 단어가 프랑스어임을 명시합니다.
lang 속성은 요소 콘텐츠와 텍스트가 포함된 모든 요소 속성에 대한 기본 언어(language)를 지정합니다.
이 예제는 <i> 태그로 외국어 단어를 일반 텍스트와 구분하여 강조하는 데 사용되었습니다.
이렇게 구분함으로써 독자는 해당 표현이 다른 언어에서 온 것임을 쉽게 인식할 수 있습니다.
특정 생각이나 감정
이 예제에서 "나는 잘할 수 있어!"는 개인의 긍정적인 생각이나 다짐을 표현한 문장입니다.
<i> 태그는 이 생각을 강조하여 독자가 주목할 수 있도록 해줍니다. 이와 같은 사용은 감정이나 생각을 전달하는 데 효과적입니다.
관용적 문구
이 예제에서 "식은 죽 먹기"는 한국어에서 자주 사용되는 관용구로, 매우 쉽거나 간단한 일을 의미합니다.
<i> 태그를 사용함으로써 이 관용구가 일반적인 텍스트와 구분되어 주목받게 되며, 독자가 이 표현의 뉘앙스를 더 잘 이해할 수 있도록 돕습니다.
<i> 태그의 의미 변화
<i>는 원래 초기 HTML 명세에서는 시각적으로 이탤릭체(italic)를 만들기 위해 사용되었습니다.
그러나 HTML5에서는 이 태그의 의미가 확장되어, 단순한 스타일링을 넘어 '다른 목적으로 구분되어야 하는 텍스트'를 나타내는 데 사용되도록 권장되고 있습니다.
그리고, 대부분의 브라우저에서 여전히 이탤릭체로 표현하지만, 명세서에 따르면 꼭 그렇게 표시할 필요는 없다고 합니다.
주의할 점
<i> 태그를 사용할 때에는 이 태그의 의미론적 사용을 고려해야 합니다.
단순히 이탤릭체를 사용하려면
<i> 태그가 대부분의 브라우저에서 이탤릭체(italic)로 표현하지만, 이탤릭체(italic)를 적용하기 위한 용도로 사용해서는 안됩니다. CSS의 font-style 속성을 사용하세요.
강조하려는 텍스트가 다른 태그에 더 적합하지 않은지 고려
강조하려는 텍스트가 <i>보다 다른 HTML 태그에 더 적합한 경우를 고려해야 합니다.
다음은 텍스트 강조에 대한 HTML의 태그들입니다.
<em>
|
주위 텍스트에 비해 문맥적으로 중요한 내용을 강조(stress emphasis)하는 데 사용되는 태그입니다. |
|---|---|
<strong>
|
해당 내용의 중요성, 심각성 또는 긴급성을 강하게 강조(strong importance)하는 데 사용하는 태그입니다. |
<mark>
|
한 문서 내에서 관련성이 있는 특정 부분을 참조 목적으로 표시하거나 강조하는 텍스트 구간을 나타냅니다. |
<cite>
|
창작물의 제목(예를 들어, 책, 뮤지컬, 전시회, 판례보고서, 컴퓨터프로그램 등)을 의미하며, 인용 또는 인용 중인 저작물일 수도 있습니다. |
<dfn>
|
현재 맥락이나 문장에서 정의(defining)하고 있는 용어를 나타내는 태그입니다. |
<i>와 <em> 태그의 차이점
많은 개발자들이 HTML을 다룰 때 흔히 혼란스러워하는 부분 중 하나는 서로 다른 태그이지만 브라우저에서 동일한 결과물을 표시하는 경우입니다.
<i>과 <em> 태그가 대표적인 예입니다.
둘 다 브라우저에서는 글꼴 스타일(font-style)을 기본값으로 이탤릭체(italic)로 지정합니다.
시각적 효과는 동일하지만 이 두 태그의 의미는 다릅니다. 두 태그를 비교하면 다음과 같은 차이점을 확인할 수 있습니다.
| 비교 | <i> |
<em> |
|---|---|---|
| 강조의 의미 | 주위 텍스트에 비해 어떤 이유로 구분해야 한다는 점을 강조 | 주위 텍스트에 비해 문맥적인 강조 |
| 사용 목적 | 텍스트의 용도을 강조 | 텍스트의 의미를 강조 |
브라우저 호환성
| 태그 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
|---|---|---|---|---|
<i>
|
1 | 12 | 1 | 1 |
명세서
| 명세서 사양 | |
|---|---|
<i>
|
HTML Standard #the-i-element |