CSS에서 \'display: table-column\'의 실제 목적은 무엇입니까?

CSS "display: table-column"의 수수께끼 풀기

HTML 및 CSS 속성을 탐색하다 보면 흥미로운 질문이 나올 때가 많습니다. 수수께끼 같은 "display: table-column" 선언을 사용하여 CSS 테이블 기반 레이아웃을 구현할 때 이러한 쿼리 중 하나가 발생합니다. 그 매력에도 불구하고 이 속성은 다소 구체적인 목적을 갖고 있어 올바르게 이해하지 못할 경우 혼란스러운 결과를 초래할 수 있습니다.

배경: CSS 테이블 모델

CSS 테이블 모델은 HTML 테이블 모델에서 많이 차용한 복잡한 시스템입니다. 이 모델에서 테이블은 행과 열로 구성되며, 행과 열의 각 교차점을 차지하는 셀이 있습니다. 셀은 행의 직계 후손이지만 열과 직접적인 관계는 없습니다.

"표시: 테이블-열"의 목적

통념과는 달리 " display: table-column" 속성은 열 레이아웃을 생성하는 방법을 제공하지 않습니다. 유일한 목적은 테이블 행 내의 셀에 특별히 적용되는 속성을 정의하는 것입니다. 즉, 행 내의 위치에 따라 특정 셀의 배경색이나 글꼴 크기와 같은 특성을 지정할 수 있습니다.

그러나 테이블 구조는 기존 셀과 동일하게 유지된다는 점에 유의하는 것이 중요합니다. HTML. 열에는 콘텐츠가 직접 포함되지 않습니다. 대신, 행 내의 셀 레이아웃에 영향을 미치는 논리적 구성으로만 존재합니다.

예시

다음 HTML 및 CSS 코드를 고려하세요.

<code class="html"><section>
  <div id="colLeft">
    <div id="row1">
      <div id="cell1">AAA</div>
    </div>
    <div id="row2">
      <div id="cell2">BBB</div>
    </div>
  </div>
  <div id="colRight">
    <div id="row3">
      <div id="cell3">CCC</div>
    </div>
  </div>
</section></code>

<code class="css">section {
  display: table;
  height: 100%;
  background-color: grey;
}

#colLeft,
#colRight {
  display: table-column;
  height: 100%;
}

#row1,
#row2,
#row3 {
  display: table-row;
  height: 100%;
}

#cell1,
#cell2,
#cell3 {
  display: table-cell;
  height: 100%;
}</code>

이 예에서는 "display: table-column" 선언이 "colLeft" 및 "colRight" 요소에 적용됩니다. 이러한 요소에는 콘텐츠가 포함되어 있지 않습니다. 유일한 목적은 해당 행 내에서 셀의 레이아웃을 정의하는 것입니다.

이러한 열 정의가 있음에도 불구하고 브라우저에 아무것도 나타나지 않을 수 있습니다. 앞서 언급했듯이 열에는 내용이 직접 포함되지 않기 때문입니다. 콘텐츠는 테이블 행의 하위인 테이블 셀 내에 배치되어야 합니다.

이 문제를 해결하려면 HTML 구조를 수정하여 테이블 셀 내에 콘텐츠를 배치해야 합니다.

<code class="html"><section>
  <div id="colLeft">
    <div id="row1">
      <div id="cell1">AAA</div>
    </div>
    <div id="row2">
      <div id="cell2">BBB</div>
    </div>
  </div>
  <div id="colRight">
    <div id="row3">
      <div id="cell3">CCC</div>
    </div>
  </div>
</section></code>

이를 통해 수정하면 내용이 예상한 대로 나타나며 "display: table-column"의 올바른 사용을 보여줍니다.

위 내용은 CSS에서 \'display: table-column\'의 실제 목적은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!