CSS Quickies: 인용 속성 및 q HTML 태그

CSS Quickes란 무엇입니까?

Instagram에서 사랑하는 커뮤니티에 질문하기 시작했습니다. "어떤 CSS 속성이 혼란스럽나요?"

"CSS Quickies"에서 하나의 CSS 속성에 대해 자세히 설명하겠습니다. 커뮤니티에서 요청한 속성입니다. CSS 속성에 대해 혼란스러워하는 경우 아래의 의견에 대해 또는 아래에 적어주세요! 나는 모든 질문에 대답합니다.

CSS의 따옴표에 대해 이야기합시다.

CSS로 의상 따옴표를 설정할 수 있다는 것을 알고 계셨습니까?

귀하의 첫 번째 질문일 수도 있지만 처음에 맞춤 따옴표가 필요한 이유는 무엇입니까? 몇 가지 예를 들어보겠습니다.

사용자가 복사하려는 경우 태그가 선택되지 않습니다. 이것은 사용자가 무언가를 선택하여 터미널에 붙여넣기를 원하는 일부 시나리오에서 도움이 될 수 있습니다.

특정 유형의 견적이 필요합니다. 작은 따옴표, 큰 따옴표, 각도 따옴표, 큰 따옴표, 높은 기울임 따옴표 등이 있습니다.

따옴표는 필요하지 않지만 사용자 정의 텍스트 또는 그림 이모티콘을 앞에 추가하고 싶습니다.

<q> 태그

다른 HTML 주위에 따옴표를 추가하려면 태그로 둘러싸면 됩니다.

 <q>this will be in quotes.</q>

그러면 다음과 같은 출력이 생성됩니다. "이것은 따옴표로 묶입니다."하지만\' 를 따옴표로 사용하고 싶거나 필요할 수도 있습니다 << >> .

CSS의 인용 속성

quotes 의 기본 동작을 변경하려면 여는 따옴표와 닫는 따옴표를 설정해야 합니다. 이것은 다음과 같이 수행됩니다.

q {
  quotes: "<" ">"
}

 <q>this will be in quotes.</q>

이렇게 하면 이전과 거의 동일한 출력이 생성되지만 이제 텍스트가 <>로 래핑됩니다. 다음과 같이 표시됩니다.

두 번째 수준 따옴표

따옴표 안에 따옴표가 있는 경우가 있습니다. 이것은 당신이 누군가를 인용하고 누군가가 이미 다른 누군가를 인용하고 있는 경우에 발생할 수 있습니다. 이것은 더 깊은 수준으로 갈 수 있지만 CSS는 이것을 지원하지 않습니다. 예를 들면 다음과 같습니다.

<q>First Level quotes <q>Second Level quotes</q></q>

출력은 다음과 같이 표시됩니다. "첫 번째 수준은 '두 번째 수준의 인용문'"입니다. 이제 이것을 사용자 정의하려면 quote 속성에 더 많은 매개변수를 추가하기만 하면 됩니다.

q {
  quotes: "<" ">" "<<" ">>"
}

<q>First Level quotes <q>Second Level quotes</q></q>

이제 출력은 다음과 같을 것입니다: <>>. 그것도 쉬웠죠?

태그 다음에 다른 요소 주위에 사용자 지정 따옴표를 사용하려면 어떻게 해야 합니까?

모든 HTML 태그 주위에 맞춤 따옴표

사용자 지정 따옴표는 모든 문자열이 될 수 있으므로 이모티콘도 포함할 수 있다고 생각할 수 있습니다 😀. 이제 "custom-quotes-element"클래스가 있는 span 요소 앞이나 뒤에 이모티콘이 필요합니다. 시작은 쉽습니다. 언제나처럼 시작됩니다.

.custom-quotes-element {
  quotes:'🙌' '🙌';
}

그렇게만 적용하면 효과가 없습니다. 의사 요소before 및 after에서 콘텐츠 속성에 대한 특수 값을 설정해야 합니다.

.custom-quotes:before {
  content: open-quote;
}

.custom-quotes:after {
  content: close-quote;
}

코드는 이해하기 매우 쉬워야 합니다. before 의 경우 open- 따옴표 속성 뒤에 내용을 . This will indicate that you want to have the first or third string from the quote property here and for the quote pseudo-element that you want to have the string as the content from the second and fourth string from the 로 설정해야 합니다. 그게 다야!

codepen에 작은 데모 영웅을 만들었습니다.


👋안녕하세요! | | | Medium | |