cite element - by. UXKM

요약 설명

<cite> 요소는 창작물의 제목이나 출처를 나타내는 시맨틱 태그로, 책, 영화, 논문, 음악, 웹사이트 등 작품명 또는 인용의 출처를 명시할 때 사용됩니다.
보통 기울임체로 렌더링되며, 인용문(<blockquote>, <q>)과 함께 사용하여 인용의 출처를 명확히 전달하는 데 활용됩니다. 사람의 이름이 아닌, 반드시 창작물이나 참조 가능한 자료의 제목에 사용해야 의미가 올바르게 전달됩니다.

주요 역할 및 특징

  1. 창작물의 출처나 제목 표시
    • <cite>는 특정 콘텐츠의 출처를 명시하거나 작품의 제목을 강조하는 데 사용됩니다.
    • 예: 책 제목, 영화 제목, 기사 제목 등.
  2. 의미론적 강조

    <cite>는 단순한 스타일링이 아닌, 콘텐츠의 출처나 작품 제목을 의미적으로 구분합니다.

  3. 텍스트 스타일링

    브라우저에서 기본적으로 이탤릭체로 표시됩니다(font-style: italic;).

  4. 스펙 준수
    • HTML5에서는 <cite>의 내용이 출처나 제목임을 보장해야 합니다.
    • 인용된 텍스트 자체는 <cite> 대신 <blockquote>나 <q>를 사용하는 것이 적절합니다.
  5. 다른 요소와의 관계

    <cite>는 주로 <blockquote>와 함께 사용되어 인용문의 출처를 명시합니다.

CSS 기본 값

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

기본 문법

속성

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

예제

책 제목 참조

영화 제목 표시

인용문의 출처

다양한 창작물의 출처 표시

접근성을 고려한 출처 표시

주의사항

  • <cite>는 반드시 책, 영화, 기사 등의 출처나 제목을 나타내야 하며, 단순히 이탤릭체로 표시하기 위해 사용해서는 안 됩니다.
  • <cite>는 작품 제목이나 출처를 나타내므로, 불명확한 내용으로 사용하지 않도록 주의해야 합니다.
  • <cite>는 창작물의 제목이나 출처를 표시하는 데 사용되며, 인용된 텍스트를 포함하는 <blockquote>와는 목적이 다릅니다.
    <blockquote> 안에 <cite>를 포함하여 인용문의 출처를 명시할 수 있습니다.