Insights
AI가 자동으로 큐레이션·번역·정리하는 기술 동향 피드입니다.
이 글은 CSS Grid가 현대 레이아웃에 필수적임을 강조하며, HTML 테이블의 의미론적 장점과 그리드의 유연성을 결합하는 방법을 논합니다. 테이블을 `display: grid;`로 스타일링하여 구조적인 이점을 유지하면서도 그리드 속성을 활용할 수 있는 방안을 제시합니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 CSS-Tricks의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기“Something wicked this way comes.”
이것은 순진함이었지만, 제가 처음 Flexbox를 접하고 그다음 CSS Grid를 접했을 때, 모든 위치 지정 속성들(align-self, justify-content 등)이 블록 요소와 인라인 요소에 사용 가능할 것이라는 느낌을 받았습니다. 테이블 같은 것, 리스트, 고정된 요소 등 모든 것에 적용될 수 있을 거라는 생각이었습니다. 내부 작동 방식은 참조 박스(reference boxes)에 따라 다를 수 있지만, 구문과 예상 결과는 동일할 것이라고 생각했습니다: 한쪽 가장자리로 밀어내기, 중앙에 유지하기, 균등하게 퍼뜨리기 등 말입니다.
실제로 그렇게 되지는 않았지만, 만약 제가 그런 것을 만들어낼 수는 없을까요?
예를 들어, HTML 테이블의 영혼을 추출하여 CSS Grid로 다시 꿰매 붙일 수 있습니다. 즉, 테이블처럼 보이지만 그리드처럼 작동하게 하여 그리드 속성을 사용할 수 있게 하는 것입니다. 믿기 어려우시겠지만, 과거에도 이와 유사한 형태가 테이블을 반응형으로 만드는 데 사용된 적이 있습니다.
하지만 본문에서 테이블을 완전히 폐지하기 전에 말씀드리자면: 순수한 테이블 자체로도 많은 장점이 있습니다. 테이블은 브라우저가 완벽하게 이해하고 필요할 때 보조 기술(assistive technology)에 전달해 줄 수 있는 깔끔한 의미론적 레이아웃(semantic layout)을 제공합니다. 심지어 <caption> 요소까지 존재합니다.
CSS 측면에서는, 본질적인 반응성, 순서 독립성(source order independence), 그리고 위치 지정 때문에 CSS Grid가 필수적인 상황이 실제로 있습니다. 이것이 바로 그리드가 레이아웃에 있어 없어서는 안 될 도구인 이유입니다. 그리드를 사용하고 HTML 테이블에게 실제 표 데이터를 표시하는 작업을 맡기세요!
하지만 우리가 고려해야 할 테이블의 표현적 이점(presentational benefit)도 있습니다. 기술적으로 <table>은 <div>와 같은 표현 요소가 아닙니다. 그것은 의미론적입니다: 브라우저와 저는 이에 대해 공통된 의미를 공유합니다. 하지만 브라우저가 이를 그렇게 이해하는지 여부와 관계없이, 제가 <th>을 읽으면 그건 데이터가 뒤따르는 제목이라고 생각합니다. 만약 '표현'이라는 단어가 적절한 용어는 아니라면, 저에게는 일종의 준(pseudo)-의미론적 특성을 갖습니다.
이러한 준-의미론성은 여전히 유용합니다. 이것은 제가 다음을 읽어야 하는 경우와 다음과 같은 경우 사이의 차이를 만듭니다:
<table> <thead> <tr> <th class="card-number">CARD NUMBER</th> </tr> </thead> </table>제목에 제목과 같은 의미론적 요소(<h1
angle나 <strong
angle)가 있음에도 불구하고, 이들은 <th
angle와 <td
angle가 가진 연결성을 가져오지 못합니다. 또한, <dt
angle와 <dd
angle는 레이아웃보다는 용어집(glossary)과 같은 텍스트 구조화에 할당하는 것이 더 좋습니다.
그렇다면 제가 이 방식으로 <th
angle를 사용하는 것이 괜찮을까요? 즉, 테이블 자체가 단순히 유사 의미론적 마크업 스킨으로 사용되는 경우입니다:
/* 🧟 */
table {
display: grid;
...
만약 이 HTML이 다음과 같이 변한다면 어떨까요:
<article class="card">
<div class="card-number">
<strong
angleCARD NUMBER</strong>
...
…가 이것으로 바뀐다면:
<table class="card">
<tr class="card-number">
<th
angleCARD NUMBER</th>
...
그렇다면, 이 CSS와 그 결과(첫 번째 마크업의 경우):
.card {
display: grid;
grid-template-columns: auto auto 1fr;
...
…는 이것으로 바뀝니다(테이블 마크업의 경우):
.card {
display: grid;
grid-template-columns: auto auto 1fr;
...
저에게 있어 후자의 마크업 예시, 즉 유사 의미론적 테이블은 몇 개의 일반적인 div를 사용하는 것보다 스캔하기가 더 쉽습니다. 저는 테이블의 유사 의미론적 구조와 CSS Grid를 레이아웃에 사용하기 쉬운 점을 모두 얻게 됩니다. 브라우저 측면에서는 아직까지는 이sort of Frankenstein creation(프랑켄슈타인 같은 창조물)을 기피하는 곳은 없습니다. VoiceOver나 키보드 탐색 기능도 마치 실제 테이블처럼 작동합니다.
하지만 이것이 우리가 할 수 있어야 하는 것의 흐름에 비추어 볼 때 조금 지나치게 엉성해 보이고 부자연스럽다는 점은 이해할 만합니다. 우리는 콘텐츠와 표현 사이의 관심사 분리(separation of concerns)를 유지하도록 장려받고 있으며, 이는 테이블의 역할과 같은 의미론적 구조에는 영향을 주지 않으면서 정확히 그 역할을 수행합니다. 하지만 어쩌면 그래야 할까요? CSS가 처리할 수 있는 다른 HTML 요소들이 아주 많습니다.