cite 요소와 figcaption 요소 사용이 헷갈립니다. 어떻게 사용해야 올바른 가요?

조회수 1000회

프론트엔드_신용우 님 질문

궁금한게 있는데요. figcaption 태그와 cite태그가 조금 헷갈려서요. figcaption은 이미지의 설명과 출처에 만 적용이 되는거고 cite는 좀 더 광범위한 건지 하다보니 궁금해져서 질문드립니다.

  • (•́ ✖ •̀)
    알 수 없는 사용자

1 답변

  • figcaption 요소

    HTML5 기술 표준 문서를 살펴보면 figcaption 요소에 대해 다음과 같이 기술하고 있습니다.

    The figcaption element represents a caption or legend for the rest of the contents of the figcaption element’s parent figure element, if any.

    이를 해석해보면 "figcaption 요소는 figcaption 요소의 부모인 figure 요소의 내용에 대한 캡션 또는 범례"라고 설명합니다.

    주의! 
    figcaption 요소는 반드시 부모 요소 figure 내부에서만 사용해야 합니다.
    

    cite 요소

    cite 요소에 대한 설명을 확인해보면 다음과 같이 기술합니다.

    The cite element represents a reference to a creative work. It must include the title of the work or the name of the author (person, people or organization) or an URL reference, or a reference in abbreviated form as per the conventions used for the addition of citation metadata.

    이를 해석해보면 "cite 요소는 창작물에 대한 참조"를 나타냅니다. 저작물의 제목, 저자(사람, 사람 또는 단체)의 이름 또는 URL 참조 또는 인용 메타 데이터 추가에 사용 된 규칙에 따라 약식으로 된 참조를 포함해야 합니다.

    창조적인 작품이란?

    책, 종이, 에세이, 시, 악보, 노래, 대본, 영화, TV 쇼, 게임, 조각, 그림, 연극 제작, 연극, 오페라, 컴퓨터 프로그램, 웹 사이트, 웹 페이지, 블로그 포스트 또는 코멘트, 포럼 게시물 또는 코멘트, 트윗(Tweet), 서면 또는 구두 진술 등을 말합니다.

    예시를 살펴봅시다.

    1. 출처: 저자의 말

    <p>
      <cite>Charles Bukowski</cite>는 다음과 같이 말했습니다. -
      <q>지식인은 단순한 것을 어렵게 말합니다. 예술가는 간단한 방법으로 어려운 것을 말합니다.</q>
    </p>
    

    2. 출처: 트윗 작성자 이름 참조

    <blockquote class="twitter-tweet">
    <p>♥ Bukowski in <a href="https://twitter.com/search?q=%23HTML5&src=hash">#HTML5</a> spec examples
    <a href="https://t.co/0FIEiYN1pC">https://t.co/0FIEiYN1pC</a></p><cite>— karl dubost (@karlpro)
    <a href="https://twitter.com/karlpro/statuses/370905307293442048">August 23, 2013</a></cite>
    </blockquote>
    

    3. 출처: 참고 문헌에서 저작자의 제목 참조

    <p><cite>세계 인권 선언</cite>, UN(United Nations),
    1948년 12월. 총회 결의안 217 A (III)에 의해 채택.</p>
    

    4. 출처: TV 쇼/드라마 인용

    <p>누가 가장 좋은 의사인가요? (<cite>닥터 후</cite> 드라마)</p>
    

    5. 출처: 블로그 게시물이나 포럼에서 댓글 작성자를 참조

    <article id="comment-1">
      Comment by <cite><a href="https://oli.jp">Oli Studholme</a></cite>
      <time datetime="2013-08-19T16:01">August 19th, 2013 at 4:01 pm</time>
      <p>Unfortunately I don’t think adding names back into the definition of <code>cite</code>
      solves the problem: of the 12 blockquote examples in
      <a href="https://oli.jp/example/blockquote-metadata/">Examples of block quote metadata</a>,
      there’s not even one that’s <em>just</em> a person’s name.</p>
      <p>A subset of the problem, maybe…</p>
    </article>
    

    6. 출처: 검색 결과 URL 참조

    <div id="resultStats">About 416,000,000 results 0.33 seconds) </div>
    ...
    <p><a href="https://www.w3.org/html/wg/">W3C <i>HTML Working Group</i></a></p>
    <p><cite>www.w3.org/<b>html</b>/wg/</cite></p>
    <p>15 Apr 2013 - The <i>HTML Working Group</i> is currently chartered to continue its
    work through 31 December 2014. A Plan 2014 document published by the...</p>
    ...
    

    7. 출처: Ibid와 같은 축약된 참조를 식별하는데 사용.

    Ibid는 라틴어 "ibidem"(같은 자리에서)의 축약어로서 미주나 각주에서 동일한 문헌을 연속해서 재 인용할 때 사용하는 용어이다. 한국어 표현으로 위의 책, 상게서, 같은 책으로 쓰이기도 한다. 출처: 위키백과

    <article>
       <h2>도서 정보</h2>
       ...
       ...
      <blockquote>
         "돈은 빈곤의 진정한 원인이다"
         <footer>
           <cite id="baseref">비정형화된 자선가들, 89 페이지.</cite>
         </ footer>
       </ blockquote>
       ...
       ...
       <blockquote>
        "돈은 빈곤의 원인입니다. 노동을하기에는 너무 게을렀기 때문에 노동자들에게 
         노동의 결실을 앗아간 것 "이라고 말했다.
         <a href="#baseref"><cite>Ibid.</cite></a>
       </ blockquote>
       ...
    </ article>
    
    

    NOTE cite 요소는 인용 요소(q)가 아닙니다. 인용의 의미를 가질 경우는 <q> 요소를 사용해야 합니다.

    아래와 같은 마크업은 잘못되었습니다.

    힐러리가 "잘못 되었다"고 말한 대목은 인용 이기 때문입니다. cite 요소가 아닌, q 요소가 사용 되어야 합니다.

    <p>
      <cite>This is wrong!, said Hillary.</cite> is a quote from 
      the popular daytime TV drama When Ian became Hillary.
    </p>
    

    다음과 같이 작성해야 올바른 마크업 입니다.

    인기 TV 드라마 "When Ian became Hillary"(출처)에서 힐러리가 "잘못 되었다"라고 말한 것이기 때문입니다.

    <p>
      <q>This is correct, said Hillary.</q> is a quote from 
      the popular daytime TV drama <cite>When Ian became Hillary</cite>.
    </p>
    

    결론

    피규어(이미지, 표, 차트 등)를 구조화한 figure 요소 내부에 설명을 추가할 경우 figcaption 요소를 사용합니다. 반면 출처, 참조 정보 의미를 부여하고자 할 경우 cite 요소를 사용합니다. :-D

    FIN.

    • (•́ ✖ •̀)
      알 수 없는 사용자

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)