상호 참조 내부 변경 사항

HTML 출력 변경 사항

Quarto 1.4의 상호 참조 변경 사항은 그림 및 기타 상호 참조 가능한 요소의 기본 HTML 출력에도 일부 변경을 도입합니다. 대부분의 사용자에게는 보이지 않는 변경입니다. 그러나 Quarto HTML 출력을 직접 다루고 있다면 영향을 받을 수 있습니다. 특히:

  • HTML 그림의 DOM 구조는 이전에는 다음 CSS 선택자가 동작하는 형태였습니다:

    div#fig-elephant > figure > figcaption.figure-caption

Quarto v1.4에서는 다음과 같이 변경되었습니다

div#fig-elephant > figure.quarto-float.quarto-float-fig > figcaption.quarto-float-caption.quarto-float-fig

그림의 최소한의 전체 HTML 출력은 다음과 같습니다:

<div id="fig-1" class="quarto-figure quarto-figure-center anchored">
  <figure class="quarto-float quarto-float-fig figure">
  <div aria-describedby="fig-1-caption-0ceaefa1-69ba-4598-a22c-09a6ac19f8ca">
    <img src="./img/content.jpg">
  </div>
  <figcaption id="fig-1-caption-0ceaefa1-69ba-4598-a22c-09a6ac19f8ca" class="quarto-float-caption quarto-float-fig">
  Figure&nbsp;1: This is a caption.
  </figcaption>
  </figure>
</div>

구체적으로:

  • 모든 상호 참조 가능한 요소는 quarto-float 클래스를 가진 figure HTML 요소를 사용합니다.
  • 서로 다른 float 유형은 CSS 클래스 quarto-float-fig(또는 -tbl, -lst, 혹은 사용자 정의 상호 참조 유형의 ref_type)와 추가 CSS 클래스 figure, table 등으로 구분됩니다. 요소가 서브플로트인 경우 quarto-subfloat-fig가 됩니다.
  • 마찬가지로 float 캡션은 quarto-float-caption 클래스를 가진 figcaption 요소를 사용하고(서브플로트인 경우 quarto-subfloat-caption), quarto-float-* CSS 클래스도 가집니다.

이 구성은 모든 “float”를 하나의 CSS 규칙으로 일괄 타깃팅할 수 있게 하며, 특정 float 유형과 그 캡션을 추가 CSS 선택자로 타깃팅할 수 있게 합니다.

  • 이미지 단독 항목에는 이전에는 주변에 단락이 있었지만, 이제는 그렇지 않습니다.

  • float에는 ARIA 참조를 위한 추가 div가 포함되어 캡션이 적절하고 일관되게 참조됩니다. 그 결과 float 안에 표가 있으면 캡션이 figure 노드 자체로 끌어올려집니다.