인용문의 기호를 바꾸는 방법 - quotes
인용문의 기호를 바꾸는 방법
<q> 태그는 문단 안에서 사용하는 인용문입니다. 기본 모양은
큰따옴표로 감싸는 것입니다.
간단한 예는 다음과 같습니다.
data-editable="true"
data-preview="true"
data-default-tab="result"
data-height="280"
data-pen-title="CSS 인라인 인용문의 기호 꾸미기 quotes 예제1"
data-slug-hash="LYZZPWz"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 280px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
quotes 속성은 인용문을 감싸는 큰따옴표를 다른 기호 또는 문자로 바꿔줍니다.
예를 들어 < 와 > 로 바꾼다면 다음과 같이 합니다.
q {
quotes: "<" ">";
}data-editable="true"
data-preview="true"
data-default-tab="result"
data-height="280"
data-pen-title="CSS 인라인 인용문의 기호 꾸미기 quotes 예제2"
data-slug-hash="mdEEbWj"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 280px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
속성값을 4개 부여하면 앞의 두 개는 1단계 인용문, 뒤의 두 개는 2단계 인용문에
사용합니다.
q {
quotes: "<" ">" "(" ")";
}data-editable="true"
data-preview="true"
data-default-tab="result"
data-height="280"
data-pen-title="CSS 인라인 인용문의 기호 꾸미기 quotes 예제3"
data-slug-hash="GRqqKWX"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 280px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
인용 기호를 사용하지 않으려면 속성값을 none으로 합니다.
q {
quotes: none;
}