i element - by. UXKM

요약 설명

<i> 요소는 텍스트를 기울임(italic)으로 표시하는 시맨틱 태그지만, <em>처럼 의미상 강조보다는 스타일이나 톤의 변화, 외래어, 기술 용어, 아이콘 등 의미적 구분이 필요한 경우에 사용됩니다.
시각적 효과는 비슷하지만, 의미적으로는 강조보다는 문체적 차별화 또는 관례적인 표현을 위한 마크업입니다. 의미 강조가 목적이라면 <em>을 사용하는 것이 더 적절합니다.

주요 역할 및 특징

  1. 기울임꼴 텍스트 표시
    • <i> 요소는 브라우저에서 기본적으로 이탤릭체(font-style: italic;)로 렌더링됩니다.
    • 단순히 텍스트를 스타일링하는 목적으로 사용됩니다.
  2. 특정 텍스트 구분
    • 외국어 단어, 기술 용어, 아이콘, 가상의 목소리, 작품 제목 등의 구분에 사용됩니다.
    • 예: Lorem ipsum, CSS, HTML 등.
  3. 의미론적 강조 아님
    • <i>는 텍스트의 중요성을 강조하는 의미는 없습니다.
    • 의미론적으로 강조하려면 <em> 또는 <strong> 요소를 사용해야 합니다.
  4. 아이콘 폰트와 함께 사용
    • <i>는 아이콘 폰트(FontAwesome, Material Icons 등)와 함께 자주 사용됩니다.
    • 아이콘 폰트를 렌더링하기 위해 특정 클래스를 설정합니다.
  5. CSS 스타일 변경 가능

    기본 이탤릭체 스타일을 CSS를 사용해 변경할 수 있습니다.

CSS 기본 값

<i> 요소는 기본적으로 인라인 레벨 요소이며, 별도의 CSS를 지정하지 않아도 아래와 같은 기본값이 적용됩니다.

기본 문법

속성

<i> 요소는 고유 속성을 가지지 않으며, 글로벌 속성(class, id, style, aria-*, data-* 등)만 사용할 수 있습니다.

예제

단순 기울임꼴 적용

<i> 요소의 다양한 활용

접근성을 고려한 가상의 목소리

아이콘 폰트 사용

CSS로 스타일 변경

주의사항

  • <i>는 의미론적 강조를 나타내지 않으므로, 강조가 필요한 경우 <em> 또는 <strong>을 사용해야 합니다.
  • 단순히 기울임꼴 스타일을 적용하려는 경우, <i> 대신 CSS에서 font-style: italic;을 사용하는 것이 권장됩니다.

<i> 요소를 사용하면 안되는 경우

  • 강조된 텍스트로 나타낼 떄 <em> 요소 사용
  • 중요한(중요성) 텍스트로 나타낼 때 <strong> 요소 사용
  • 창작물의 제목, 작품(책, 플레이, 음악)의 이름을 표시할 때는 <cite> 요소 사용
  • 용어(term)의 정의 인스턴스를 표시할 때는 <dfn> 요소 사용
  • 하이라이트된(highlighted) 텍스트로 나타낼 때 <mark> 요소 사용

<i> vs <em>

  • 특징
  • <i>
  • <em>

  • 의미(Semantics)

    단순히 시각적인 스타일(기울임꼴)을 적용합니다.

    내용에 강세를 두거나 강조의 의미를 전달합니다.

  • 용도(Usage)

    외국어 단어, 기술 용어, 글 제목 등 스타일에 의한 구분을 위해 사용됩니다.

    텍스트의 논리적 강조나 문맥상 중요한 부분을 표시할 때 사용합니다.

  • 기본 스타일

    브라우저에서 기본적으로 italic 스타일이 적용됩니다.

    브라우저에서 기본적으로 italic 스타일이 적용되지만, 의미론적 강조로도 해석됩니다.

  • 의미론적 역할

    단순한 스타일링 요소로 의미론적 역할이 약합니다.

    강조의 의미를 갖는 시맨틱 요소입니다.

  • 접근성(Accessibility)

    보조 기술에서 특별히 강조되지 않습니다.

    스크린 리더가 강조된 부분으로 읽을 가능성이 있습니다.