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의 border-radius 속성으로 원 또는 타원을 만들 수 있습니다. HTML 문서에 다음과 같이 내용이 없는 요소를 하나 만듭니다. 적절히 크기를 정하여 정사각형을 만들고, 배경색을 넣습니다. border-radius 속성을 추가하고, 값에 50%를 넣으면 원이 만들어집니다.
CSS / Tutorial / 마우스 호버 효과 / 다른 이미지 보여주는 방법
이미지에 마우스를 올렸을 때 다른 이미지가 나타나는 효과를 CSS로 만들어보겠습니다. 다음과 같이 이미지 두 개를 넣고 div로 감쌉니다.
웹페이지에 출력하는 문자열의 길이는 서버단에서 조절하는 게 보통입니다. 하지만, 어떤 경우에는 그게 불가능할 수 있습니다. 이미 전송 받은 문자열을 잘라야 하는 상황이 생길 수 있습니다. CSS를 이용하여 문자열의 일부만 보여주는 방법을 소개해드립니다.
글의 완급 조절, 내용 전환 등을 위해 구분선을 사용하는 경우가 많습니다. 선은 여러 가지 방식으로 만들 수 있는데, 보기 좋게 꾸미는 것은 CSS로 합니다. 아래는 div 태그에 모양을 입혀서 구분선을 만드는 몇 가지 예제입니다.
CSS의 border 속성으로 삼각형을 만들 수 있습니다. 여러 형태의 삼각형을 만들고, 그 삼각형을 회전하는 방법을 알아봅니다.
CSS / Tutorial / 양쪽 배분(균등 분할) 정렬 방법
문단 정렬을 양끝으로 꽉차게 하는 경우가 있습니다. 한글에서는 배분 정렬, 워드에서는 균등 분할이라고 합니다. 일반적인 문단에서는 거의 사용하지 않고, 표에서 제목을 넣을 때 많이 사용합니다.
CSS 규칙의 선택자, 속성, 값과 선언을 예제로 설명합니다. 여러 선언과 주석을 쓰는 방법, 문법 오류를 확인하는 순서도 배울 수 있습니다.
CSS에서 표 전체 너비와 열 너비, 셀의 안쪽 여백을 조절하는 방법을 설명합니다. 내용이 길거나 화면이 좁을 때 표가 넘치는 이유와 가로 스크롤 처리 방법도 보여줍니다.
CSS / Tutorial / 상속(inheritance)
CSS 속성은 상속하는 속성과 상속하지 않는 속성이 있습니다. 상속하는 속성은 자식 요소에 영향을 미칩니다. 상속하지 않는 속성은 자식 요소에 영향을 미치지 않습니다.
CSS / Tutorial / 마우스 호버 효과 / 텍스트 나오게 하는 방법
CSS로 특정 요소에 마우스를 올렸을 때 보이지 않던 특정 요소가 보이게 할 수 있습니다. 아래는 문단에 마우스를 올렸을 때 div 요소가 나오게 하는 예제입니다. div 요소 안에 텍스트가 있지만, 텍스트가 아닌 이미지 등 다른 것도 가능합니다.