CSS / Tutorial / 표 꾸미기 / 크기
HTML 표의 크기는 셀 내용과 사용 가능한 공간의 영향을 받습니다. CSS의 width로 표 전체 너비를 정하고, 필요할 때만 열 너비를 조절할 수 있습니다. 표를 항상 고정된 픽셀 폭으로 만들면 작은 화면에서 잘릴 수 있으므로 실제 데이터와 모바일 화면을 함께 확인해야 합니다.
표 전체 너비 정하기
표의 기본 크기는 내용에 따라 달라집니다. 부모 영역을 사용할 수 있는 범위에서 채우려면 width: 100%를 지정할 수 있습니다. 셀 안쪽 공간은 padding으로 조절하고, 테두리를 하나로 합치려면 border-collapse: collapse를 사용합니다.
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 0.75rem;
border: 1px solid #dadada;
text-align: start;
}
width: 100%가 표를 부모보다 무조건 작게 유지한다는 뜻은 아닙니다. 셀에 줄바꿈할 수 없는 긴 내용이나 큰 최소 너비가 있으면 실제 표가 더 넓어질 수 있습니다.
열 너비는 언제 지정할까?
브라우저가 내용을 바탕으로 열 너비를 배분하는 기본 동작을 먼저 확인하세요. 날짜처럼 짧은 값과 설명처럼 긴 값이 있다면 두 열을 똑같이 50%로 나누는 것보다 내용에 맞게 배분하는 편이 읽기 쉽습니다. 꼭 고정 비율이 필요하면 <colgroup>을 사용할 수 있습니다.
<colgroup> <col style="width: 30%;"> <col style="width: 70%;"> </colgroup>
이 비율은 전체 표 너비에 대한 열의 희망 너비이며 실제 배치는 내용, 테이블 레이아웃 방식 및 브라우저 계산에 영향을 받습니다. 한 셀에 큰 이미지나 긴 URL이 있으면 비율대로 보이지 않을 수 있습니다. table-layout: fixed는 열 계산을 더 예측 가능하게 만들 수 있지만 내용이 넘치거나 잘리는지 점검해야 합니다.
좁은 화면에서 표 유지하기
열이 많은 데이터 표를 좁은 화면에 억지로 압축하면 글자가 읽기 어려워집니다. 이때는 표를 감싼 영역만 가로 스크롤하게 해 셀 내용을 보존할 수 있습니다. 스크롤할 수 있다는 단서가 필요할 수도 있습니다.
.table-scroll {
overflow-x: auto;
}
표가 실제로 화면보다 넓을 때만 가로 스크롤이 나타납니다. 키보드로 표 영역에 접근해 이동할 수 있는지, 첫 열이나 제목이 잘려 보이지 않는지도 확인하세요. 데이터의 의미상 열을 줄일 수 있다면 표 구조를 간소화하는 것이 더 나을 수 있습니다.
전체 예제
다음 예제의 표를 열어 창 폭을 좁혀 보세요. 첫 번째 열보다 설명 열에 더 많은 공간을 주고, 화면이 좁아지면 감싼 영역에서 가로로 이동할 수 있습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>표의 크기</title>
<style>
body { font-family: sans-serif; margin: 1rem; }
.table-scroll { overflow-x: auto; }
table { width: 100%; min-width: 32rem; border-collapse: collapse; }
th, td { padding: 0.75rem; border: 1px solid #dadada; text-align: start; }
</style>
</head>
<body>
<div class="table-scroll" role="region" aria-label="설정 비교 표" tabindex="0">
<table>
<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>셀 안쪽 간격은 padding으로 지정합니다.</td></tr>
</tbody>
</table>
</div>
</body>
</html>
표의 높이를 고정하면 문장 길이나 글자 확대 시 셀 내용이 넘칠 수 있습니다. 데이터 표는 높이를 내용에 맡기는 편이 안전합니다. 실제 계산 방식은 MDN의 table-layout 문서와 colgroup 문서를 참고하세요.
CSS / Tutorial / 마우스 호버 효과 / 다른 이미지 보여주는 방법
이미지에 마우스를 올렸을 때 다른 이미지가 나타나는 효과를 CSS로 만들어보겠습니다. 다음과 같이 이미지 두 개를 넣고 div로 감쌉니다.
배경색은 background-color 속성으로 만듭니다. table, tr, th, td, thead, tbody, tfoot에 적용할 수 있습니다. 다음 표를 기본으로 하고, 배경색을 여러 곳에 추가해보겠습니다.
CSS / Tutorial / 양쪽 배분(균등 분할) 정렬 방법
문단 정렬을 양끝으로 꽉차게 하는 경우가 있습니다. 한글에서는 배분 정렬, 워드에서는 균등 분할이라고 합니다. 일반적인 문단에서는 거의 사용하지 않고, 표에서 제목을 넣을 때 많이 사용합니다.
CSS의 border 속성으로 삼각형을 만들 수 있습니다. 여러 형태의 삼각형을 만들고, 그 삼각형을 회전하는 방법을 알아봅니다.
CSS / Tutorial / 마우스 호버 효과 / 이미지 확대하는 방법
이미지에 마우스를 올렸을 때 이미지가 확대되는 효과를 만들어보겠습니다. 다음과 같이 이미지가 들어간 간단한 HTML 문서를 만듭니다.
CSS / Tutorial / ul, ol 가운데 정렬하는 방법
목록 자체가 아니라 목록 안의 내용만 가운데 정렬할 때는 text-align 속성을 사용합니다. 목록 요소 자체를 가운데 정렬할 때는 margin 속성을 사용합니다. 만약 요소의 내용에 맞게 자동으로 크기가 정해지게 하고 싶으면 display 속성을 사용합니다.
CSS / Tutorial / placeholder의 색, 글자 모양 등 꾸미는 방법
placeholder는 HTML5에서 새로 나온 속성으로 input 요소나 textarea 요소에 안내문을 넣을 수 있습니다. 기본 모양은 회색의 글자로, 배경색이 하얀색 또는 밝은 색이면 보기에 괜찮습니다. 하지만 배경색이 어두운 색이거나 화려한 색이면 회색 글자가 어울리지 않을 수 있습니다. placeholder는 ::placeholder 선택자로 선택하여 꾸밀 수 있습니다.
표와 관련된 정렬에는 표 정렬, 셀 안의 내용 가로 정렬, 셀 안의 내용 세로 정렬이 있습니다. 기본 모양은 다음과 같습니다. 표(table) : 왼쪽 정렬 제목 셀(th) 안의 내용 가로 정렬 : 가운데 정렬 내용 셀(td) 안의 내용 세로 정렬 : 왼쪽 정렬 셀 안의 내용 세로 정렬 : 가운데 정렬
CSS 사용자 지정 속성을 :root와 특정 구성 요소에 선언하고 var()로 색과 간격을 재사용하는 방법을 설명합니다. 상속 범위, 값이 없을 때의 대체값, 유효하지 않은 값의 처리도 예제로 확인합니다.
CSS / Tutorial / position의 값이 fixed일 때 가운데 정렬하는 방법
position의 fixed를 이용하여 요소의 위치를 고정시킬 수 있습니다. 예를 들어 상단에 고정되는 메뉴바를 만들 때 사용합니다. 그런데, fixed를 하면 요소가 한쪽으로 치우칩니다. 만약 가운데에 위치시키고 싶다면 어떻게 할까요? transform 속성으로 해결할 수 있습니다.