웹 문서에서 짧은 인용문을 표시하려면 HTML의 <q> 요소를 사용합니다. 여기에 CSS의 quotes 속성을 함께 활용하면, 인용문 앞뒤에 표시되는 인용부호의 모양과 종류를 자유롭게 변경할 수 있습니다.
JavaScript에서는 DOM 요소의 style.quotes 속성에 원하는 인용부호를 설정하기만 하면 됩니다. 이때 인용부호는 유니코드 이스케이프 시퀀스 형태로 지정할 수 있습니다.
예제
다음 코드를 실행하면 버튼 클릭 시 <q> 요소의 인용부호가 기본 큰따옴표에서 꺾쇠괄호(‹ ›) 스타일로 변경됩니다.
<!DOCTYPE html>
<html>
<body>
<q id = "myID">Amit</q><br>
<button onclick = "display()">Update Quotation Marks</button>
<script>
function display() {
document.getElementById("myID").style.quotes = "'\2039' '\203A'";
}
</script>
</body>
</html>코드 설명
<q id="myID">: 인용문을 나타내는 요소로, 기본적으로 브라우저가 자동으로 따옴표를 추가해 줍니다.style.quotes: 인용부호의 시작 기호와 끝 기호를 순서대로 지정합니다. 위 예제에서는 유니코드\2039(‹)와\203A(›)를 사용했습니다.display()함수: 버튼을 클릭하면 실행되어 해당 요소의 인용부호를 동적으로 업데이트합니다.
이처럼 quotes 속성을 활용하면 언어나 디자인 규칙에 맞게 인용부호를 유연하게 조정할 수 있어, 다국어 콘텐츠나 세련된 타이포그래피가 필요한 웹 페이지에서 특히 유용합니다.