HTML DOM의 del cite 속성은 HTML <del> 요소와 연관된 속성으로, 웹페이지에서 특정 텍스트가 삭제된 이유를 사용자에게 알려주는 역할을 합니다. 이 속성은 삭제 사유를 설명하는 문서의 URL을 지정하는 방식으로 동작합니다.
del cite 속성은 화면상에는 별도의 시각적 표시가 나타나지 않지만, 스크린 리더 등 보조 기술에서 활용될 수 있어 웹사이트의 접근성(accessibility)을 향상시키는 데 도움이 됩니다. 즉, del cite 속성은 HTML <del> 요소의 cite 속성값을 설정하거나 반환하는 기능을 수행합니다.
문법(Syntax)
다음은 del cite 속성의 기본 문법입니다.
cite 속성 설정하기:
delObject.cite = URL
여기서 URL은 해당 텍스트가 삭제된 이유를 설명하는 문서의 주소를 의미합니다. URL은 상대 경로(relative)와 절대 경로(absolute) 어느 쪽이든 사용할 수 있습니다.
예제(Example)
HTML DOM del cite 속성의 실제 동작을 확인해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>Del cite</title>
<style>
#Sample{color:blue};
</style>
</head>
<body>
<h2>del cite 속성 예제</h2>
<p><del id="Del1" cite="sampleDeleted.html">일부 텍스트가 삭제되었습니다</del></p>
<p>아래 버튼을 클릭하면 위 삭제된 텍스트의 cite 속성값이 변경됩니다</p>
<button onclick="citeChange()">Cite 변경하기</button>
<p id="Sample"></p>
<script>
function citeChange() {
document.getElementById("Del1").cite = "https://example.com/deletedText.html";
document.getElementById("Sample").innerHTML = "del cite 속성값이 'https://example.com/deletedText.html'(으)로 변경되었습니다.";
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
Cite 변경하기 버튼을 클릭한 후의 결과입니다.
예제 코드 분석
위 예제에서 수행된 작업을 단계별로 살펴보겠습니다.
1. del 요소 생성: 먼저 id가 "Del1"인 <del> 요소를 <p> 요소 내부에 생성하고, cite 속성값을 "sampleDeleted.html"로 지정했습니다.
<p><del id="Del1" cite="sampleDeleted.html">일부 텍스트가 삭제되었습니다</del></p>
2. 버튼 생성: 사용자가 클릭하면 citeChange() 함수를 실행하는 "Cite 변경하기" 버튼을 만들었습니다.
<button onclick="citeChange()">Cite 변경하기</button>
3. 속성값 변경 및 결과 표시: citeChange() 함수는 getElementById() 메서드로 <del> 요소를 가져온 뒤, 해당 요소의 cite 속성값을 "https://example.com/deletedText.html"로 변경합니다. 이어서 단락 요소의 innerHTML 속성을 활용해 id가 "Sample"인 단락에 변경 결과를 출력합니다. "Sample" 단락의 텍스트가 파란색으로 표시되는 것은 해당 id에 적용된 CSS 스타일 덕분입니다.
function citeChange() {
document.getElementById("Del1").cite = "https://example.com/deletedText.html";
document.getElementById("Sample").innerHTML = "del cite 속성값이 'https://example.com/deletedText.html'(으)로 변경되었습니다.";
}