HTML DOM cite 객체 – 개념부터 생성 예제까지 한 번에 이해하기

HTML DOM의 cite 객체는 HTML <cite> 요소와 연관된 객체입니다. <cite> 요소는 인용된 창작물(creative work)에 대한 참조를 나타낼 때 사용되며, 반드시 해당 작품의 제목을 포함해야 합니다. 참조 대상은 그림, 책, TV 프로그램, 영화 등 다양한 형태의 창작물이 될 수 있습니다.

구문(Syntax)

cite 객체를 생성하는 기본 구문은 다음과 같습니다.

var x = document.createElement("CITE");

예제

HTML DOM cite 객체의 실제 동작을 확인할 수 있는 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<body>
<p>아래 버튼을 클릭하면 CITE 요소가 생성됩니다.</p>
<button onclick="createCite()">CREATE</button><br><br>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg/800px-Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg" width="220" height="277" alt="The Starry night">
<script>
    function createCite() {
        var x = document.createElement("CITE");
        var t = document.createTextNode("The Starry night.");
        x.appendChild(t);
        document.body.appendChild(x);
    }
</script>
</body>
</html>

실행 결과

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

HTML DOM cite 객체 – 개념부터 생성 예제까지 한 번에 이해하기

여기서 “CREATE” 버튼을 클릭하면 −

HTML DOM cite 객체 – 개념부터 생성 예제까지 한 번에 이해하기

코드 설명

위 예제에서는 먼저 <img> 태그를 사용해 이미지를 삽입했습니다.

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg/800px-Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg" width="220" height="277" alt="The Starry night">

그다음, createCite() 메서드를 실행하기 위한 CREATE 버튼을 만들었습니다.

<button onclick="createCite()">CREATE</button>

createCite() 메서드는 <cite> 요소를 생성하여 변수 x에 할당합니다. 이어서 텍스트 내용을 담은 텍스트 노드를 생성해 변수 t에 할당한 뒤, appendChild() 메서드를 사용해 이 텍스트 노드를 변수 x가 가리키는 <cite> 요소에 추가합니다. 마지막으로 document.body에 appendChild() 메서드를 호출하여 <cite> 요소와 텍스트 노드 전체를 문서 본문 끝에 추가합니다.

참고 사항

<cite> 요소는 기본적으로 기울임꼴(italic)로 화면에 표시되며, 검색 엔진과 스크린 리더가 인용 출처를 정확하게 인식하는 데 도움을 줍니다. 따라서 논문, 도서 목록, 미디어 소개 페이지 등에서 의미론적(semantically) 마크업을 위해 적극적으로 활용하는 것이 좋습니다.