정의 및 사용 방법
cite
속성은
인용문이나 변경 내용의 출처를 가리키는 URL 값을 가집니다.
이 속성은
<q>
,
<blockquote>
,
<ins>
,
<del>
등과 같은 태그에서 사용되며,
인용문이나 변경 내용의 출처 정보를 제공함으로써 정보의 신뢰성을 높이고, 웹 페이지의 저작자, 검색 엔진 등이 이 정보를 활용할 수 있습니다.
기본 예제
<p>
팀 버너스리가 말했습니다.
<q cite="https://example.com/example">
인터넷이 곧 인권입니다
</q>
</p>
팀 버너스리가 말했습니다.
인터넷이 곧 인권입니다
cite
속성의 적용 요소와 용도
<q>
|
인용된 정보에 대한 원본 문서 또는 메시지를 지정하는 URL입니다. |
---|---|
<blockquote>
|
인용된 정보에 대한 원본 문서 또는 메시지를 지정하는 URL입니다. |
<ins>
|
추가된 내용에 대한 설명을 제공하는 리소스의 URL입니다. |
<del>
|
삭제된 내용에 대한 설명을 제공하는 리소스의 URL입니다. |
cite
속성은 반드시 있어야 하는 필수 속성이 아닙니다. 사용자가 웹 페이지를 볼 때는 cite
속성의 값이 표시되지 않습니다. 하지만, cite
속성을 사용하면 인용문이나 변경 내용의 출처를 명시적으로 제공함으로써 정보의 신뢰성을 높일 수 있고 웹 페이지의 저작자, 웹 개발자, 검색 엔진 등이 이 정보를 활용할 수 있습니다.
예제
cite
속성이 <q>
,
<blockquote>
,
<ins>
,
<del>
태그에서 어떻게 사용되는지 예제로 확인해 보세요!
<q>
에서 cite
속성 사용 예제
<p>
다음은 유명한 명언입니다.
<q cite="https://www.brainyquote.com/quotes/albert_einstein_100134">
상상력은 무한한 것이다. 지식은 제한된 것이다.
</q>
</p>
다음은 유명한 명언입니다.
상상력은 무한한 것이다. 지식은 제한된 것이다.
위 예제에서는 cite
속성이 <q>
태그에 인용된 정보에 대한 원본 문서 페이지의 URL을 제공합니다
<blockquote>
에서 cite
속성 사용 예제
<p>다음은 위키백과에서 인용한 내용입니다.</p>
<blockquote cite="https://ko.wikipedia.org/wiki/Romeo_and_Juliet">
<p>
셰익스피어의 로미오와 줄리엣은 아서 브룩의 서사시 로미오와 줄리엣의 비극을 바탕으로 한 것이다.
아서 브룩의 서사시는 1562년 출간되었다.
셰익스피어는 아서 브룩의 서사시에서 줄거리를 가져왔다.
그러나 여러 등장 인물과 세부적인 이야기들은 셰익스피어의 독창적인 창작이다.
</p>
</blockquote>
다음은 위키백과에서 인용한 내용입니다.
셰익스피어의 로미오와 줄리엣은 아서 브룩의 서사시 로미오와 줄리엣의 비극을 바탕으로 한 것이다.
아서 브룩의 서사시는 1562년 출간되었다.
셰익스피어는 아서 브룩의 서사시에서 줄거리를 가져왔다.
그러나 여러 등장 인물과 세부적인 이야기들은 셰익스피어의 독창적인 창작이다.
위 예제에서는 cite
속성이 <blockquote>
태그에 인용된 정보 인용된 정보에 대한 원본 문서 페이지의 URL을 제공합니다
<ins>
에서 cite
속성 사용 예제
<p>
최신 업데이트에 대한 설명입니다.
<ins cite="https://example.com/changelog">
최신 업데이트 내역.....
</ins>
</p>
최신 업데이트에 대한 설명입니다. 최신 업데이트 내역.....
위 예제에서는 cite
속성이 <ins>
태그에 원본 리소스인 "최신 업데이트 내역" 페이지의 URL을 제공합니다
<del>
에서 cite
속성 사용 예제
<p>
다음의 기능은 삭제되었습니다.
<del cite="https://example.com/changelog">
삭제된 기능에 대한 내역.....
</del>
</p>
다음의 기능은 삭제되었습니다.
삭제된 기능에 대한 내역.....
위 예제에서는 cite
속성이 <del>
태그에 원본 리소스인 "삭제된 기능에 대한 내역" 페이지의 URL을 제공합니다.
브라우저 호환성
cite
속성은 각 요소에 대해 다음과 같은 브라우저 호환성이 있습니다.
속성 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
<q> cite
|
1 | 12 | 1 | 3 |
<blockquote> cite
|
1 | 12 | 1 | 4 |
<ins> cite
|
1 | 12 | 1 | 3 |
<del> cite
|
1 | 12 | 1 | 4 |
명세서
명세서 사양 | |
---|---|
<q> cite
|
HTML Standard #attr-q-cite |
<blockquote> cite
|
HTML Standard #attr-blockquote-cite |
<ins>,<del> cite
|
HTML Standard #attributes-common-to-ins-and-del-elements |