HTML DOM의 Quote 객체는 HTML 문서 내 <q> 요소를 나타냅니다. <q> 태그는 짧은 인용문을 표시할 때 사용되며, 브라우저는 일반적으로 해당 텍스트를 따옴표로 감싸서 렌더링합니다.
Quote 객체 생성 방법
JavaScript에서 createElement() 메서드를 사용하여 새로운 quote 객체를 생성할 수 있습니다.
문법
document.createElement("Q");Quote 객체의 속성
Quote 객체가 제공하는 주요 속성은 다음과 같습니다.
| 속성 | 설명 |
|---|---|
| cite | 인용 출처를 나타내는 cite 속성의 값을 읽거나 수정합니다. 일반적으로 인용된 내용의 원본 URL을 지정하는 데 사용됩니다. |
예제 코드
다음 예제는 버튼 클릭 시 동적으로 quote 객체를 생성하여 문서에 추가하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
background-color:#fff;
color:#0197F6;
}
h1{
color:#23CE6B;
}
.btn{
background-color:#fff;
border:1.5px dashed #0197F6;
height:2rem;
border-radius:2px;
width:60%;
margin:2rem auto;
display:block;
color:#0197F6;
outline:none;
cursor:pointer;
}
p{
font-size:1.2rem;
background-color:#db133a;
color:#fff;
padding:8px;
}
</style>
</head>
<body>
<h1>DOM Quote 객체 데모</h1>
<button onclick="createQuote()" class="btn">quote 객체 생성하기</button>
<script>
function createQuote() {
var qElement = document.createElement("Q");
qElement.innerHTML = "WordPress는 접근성, 성능, 보안 및 사용 편의성을 중시하며 모든 사람을 위해 설계된 소프트웨어입니다. 최소한의 설정으로 작동하여 사용자가 자신의 이야기, 제품 또는 서비스를 자유롭게 공유하는 데 집중할 수 있도록 지원합니다.";
qElement.setAttribute("cite", "https://wordpress.org/about/");
document.body.appendChild(qElement);
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
"quote 객체 생성하기" 버튼을 클릭하면 JavaScript 함수가 실행되어 새로운 <q> 요소가 동적으로 생성되고, cite 속성이 설정된 후 문서 본문에 추가됩니다.
정리
HTML DOM Quote 객체는 <q> 요소를 프로그래밍 방식으로 제어할 수 있게 해줍니다. createElement("Q")로 생성하고, cite 속성으로 인용 출처를 지정한 뒤 appendChild()로 DOM에 추가하는 것이 기본적인 활용 흐름입니다.