[css] CSS - quotes 속성 - 인용부호 모양 지정 (= quotes속성 = 쿼트스속성/쿼츠속성)

1. quotes 예제 - 인용 마크 유형 지정
2. quotes 정의
3. quotes 구문

quotes 예제 - 인용 마크 유형 지정

※ 파란색 부분은 작동하나, 빨간색 부분은 작동 X

 

<style>

#a {quotes: "'" "'";}

#b {quotes: "[" "]" "「" "」";}

#c {quotes: '\2039' '\203A' '\00AB' '\00BB';}

#d {quotes: "[" "]" "「" "」";}

</style>

<p><q id="a">홈짱닷컴</q></p>

<p><q id="b">홈짱닷컴 <q>Homzzang.com</q> Since 2012</q></p>

<p><q id="c">홈짱닷컴 <q>Homzzang.com</q> Since 2012</q></p>

<blockquote id="d">홈짱닷컴 <q>Homzzang.com</q> Since 2012</blockquote>

 

결과보기

quotes 정의

 

인용부호 모양 지정.

 

---

 

1. 

<q> 태그엔 작동하나, <blockquote> 태그엔 작동 X

 

2.

• 기본값: 없음
• 적용대상: 모든 요소
• 상속여부: O
• 애니가능: X
• CSS버전: CSS2
• JS구문: object.style.quotes="'\253' '\273'";

 

3.

IE8 이상 주요 최신 브라우저 모두 지원.

 

4. MDN quotes 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/quotes

 

quotes 구문

 

selector {quotes: none|string1 sring2|string1 string2 string3 string4|initial|inherit;}

 

---

[속성값]

 

none

content 속성의 open-quote 및 close-quote 값이 따옴표를 생성하지 않도록 지정. (마치, no-open-quote 및 no-close-quote 속성값이 각각 지정된 효과와 같음.)

 

sring1 string2

인용 '열기/닫기' 부호.

• 각 string은 따옴표로 감싸야 함.
• 각 string은 특수문자나 유니코드 사용해 지정.

 

sring1 string2 string3 string4

(string1~2)은 메인인용부호 / (string3~4)은 서브인용부호

• 각 string은 따옴표로 감싸야 함.
• 각 string은 특수문자나 유니코드 사용해 지정.

 

initial

이 속성의 기본값 사용.

 

inherit

부모요소의 속성값 상속.