HTML DOM의 style quotes 속성은 HTML 문서 내에서 인용문(<q> 태그 등)을 감싸는 따옴표의 종류를 가져오거나 변경할 수 있게 해주는 속성입니다. 이 속성을 활용하면 CSS만으로 정적 스타일을 적용하는 것과 달리, JavaScript를 통해 사용자의 동작에 반응하여 인용 부호를 실시간으로 바꿀 수 있습니다.
문법(Syntax)
quotes 속성의 기본 문법은 다음과 같습니다.
따옴표 값 가져오기
object.style.quotes
따옴표 값 설정하기
object.style.quotes = "value";
속성값(Value)
value 자리에는 아래 표와 같은 값들을 사용할 수 있습니다.
| 값 | 설명 |
|---|---|
| inherit | 부모 요소로부터 이 속성 값을 상속받습니다. |
| initial | 이 속성 값을 브라우저의 기본값으로 되돌립니다. |
| none | 기본 따옴표("")를 사용하도록 설정합니다. 즉, 인용 부호가 화면에 표시되지 않습니다. |
| string string string string | 인용 부호를 직접 지정합니다. 앞의 두 값은 첫 번째 단계(바깥쪽) 인용 부호를, 뒤의 두 값은 두 번째 단계(안쪽) 인용 부호를 결정합니다. |
예를 들어 "'" "'" "#" "#"처럼 지정하면, 첫 번째 단계 인용문은 작은따옴표(' ')로 감싸지고 그 안에 중첩된 인용문은 샵(#) 기호로 감싸집니다.
예제(Example)
HTML DOM style quotes 속성의 실제 사용 예시를 살펴보겠습니다. 버튼을 클릭하면 <q> 요소의 인용 부호가 '#' 기호로 변경되는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
}
q {
margin: 20px;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 20px;
}
</style>
</head>
<body>
<h1>DOM Style quotes Property Example</h1>
<q>I'm a q element with some dummy text.</q>
<button onclick="add()" class="btn">Change quotes</button>
<script>
function add() {
document.querySelector('q').style.quotes = "'#' '#'";
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
여기서 “Change quotes” 버튼을 클릭하면, JavaScript의 add() 함수가 실행되어 <q> 요소의 인용 부호가 기본 큰따옴표에서 '#' 기호로 변경된 것을 확인할 수 있습니다.
정리
quotes 속성은 주로 <q>, <blockquote> 같은 인용 관련 요소와 함께 사용되며, 언어권별로 다른 인용 부호 규칙(한국어의 ' ', 영어의 " ", 프랑스어의 « » 등)을 유연하게 처리해야 하는 다국어 웹사이트에서 특히 유용합니다. JavaScript와 조합하면 사용자 설정에 따라 인용 스타일을 동적으로 전환하는 기능도 손쉽게 구현할 수 있습니다.