small element - by. UXKM

요약 설명

<small> 요소는 텍스트를 작은 크기로 시각적으로 줄여서 표시하는 시맨틱 태그로, 덜 중요한 내용이나 보조 설명, 저작권, 면책 조항 등을 표현할 때 사용됩니다.
단순히 글자 크기만 줄이는 것이 아니라, 의미상 중요도가 낮음을 나타내는 역할도 하며, 본문 흐름 내에서 주 내용과 구분되는 부가 정보를 전달할 때 적절합니다. 스타일링 목적만으로 사용할 경우 CSS를 권장하지만, 의미 구분이 필요한 경우 <small>을 사용하는 것이 바람직합니다.

주요 역할 및 특징

  1. 텍스트 크기 축소
    • <small> 요소는 포함된 텍스트를 현재 글꼴 크기보다 작게 표시합니다.
    • 기본 스타일은 CSS의 font-size: smaller;로 구현됩니다.
  2. 부가 정보 표시
    • 주요 텍스트와 비교해 상대적으로 덜 중요한 정보나 부가적인 내용을 표현합니다.
    • 예: 저작권 정보, 주석, 법적 고지 등.
  3. 의미론적 강조 없음

    <small>은 단순히 시각적으로 작게 표시하며, 텍스트의 중요성을 강조하거나 약화시키는 의미론적 기능은 없습니다.

  4. 다른 요소와의 관계

    <small>은 스타일링 목적으로 사용되며, 강조나 강한 중요성을 나타내는 <em> 또는 <strong>과는 용도가 다릅니다.

  5. CSS 스타일링 가능

    기본 크기 축소 외에도 CSS를 사용해 <small>의 스타일을 완전히 커스터마이징할 수 있습니다.

CSS 기본 값

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

기본 문법

속성

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

예제

상황별 예제

CSS로 스타일 변경

주의사항

  • <small>은 부수적인 정보를 나타내는 데 적합하며, 중요하거나 강조가 필요한 경우에는 <strong> 또는 <em>을 사용해야 합니다.
  • 너무 많은 텍스트에 <small>을 적용하면 가독성이 떨어지고, 텍스트가 너무 작아지면 사용자 경험을 저하시킬 수 있습니다.