q element - by. UXKM

요약 설명

<q> 요소는 짧은 인라인 인용문(quotation)을 나타내는 시맨틱 태그로, 문장 중 일부를 인용할 때 사용됩니다.
브라우저는 기본적으로 인용된 텍스트 주위에 따옴표(“ ”)를 자동으로 렌더링하며, 문서 내에서 다른 사람의 말을 짧게 인용할 때 적합합니다.
긴 인용문에는 <blockquote>를 사용하며, <q> 요소는 일반적으로 다른 텍스트 흐름 안에서 간결한 인용을 표현하는 데 활용됩니다.

주요 역할 및 특징

  1. 짧은 인용문 표현
    • <q>는 짧은 인용문을 나타낼 때 사용됩니다.
    • 긴 인용문은 <blockquote>를 사용하여 표현합니다.
  2. 브라우저에서 자동 인용부호 추가
    • <q> 요소는 브라우저에서 자동으로 인용부호를 추가해 렌더링됩니다.
    • 인용부호 스타일은 브라우저의 언어 설정(lang 속성)에 따라 변경됩니다.
      예: 영어(" "), 프랑스어(« »).
  3. 의미론적 역할
    • <q>는 단순한 텍스트 강조가 아닌, 의미적으로 인용문임을 나타냅니다.
    • 검색 엔진과 스크린 리더가 콘텐츠의 구조를 더 잘 이해할 수 있도록 돕습니다.
  4. 다른 요소와의 관계

    <q>는 텍스트 인용에 적합하며, 긴 인용문이나 문단 수준의 인용은 <blockquote>와 함께 사용해야 합니다.

CSS 기본 값

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

기본 문법

속성

[cite] 선택 사항 <q cite="출처 URL">

인용문의 출처를 URL로 지정합니다. 브라우저에 표시되지는 않지만, 메타데이터로 사용됩니다.

예제

기본 및 출처가 포함된 인용문

스타일링 및 따옴표 변경

따옴표 제거

다국어 인용문

접근성을 고려한 인용문

주의사항

  • <q>는 한두 줄 정도의 짧은 인용문에 적합하며, 긴 인용문은 <blockquote>를 사용해야 합니다.
  • <q>는 인용을 나타내는 시맨틱한 의미를 가지므로, 단순한 텍스트 강조 용도로 사용하지 않는 것이 좋습니다.