<blockquote>, <q>, <cite> 올바르게 사용하기

<q>, <blockquote>, <cite> 혼동이 올 수 있는 태그입니다.

 

Blockquotes

흐름 요소 (즉, "블록 수준"요소)로서 인용 부호 안에 다른 요소가 포함될 수 있습니다.

예를 들어, 문제없이 단락(<p>태그)을 넣을 수 있습니다.

<blockquote>
  <p></p>
  <p></p>
</blockquote>

<blockquote>
    <h2></h2>
    <ul>
      <li></li>
      <li></li>
    </ul>
</blockquote>

인용 부호는 디자인의 장식 요소가 아닌 인용 용도로만 사용되어야합니다.

또한 화면 판독기 사용자가 인용 부호 사이를 이동할 수 있으므로 접근성을 지원합니다.

따라서 미학에만 사용되는 인용구 요소는 실제로 사용자를 혼란스럽게 할 수 있습니다.

확장 된 인용의 범위를 벗어나는 장식적인 것이 필요하다면 클래스가있는 div가 갈 길입니다.

 

Quoting with <q>

Q 태그는 인라인 따옴표 입니다.

많은 최신 브라우저는 자동으로 따옴표에 의사 요소로 인용 부호를 추가하지만 이전 브라우저에는 fallback이 필요할 수 있습니다.

일반적인 인용 부호는 요소와 마찬가지로 인라인 태그 내에서도 유효합니다.

그러나 <q>태그를 사용하면 인용 속성, 인용 부호 자동 처리 및 인용 수준 자동 처리가 포함된다는 이점이 있습니다. 

 

<cite>

이 태그는 인용하거나 말한 사람이 아닌 창조적인 작품을 참조하는 데 사용해야합니다. 다시 말해, 따옴표가 아닙니다. 스펙의 예는 다음과 같습니다.

 

<div class="need-to-style-together">
  <blockquote>
    Quote about cupcake distribution from an article
  </blockquote>
  <cite>The Article</cite>
</div>

bloquote 나 q 태그 내에는 사용해서는 안됩니다.

 

인용 부호를 표시하고 의미적 코드를 만족시키는 한 가지 방법은 bloquote 태그를 figure 요소 안에 넣는 것입니다.

그런 다음 창의적인 요소를 표현하는 cite 태그와 다른 저자 또는 인용 정보를 figcaption에 넣습니다.

<figure class="quote">
  <blockquote>
    But web browsers aren’t like web servers. 
    If your back-end code is getting so big that 
    it’s starting to run noticably slowly, 
    you can throw more computing power at it by scaling up your server. 
    That’s not an option on the front-end 
    where you don’t really have one run-time environment—your end users have 
    their own run-time environment with its own constraints around computing power and network
    connectivity.
  </blockquote>
  <figcaption>
    &mdash; Jeremy Keith, <cite>Mental models</cite>
  </figcaption>
</figure>

See the Pen It Figures You'd Say That by CSS-Tricks (@css-tricks) on CodePen.

q {
  quotes: "“" "”" "‘" "’" "“" "”" "‘" "’" "“" "”";
}

위처럼 따옴표를 추가해주는 것도 의미론적으로 좋습니다.

 

대신 이런 레이아웃을 볼 수 있습니다.

그럴 때는 당황하지 말고 text-indent를 조정하면 됩니다.

blockquote {
  text-indent: -0.45em;
}

 

/* Fallback */
blockquote {
  text-indent: -0.45em;
}

/* If there's support, erase the indent and use the property instead */
@supports ( hanging-punctuation: first) {
  blockquote {
    text-indent: 0;
    hanging-punctuation: first;
  }
}

blockquote::before {
    content: open-quote;
}
blockquote::after {
    content: close-quote;
}
blockquote {
    quotes: "“" "”" "‘" "’";
}

hanging-punctuation 을 사용하면 가능한 요소에만 표시되므로 더 좋습니다.

 

 

 

출처 : https://css-tricks.com/quoting-in-html-quotations-citations-and-blockquotes/