em element - by. UXKM

  • Publishing
  • HTML
  • 문자 콘텐츠(Text-level semantics)
  • em element
요약 설명

<em> 요소는 텍스트에 강조(emphasis)를 부여하기 위한 시맨틱 태그로, 의미상 강조가 필요할 때 사용되며 보통 기울임체로 표시됩니다.
시각적 표현보다 문맥적인 강조에 초점이 있으며, 스크린 리더 등 보조 기술에서도 강조된 음성 처리가 적용될 수 있습니다. 중첩하여 사용할 경우 더 강한 강조를 의미하며, 단순한 스타일링이 아닌 의미 전달 목적의 마크업입니다.

주요 역할 및 특징

  1. 의미적 강조
    • <em>은 단순한 스타일링 목적이 아니라 텍스트가 문맥상 중요함을 의미론적으로 나타냅니다.
    • 브라우저와 스크린 리더는 강조된 텍스트로 처리하며, 음성 톤을 바꿔 읽거나 속도를 조절할 수 있습니다.
  2. 중첩된 강조
    • <em> 요소는 중첩될 수 있으며, 중첩 수준에 따라 강조의 강도가 달라질 수 있습니다.
    • 중첩 예시: 첫 번째 <em>은 기본 강조, 두 번째 <em>은 더 강한 강조를 나타냅니다.
  3. 시각적 효과
    • 브라우저에서 기본적으로 이탤릭체(font-style: italic;)로 표시됩니다.
    • CSS를 사용하여 스타일을 커스터마이징할 수 있습니다.
  4. 다른 요소와의 관계
    • <strong> 요소는 텍스트의 "강한 중요성"을 나타내고, <em>은 텍스트의 "미묘한 강조"를 나타냅니다.
    • 강조의 목적과 강도에 따라 적절한 요소를 선택해야 합니다.

CSS 기본 값

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

기본 문법

속성

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

예제

기본 텍스트 강조

중첩된 강조

CSS로 스타일링된 강조

접근성을 고려한 강조

가벼운 강조와 강한 중요성의 비교

주의사항

  • <em>은 텍스트의 의미적 강조를 나타내는 데 적합하며, 단순히 스타일을 변경하려면 CSS와 함께 <span> 또는 <i>를 사용하는 것이 권장됩니다.
  • 강조가 실제로 문맥상 중요한 부분인지 확인하고, 과도하게 사용하지 않도록 해야합니다.
  • <strong>과 <em>의 차이를 이해하고, 텍스트의 중요성과 강조 강도에 따라 적절한 요소를 선택하세요.