i element - by. UXKM

i element 설명

일반적으로 이 요소는 이탤릭체로 표시됩니다.
HTML 4.01에서 <i> 요소는 이탤릭체의 텍스트로만 표현되었지만, HTML5에서는 반드시 이탤릭체로만 표현되지는 않습니다. 스타일시트를 사용하여 <i> 요소에 포함된 텍스트의 서식을 자유롭게 변경할 수 있습니다.
<i> 요소는 평범한 글자와 구분하기 위해 사용됩니다.
예를 들면, 기술적인 용어(전문용어), 외국어 문구, 소설속 인물의 생각, 다른 언어의 관용구, 문어체, 서양 문헌에 나오는 배 이름 등이 있습니다.

CSS 기본값 :
다음과 같은 의미 요소(semantic element) 중에서 사용하기에 적당한 요소를 찾지 못했을 때만 <i> 요소를 사용할 수 있습니다.
  1. 강조된 텍스트로 나타낼 떄 <em> 요소 사용
  2. 중요한(중요성) 텍스트로 나타낼 때 <strong> 요소 사용
  3. 창작물의 제목, 작품(책, 플레이, 음악)의 이름을 표시할 때는 <cite> 요소 사용
  4. 용어(term)의 정의 인스턴스를 표시할 때는 <dfn> 요소 사용
  5. 하이라이트된(highlighted) 텍스트로 나타낼 때 <mark> 요소 사용

i element 예제

<i> vs. <em>

신입 개발자들은 글자를 강조하는데에 왜 이렇게 많은 요소들이 있는지에 대해 혼란스러워합니다.
아마도 <i>와 <em>가 그 중 흔한 경우일 것입니다.. 왜 <em></em>와 <i></i>를 사용하는걸까요? 분명 그들은 같은 결과를 나타내는데 말입니다.

하지만 전혀 그렇지 않습니다. 두 태그 모두 기본적으로 이탤릭체로 렌더링되지만 의미론적 뜻이 다릅니다.
<em>은 내용의 강조를 나타내는데에 비해 <i> 태그는 일반적인 글자와 분리된 글자를 나타낼 때 사용합니다.
(책이나 영화의 이름, 외국 단어, 혹은 단어가 의미론적 뜻 대신에 단어의 정의를 나타낼 때는 <cite>를 사용해야 합니다.

<em>은 이런 식으로 쓰일 수 있습니다: "Just do it already!", 또는: "We had to do something about it".
여기서 이탤릭체로 표현된 단어를 읽는 사용자나 소프트웨어는 이 단어는 강조된 단어라고 판단할 겁니다.

<i> 는 이런 식으로 쓰일 수 있습니다: "The Queen Mary sailed last night".
여기서 "Queen Mary" 단어에 추가된 강조나 중요성은 없습니다. 이건 Mary라는 이름을 가진 여왕이 아니라, Queen Mary라는 이름을 나타내는것 뿐입니다.
<i>에 대한 또 다른 예시로 다음과 같은 문장이 있습니다: "The word the is an article".