CSS 강좌 / 표와 셀의 크기 조절하기
HTML 표의 너비는 CSS 선언뿐 아니라 셀 내용과 열 배치 방식의 영향을 받습니다. 표 전체 크기는 width, 열의 기준 너비는 colgroup, 배치 계산은 table-layout으로 조절합니다. 좁은 화면에서 내용을 보존해야 하는 표는 감싼 영역만 가로로 이동하도록 만들 수 있습니다.
표의 너비와 셀의 여백을 구분하기
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px; border: 1px solid #aaa; text-align: start; }
width: 100%는 표가 부모 너비를 기준으로 크기를 정하도록 합니다. 셀 내부 공간은 padding, 경계선은 border로 설정합니다. border-collapse: collapse는 인접 셀의 테두리를 합쳐 표시하는 방식입니다. 표의 너비를 정하는 것과 내용의 줄바꿈을 정하는 것은 별도입니다.
표가 width: 100%라고 항상 부모 안에 들어오는 것은 아닙니다. 줄바꿈할 수 없는 내용이나 큰 최소 너비가 있으면 실제 표 또는 셀 내용이 더 넓어질 수 있습니다. 셀 높이는 문장 길이에 맞춰 늘어나게 두는 것이 일반적인 데이터 표에서 안전합니다. 고정 높이를 주면 글자 확대나 내용 추가 때 잘림을 확인해야 합니다.
열 비율을 지정할 때는 내용의 역할을 기준으로 하기
<colgroup> <col style="width: 30%;"> <col style="width: 70%;"> </colgroup>
실습은 짧은 항목 이름과 긴 설명을 두 열에 나눕니다. 설명에 더 많은 공간이 필요하므로 30:70 비율을 선택했습니다. 실제 데이터가 날짜·가격·긴 설명 등으로 구성된다면 각 열의 역할에 맞춰 배분하세요. 기본 자동 배치로 충분히 읽기 좋다면 비율을 억지로 지정하지 않습니다.
여기처럼 전체 열의 비율을 지정할 때는 합계를 100%로 맞춥니다. colgroup의 너비 선언을 어느 상황에서나 강제되는 최종 결과로 보지는 마세요. 자동 배치에서는 내용의 최소 크기와 표 계산이 함께 작용합니다. MDN의 colgroup 설명을 참고하세요.
auto와 fixed를 같은 데이터로 비교하기
| 값 | 열 너비 계산 | 긴 내용에서 확인할 점 |
|---|---|---|
| table-layout: auto | 셀 내용을 반영해 계산 | 긴 값 때문에 표나 열이 커질 수 있음 |
| table-layout: fixed | 명시한 표 너비와 열·첫 행의 너비 등을 사용 | 뒤쪽 셀의 긴 내용이 넘치거나 잘릴 수 있음 |
fixed를 사용하려면 표의 width를 명시해야 합니다. width가 auto이거나 없으면 fixed만으로 기대한 고정 계산이 되지 않습니다. 실습은 두 표 모두 width: 100%와 같은 colgroup을 사용하고 table-layout만 다르게 지정합니다. 계산 조건은 MDN의 table-layout 설명을 참고하세요. 셀 안의 글자가 잘리면 한 줄 말줄임표의 적용 조건과 긴 문자열의 줄바꿈 방식을 함께 확인하세요.
아래 데이터에는 줄바꿈 없이 표시할 긴 예약 코드가 있습니다. 전체 예제는 이 셀에 nowrap·hidden·ellipsis를 두 표 모두 동일하게 적용합니다. 자동 배치는 긴 값의 공간을 반영해 넓어질 수 있고, 고정 배치는 정해진 열 안에서 말줄임될 수 있습니다. 원문은 별도 문단에 온전히 제공하므로 잘린 코드도 확인할 수 있습니다.
| 항목 | 설명 |
|---|---|
| 준비물 | 물병과 편한 신발을 준비합니다. |
| 예약 코드 | GARDEN-VISIT-RESERVATION-2026-ABCDEFGHIJKLMNOPQRSTUVWXYZ |
| 방문 안내 | 긴 안내 문장은 여러 줄로 이어져도 셀 높이를 내용에 맞춰 늘립니다. |
좁은 화면에서는 감싼 영역만 가로 이동하기
.table-scroll { overflow-x: auto; }
table { width: 100%; min-width: 32rem; }
루트 글자 크기가 16px이면 32rem은 512px입니다. 화면에서 사용할 수 있는 폭이 그보다 좁으면 표는 최소 너비를 유지하고 부모 영역만 가로로 스크롤합니다. 페이지 전체를 가로로 밀어내는 것과 구분해야 합니다. 실습의 32rem은 이 두 열의 비교용 값이며 모든 표의 최소 너비 기준은 아닙니다. 작은 화면의 잘림과 조작 가능 여부는 모바일·확대·키보드 점검 항목에 따라 확인하세요.
표가 작아도 읽을 수 있다면 최소 너비를 낮추거나 제거할 수 있습니다. 반대로 여러 열과 긴 값을 모두 압축하면 읽기 어려워질 수 있습니다. 의미상 열을 줄일 수 있는지, 줄바꿈으로 해결되는지, 가로 이동이 필요한지 실제 데이터로 판단하세요. 모바일에서는 “가로로 이동할 수 있습니다” 같은 안내가 도움이 될 수 있습니다.
전체 예제는 감싼 영역에 tabindex="0", role="region", 구체적인 이름을 지정하고 포커스 윤곽선을 남깁니다. Tab으로 영역에 이동한 뒤 좌우 방향키로 표 끝까지 확인하세요. 스크롤할 필요가 없는 표까지 모두 포커스 대상으로 만들 필요는 없습니다. 키보드 접근 조건은 MDN의 overflow 설명을 참고하세요.
전체 예제와 비교 실습
아래 코드를 tables.html에 UTF-8로 저장해 엽니다. 같은 세 행과 같은 30:70 열 비율을 사용하므로 배치 방식에 따른 차이를 비교할 수 있습니다. 예약 코드는 배치 실습용 가상 데이터입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>표 크기와 긴 내용 비교</title>
<style>
body { margin: 16px; color: #333; font: 16px/1.6 sans-serif; }
.table-scroll { max-width: 640px; overflow-x: auto; margin-block: 16px; }
.table-scroll:focus-visible { outline: 3px solid #e58c1f; outline-offset: 3px; }
table { width: 100%; min-width: 32rem; border-collapse: collapse; }
th, td { padding: 12px; border: 1px solid #aaa; text-align: start; }
.auto { table-layout: auto; }
.fixed { table-layout: fixed; }
.token { font-family: monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.original { max-width: 640px; overflow-wrap: anywhere; }
</style>
</head>
<body>
<h1>표의 자동 배치와 고정 배치</h1>
<h2>table-layout: auto</h2>
<div class="table-scroll" role="region" aria-label="자동 배치 비교 표" tabindex="0"><table class="auto"><colgroup><col style="width: 30%;"><col style="width: 70%;"></colgroup><thead><tr><th scope="col">항목</th><th scope="col">설명</th></tr></thead><tbody><tr><th scope="row">준비물</th><td>물병과 편한 신발을 준비합니다.</td></tr><tr><th scope="row">예약 코드</th><td class="token">GARDEN-VISIT-RESERVATION-2026-ABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr><tr><th scope="row">방문 안내</th><td>긴 안내 문장은 여러 줄로 이어져도 셀 높이를 내용에 맞춰 늘립니다.</td></tr></tbody></table></div>
<h2>table-layout: fixed</h2>
<div class="table-scroll" role="region" aria-label="고정 배치 비교 표" tabindex="0"><table class="fixed"><colgroup><col style="width: 30%;"><col style="width: 70%;"></colgroup><thead><tr><th scope="col">항목</th><th scope="col">설명</th></tr></thead><tbody><tr><th scope="row">준비물</th><td>물병과 편한 신발을 준비합니다.</td></tr><tr><th scope="row">예약 코드</th><td class="token">GARDEN-VISIT-RESERVATION-2026-ABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr><tr><th scope="row">방문 안내</th><td>긴 안내 문장은 여러 줄로 이어져도 셀 높이를 내용에 맞춰 늘립니다.</td></tr></tbody></table></div>
<p class="original">예약 코드 전체: GARDEN-VISIT-RESERVATION-2026-ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
</body>
</html>
- 창을 좁히고 두 표의 너비를 확인합니다. 고정 표는 루트가 16px일 때 최소 512px이고, 자동 표는 긴 코드를 반영해 그보다 넓어질 수 있습니다. 두 표 모두 페이지가 아니라 감싼 영역에서 가로로 이동해야 합니다.
- Tab으로 고정 표 영역에 이동한 뒤 오른쪽 방향키로 마지막 열을 확인합니다. 작은 화면에서는 손가락으로 가로 이동할 수 있는지도 확인하세요. 스크롤을 마치면 왼쪽 끝으로 돌아옵니다.
- .fixed의 table-layout을 auto로 바꿉니다. 같은 데이터에서 열과 표 너비가 어떻게 바뀌는지 확인한 뒤 fixed로 복원합니다.
- .token의 white-space를 normal로 바꾸고 overflow-wrap: anywhere를 추가합니다. 긴 코드가 줄바꿈되어 셀 높이가 늘어나는지 확인한 뒤 원래 선언으로 되돌립니다.
- 열 비율을 40:60으로 바꿉니다. 짧은 항목 열의 여유와 설명 열의 줄바꿈을 비교하세요. 원래 30:70으로 복원하고 넓은 화면과 글자 확대에서도 확인합니다.
비율이 예상대로 보이지 않으면 table-layout과 명시한 표 너비, 최소 너비, 긴 문자열의 줄바꿈 조건을 확인합니다. 가로 이동이 안 되면 overflow-x를 표 자체가 아니라 감싼 요소에 지정했는지 확인하세요. 말줄임을 선택했다면 중요한 원문을 다른 곳에서 읽을 수 있어야 합니다.
CSS 강좌 / 미디어 쿼리와 콘텐츠 기준 분기점 만들기
카드의 최소 폭과 여백을 기준으로 미디어 쿼리 분기점을 정합니다. 1·2·3열 전체 예제와 경계값 비교로 조건이 적용되는 과정을 확인합니다.
CSS 강좌 / Grid 반복 열·자동 배치·영역 이름 사용하기
repeat·auto-fit·auto-fill의 차이와 자동 배치 순서를 실행 예제로 비교합니다. grid-template-areas로 페이지를 구성하고 모바일 전환, 영역 이름 오류와 읽기 순서도 확인합니다.
CSS에서 텍스트의 가로 가운데 정렬은 text-align 속성을 이용합니다. 요소의 가로 가운데 정렬은 margin 속성을 이용합니다. 세로 정렬을 가운데로 하려면 어떻게 해야 할까요? 네 가지 방법을 소개합니다.
인라인·내부·외부 CSS의 작성 위치를 비교하고, 두 HTML 페이지가 하나의 스타일시트를 공유하도록 구성합니다. 폴더 위치에 따른 경로와 CSS가 적용되지 않을 때의 확인 순서도 설명합니다.
CSS 강좌 / 관계 선택자와 가상 클래스로 요소 고르기
자손·자식·인접 형제·일반 형제 선택자를 같은 문서 구조에서 비교합니다. hover·focus-visible·first-child·nth-child를 포함한 전체 예제와 구조를 바꿔 선택 결과를 확인하는 실습을 제공합니다.
글의 완급 조절, 내용 전환 등을 위해 구분선을 사용하는 경우가 많습니다. 선은 여러 가지 방식으로 만들 수 있는데, 보기 좋게 꾸미는 것은 CSS로 합니다. 아래는 div 태그에 모양을 입혀서 구분선을 만드는 몇 가지 예제입니다.
CSS / Tutorial / 인용문(Blockquote) 꾸미는 방법
blockquote 요소의 기본 모양은 양쪽에 여백이 있는 것입니다. 그대로 사용하기보다는 여러 가지 모양으로 꾸미는 것이 일반적입니다. 다음은 아래와 같은 인용문을 꾸미는 몇 가지 예제입니다.
CSS 강좌 / 박스 모델과 margin, padding, border 이해하기
콘텐츠·padding·border·margin의 위치와 너비 계산을 도해와 실행 예제로 설명합니다. 여백 축약 규칙과 세로 margin 합치기를 비교하고 개발자 도구에서 실제 크기를 확인합니다.
링크의 기본 밑줄과 방문·호버·활성 상태를 설정하고 키보드 포커스를 표시합니다. 두 파일로 방문 이력과 Tab·Enter 동작을 확인하며 상태 규칙이 겹칠 때의 결과를 설명합니다.
z-index의 적용 조건과 부모 쌓임 맥락을 실제로 겹치는 예제로 이해합니다. 자식과 부모의 숫자 변경을 비교하고, overflow 잘림과 겹침 순서를 구분해 문제를 해결합니다.