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 요소가 나오게 하는 예제입니다. div 요소 안에 텍스트가 있지만, 텍스트가 아닌 이미지 등 다른 것도 가능합니다.
CSS 규칙의 선택자, 속성, 값과 선언을 예제로 설명합니다. 여러 선언과 주석을 쓰는 방법, 문법 오류를 확인하는 순서도 배울 수 있습니다.
웹페이지에 출력하는 문자열의 길이는 서버단에서 조절하는 게 보통입니다. 하지만, 어떤 경우에는 그게 불가능할 수 있습니다. 이미 전송 받은 문자열을 잘라야 하는 상황이 생길 수 있습니다. CSS를 이용하여 문자열의 일부만 보여주는 방법을 소개해드립니다.
CSS에서 표 전체 너비와 열 너비, 셀의 안쪽 여백을 조절하는 방법을 설명합니다. 내용이 길거나 화면이 좁을 때 표가 넘치는 이유와 가로 스크롤 처리 방법도 보여줍니다.
CSS / Tutorial / ul, ol 가운데 정렬하는 방법
목록 자체가 아니라 목록 안의 내용만 가운데 정렬할 때는 text-align 속성을 사용합니다. 목록 요소 자체를 가운데 정렬할 때는 margin 속성을 사용합니다. 만약 요소의 내용에 맞게 자동으로 크기가 정해지게 하고 싶으면 display 속성을 사용합니다.
CSS에서 !important는 특정 스타일 규칙이 다른 모든 스타일 규칙보다 우선 적용되도록 강제하는 데 사용됩니다. 이 키워드는 일반적인 스타일 우선 순위를 무시하고, 해당 스타일이 다른 어떤 스타일보다도 높은 우선순위를 가지도록 합니다.
CSS / Tutorial / 선택자(Selector)
CSS의 요소·클래스·ID·속성 선택자가 어떤 HTML 요소를 고르는지 예제로 설명합니다. 여러 클래스를 가진 요소, 선택자가 일치하지 않을 때, ID와 클래스의 사용 기준도 다룹니다.
배경색은 background-color 속성으로 만듭니다. table, tr, th, td, thead, tbody, tfoot에 적용할 수 있습니다. 다음 표를 기본으로 하고, 배경색을 여러 곳에 추가해보겠습니다.
CSS / Tutorial / 마우스 호버 효과 / 서서히 길어지는 선 만드는 방법
마우스를 올리면 선이 그려지는 효과를 만들어봅니다. 다음과 같이 사각형을 만듭니다. :before를 이용하여 선이 시작하는 위치를 정합니다. position 속성으로 선 위에 선을 그릴 수 있도록 설정합니다.
CSS / Tutorial / 마우스 호버 효과 / 이미지 확대하는 방법
이미지에 마우스를 올렸을 때 이미지가 확대되는 효과를 만들어보겠습니다. 다음과 같이 이미지가 들어간 간단한 HTML 문서를 만듭니다.