strong element - by. UXKM

요약 설명

<strong> 요소는 텍스트에 강한 강조(strong importance)를 부여하는 시맨틱 태그로, 의미상으로 매우 중요한 정보를 표현할 때 사용됩니다.
기본적으로 브라우저에서는 굵은 글씨로 표시되며, 시각적 강조 외에도 스크린 리더 등 보조 기술에서도 강조된 어조로 읽히도록 처리됩니다.
단순한 굵은 글씨 스타일을 원할 경우에는 CSS나 <b>를,
의미 있는 강조가 필요할 경우에는 <strong>을 사용하는 것이 적절합니다.

주요 역할 및 특징

  1. 강한 의미적 강조
    • <strong>은 단순한 시각적 효과가 아닌, 의미적으로 중요한 텍스트임을 나타냅니다.
    • 예를 들어, 경고, 중요한 정보, 필수 사항 등을 강조할 때 사용합니다.
  2. 스크린 리더와의 연계

    스크린 리더는 <strong> 요소를 일반 텍스트보다 강하게 읽어, 중요성을 사용자에게 전달합니다.

  3. 다른 강조 요소와의 차이점
    • <em>은 텍스트의 "미묘한 강조"를 나타내며, <strong>은 "강한 강조"를 나타냅니다.
    • <b>는 단순히 굵은 글씨로 스타일링하는 데 사용되며, 의미론적 중요성은 없습니다.
  4. 중첩 강조

    <strong> 요소는 중첩될 수 있으며, 중첩된 수준에 따라 강조의 강도가 더 강해질 수 있습니다.

  5. 시각적 스타일링

    기본적으로 굵은 글씨로 렌더링되지만, CSS를 사용해 스타일을 변경할 수 있습니다.

CSS 기본 값

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

기본 문법

속성

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

예제

기본 텍스트 강조

중첩된 강조

접근성을 고려한 강조

CSS로 스타일링된 강조

주의사항

  • <strong>은 단순히 텍스트를 굵게 표시하는 데 사용하지 말고, 텍스트의 의미적 중요성을 나타내기 위해 사용하세요.
  • <strong>은 의미적으로 중요한 텍스트에만 사용해야 하며, 과도하게 사용하면 강조의 효과가 감소할 수 있습니다.

<strong> vs <em>

  • 특징
  • <strong>
  • <em>

  • 의미(Semantics)

    내용이 매우 중요하거나 의미를 강조할 때 사용

    문맥적으로 텍스트에 강세를 줄 때 사용

  • 의도(Intention)

    중요한 정보에 주의를 집중시키는 역할

    텍스트를 부드럽게 강조하거나, 대화의 억양을 표현

  • 기본 스타일

    브라우저에서 기본적으로 굵게(bold) 표시

    브라우저에서 기본적으로 기울임꼴(italic) 표시

  • 접근성(Accessibility)

    스크린 리더가 텍스트를 강한 어조로 읽음

    스크린 리더가 텍스트를 부드러운 강조로 읽음

  • 사용 사례

    경고, 중요한 문구, 필수적인 정보 강조

    대화의 흐름에서 특정 부분을 강조할 때

<strong> vs <b>

  • 특징
  • <strong>
  • <b>

  • 의미(Semantics)

    텍스트의 중요성을 강조

    단순히 시각적으로 굵은 글씨(bold)를 적용

  • 의도(Intention)

    의미론적 중요성을 부여

    특별한 의미 없이 스타일링이 필요한 경우 사용

  • 기본 스타일

    브라우저에서 기본적으로 굵게(bold) 표시

    브라우저에서 기본적으로 굵게(bold) 표시

  • 접근성(Accessibility)

    스크린 리더가 강한 어조로 읽어 중요성을 전달

    스크린 리더는 특별한 강조 없이 읽음

  • 사용 사례

    경고, 중요한 문구, 의미를 강조해야 할 때

    헤드라인, 키워드, 시각적 스타일이 필요한 경우 사용