HTML DOM blockquote cite 속성 완벽 정리: 인용문 출처 URL 설정 방법

HTML DOM의 blockquote cite 속성은 HTML <blockquote> 요소와 연관된 속성입니다. 이 속성은 인용문의 cite 특성(attribute) 값을 설정하거나 반환하는 데 사용됩니다.

cite 속성은 웹 페이지에 어떠한 시각적 효과도 주지 않기 때문에 일반 사용자에게는 큰 의미가 없지만, 스크린 리더(화면 낭독 프로그램)를 사용하는 사용자에게는 매우 유용한 정보를 제공합니다. 즉, cite 속성은 인용문의 출처 URL을 지정하여 해당 인용이 어디에서 왔는지 명확히 밝히는 역할을 합니다.

문법(Syntax)

blockquote cite 속성의 기본 문법은 다음과 같습니다.

cite 속성 설정하기

blockquoteObject.cite = URL

여기서 URL은 인용문의 출처가 되는 위치(주소)를 지정합니다.

예제(Example)

아래 예제를 통해 blockquote cite 속성의 실제 동작을 살펴보겠습니다.

<!DOCTYPE html>
<html>
<body>
<h2>Quote</h2>
<p>Here is a quote:</p>
<blockquote id="myBlockquote" cite="www.webexample.com">
Here is some sample text in place of quote.
</blockquote>
<p>Click the button below to change the above quote cite value.</p>
<button onclick="citeChange()">CHANGE</button>
<p id="Sample"></p>
<script>
    function citeChange() {
        document.getElementById("myBlockquote").cite = "https://www.examplesite.com";
        document.getElementById("Sample").innerHTML = "The value of the cite attribute was changed to 'www.examplesite.com'";
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM blockquote cite 속성 완벽 정리: 인용문 출처 URL 설정 방법

CHANGE 버튼을 클릭하면 −

HTML DOM blockquote cite 속성 완벽 정리: 인용문 출처 URL 설정 방법

코드 상세 설명

위 예제의 동작 과정을 단계별로 살펴보겠습니다.

1. blockquote 요소 정의

먼저 id가 “myBlockquote”인 <blockquote> 요소를 생성하고, cite 속성 값을 webexample.com으로 설정했습니다.

<blockquote id="myBlockquote" cite="www.webexample.com">
Here is some sample text in place of quote.
</blockquote>

2. CHANGE 버튼 배치

클릭 시 citeChange() 함수를 호출하는 버튼을 배치합니다.

<button onclick="citeChange()">CHANGE</button>

3. citeChange() 함수 동작

citeChange() 함수는 “myBlockquote”라는 id를 가진 요소를 찾아 해당 요소의 cite 특성 값을 “www.examplesite.com”으로 변경합니다. cite 값이 성공적으로 변경되면, id가 “Sample”인 단락(<p>)에 “cite 특성 값이 'www.examplesite.com'으로 변경되었습니다”라는 메시지가 표시됩니다.

function citeChange() {
    document.getElementById("myBlockquote").cite = "https://www.examplesite.com";
    document.getElementById("Sample").innerHTML = "The value of the cite attribute was changed to 'www.examplesite.com'";
}

정리

HTML DOM의 blockquote cite 속성은 자바스크립트를 통해 인용문의 출처 URL을 동적으로 읽거나 수정할 수 있게 해주는 기능입니다. 화면에는 보이지 않지만 스크린 리더 사용자에게 인용 출처 정보를 전달할 수 있다는 점에서 웹 접근성(Web Accessibility) 측면에서 의미 있는 속성이라 할 수 있습니다.