최대의 영향을 미치고 눈에 띄도록 CSS로 테이블 스타일 지정하는 방법

HTML 테이블 스타일링: CSS를 활용한 시각적 향상 및 접근성 개선

HTML (Hypertext Markup Language) 및 XML과 같은 마크업 언어를 사용하는 과정에서, 다양한 속성과 태그를 접하게 됩니다. 특히 테이블은 대량의 데이터를 사용자에게 효과적으로 전달하는 데 있어 매우 중요한 요소입니다. 테이블을 통해 사용자는 긴 글을 읽지 않고도 핵심 정보, 결론 또는 결과를 빠르게 파악할 수 있습니다. CSS를 활용하면 테이블의 디자인을 다듬고 시각적으로 매력적으로 만들 수 있습니다.

다음은 애플리케이션에서 테이블 스타일을 지정해야 하는 몇 가지 중요한 이유입니다.

시각적 매력 증진: 기본적인 테이블은 단조롭고 지루해 보일 수 있습니다. 스타일링을 통해 테이블의 외관을 개선하고 사용자에게 더욱 매력적인 경험을 제공할 수 있습니다.
접근성 향상: 스타일링은 장애가 있는 사용자가 테이블을 더욱 쉽게 접근하고 이해할 수 있도록 돕습니다.
가독성 개선: 다양한 스타일링 기법을 활용하여 테이블 데이터를 사용자가 쉽게 스캔하고 이해할 수 있도록 만들 수 있습니다.
브랜딩 강화: 애플리케이션 전체에 걸쳐 테이블에 일관된 글꼴과 색상을 적용함으로써 브랜드 아이덴티티를 강화하고 일관된 사용자 경험을 제공할 수 있습니다.
검색 엔진 최적화: 테이블 형식으로 데이터를 구성하는 것은 검색 엔진 최적화(SEO)에도 도움이 될 수 있습니다. 검색 엔진이 정보를 더 잘 이해하고 웹사이트 순위를 높이는 데 기여합니다.

HTML을 이용한 기본 테이블 생성

HTML에서 테이블이 어떻게 작동하는지 알아보기 위해, 프로젝트 폴더를 생성하고 필요한 파일을 준비해 보겠습니다. `index.html` 파일에는 HTML 코드를, `styles.css` 파일에는 CSS 스타일 코드를 저장할 것입니다.

시작하려면 다음과 같은 명령어를 사용하세요.

mkdir table-styling-project

cd table-styling-project

touch index.html styles.css

이제 기본적인 프로젝트 폴더가 준비되었습니다. 여기서는 다양한 프로그래밍 언어, 사용 사례, 그리고 이러한 언어를 사용하는 회사들의 예시를 테이블로 나타내 보겠습니다.

HTML 테이블을 생성하려면 모든 데이터를 <table>...</table> 태그로 감싸야 합니다.

`index.html` 파일에 HTML 문서의 기본 구조를 만들고, <body> 태그 안에 다음 코드를 추가합니다.

<table>
  <tr>
    <th>언어</th>
    <th>주요 용도</th>
    <th>사용 기업</th>
  </tr>
  <tr>
    <td>Java</td>
    <td>웹 앱, 안드로이드 앱, 엔터프라이즈 애플리케이션</td>
    <td>Google, Amazon, LinkedIn</td>
  </tr>
  <tr>
    <td>Python</td>
    <td>데이터 과학, 웹 개발, 자동화</td>
    <td>Google, Dropbox, Spotify</td>
  </tr>
  <tr>
    <td>JavaScript</td>
    <td>웹 개발, 프론트엔드 개발, 브라우저 스크립팅</td>
    <td>PayPal, Facebook, Netflix</td>
  </tr>
    <tr>
    <td>C++</td>
    <td>게임 개발, 시스템 프로그래밍, 임베디드 시스템</td>
    <td>Tesla, Microsoft, Adobe</td>
  </tr>
   <tr>
    <td>Swift</td>
    <td>iOS 개발, macOS 개발</td>
    <td>Apple</td>
  </tr>
   <tr>
    <td>PHP</td>
    <td>웹 개발, 서버 사이드 스크립팅, CMS</td>
    <td>WordPress, Wikipedia, Yahoo</td>
  </tr>
</table>

위 테이블 코드를 살펴보면 <table> 태그 안에 여러 다른 태그들이 사용된 것을 볼 수 있습니다. 여기에는 <tr>, <th>, <td> 태그가 포함됩니다.

각 태그의 역할은 다음과 같습니다.

<tr>: 테이블 행을 나타내며, <table> 요소 안에 위치합니다. <tr> 태그는 하나 이상의 <th> 또는 <td> 요소를 포함할 수 있습니다.
<th>: 테이블 헤더를 나타내며, <tr> 태그 내에 위치합니다. 기본적으로 내용은 굵게 표시됩니다.
<td>: 테이블 데이터를 나타내며, 테이블 셀의 내용을 설명합니다.

위 코드를 브라우저에서 렌더링하면 기본적인 테이블이 화면에 표시됩니다.

테이블 스타일링에 사용되는 CSS 속성

기본적인 테이블은 작동하지만, 시각적으로 더 매력적인 테이블을 만들기 위해 CSS를 활용할 수 있습니다. 앞에서 생성한 `styles.css` 파일을 사용할 차례입니다. 먼저 CSS 파일을 HTML 파일에 연결해야 합니다. <head> 섹션에 다음 코드를 추가합니다.

<link rel="stylesheet" href="styles.css">

이제 테이블을 스타일링할 준비가 되었습니다. 다음은 테이블 스타일링에 주로 사용되는 몇 가지 CSS 속성입니다.

1. 테두리(Border)

테이블 셀 주변에 테두리를 추가할 수 있습니다. 이를 위해 <th> 및 <td> 요소에 `border` 속성을 정의합니다. 예를 들어 테두리를 2px로 설정하고 색상을 지정할 수 있습니다.

th, td {
    border: 2px solid orange;
}

위 코드를 적용하면 다음과 같이 각 셀에 테두리가 표시됩니다.

2. 테두리 병합(Border Collapse)

위의 이미지에서 볼 수 있듯이 셀의 테두리 사이에 공간이 있습니다. `border-collapse` 속성은 테이블의 인접 셀이 테두리를 공유해야 하는지 여부를 결정합니다.

셀이 테두리를 공유하도록 하려면 CSS 파일에 다음 코드를 추가하십시오.

table {
    border-collapse: collapse;
}

코드를 적용하면 다음과 같이 셀들이 테두리를 공유하게 됩니다.

셀의 테두리를 분리하고 싶다면 CSS 파일에 다음 코드를 추가하십시오.

table {
    border-collapse: separate;
}

이 코드를 적용하면 다음과 같이 셀들이 분리된 테두리를 갖게 됩니다.

3. 테두리 간격(Border Spacing)

`border-spacing` 속성을 사용하여 테이블의 셀 사이에 약간의 공간을 만들 수 있습니다. 이 속성은 `border-collapse: separate` 속성과 함께 사용해야 합니다.

다음과 같이 테이블 클래스 내부에 규칙을 설정합니다.

table {
  border-collapse: separate;
  border-spacing: 3px;
}

셀 테두리 사이의 간격이 3px로 설정됩니다.

결과적으로 테이블은 다음과 같이 나타납니다.

4. 테이블 레이아웃(Table Layout)

`table-layout` 속성은 테이블의 속성을 결정합니다. 항상 같은 너비를 갖는 테이블을 만들 수도 있고, 내용에 따라 너비가 변경되는 테이블을 만들 수도 있습니다.

비슷한 크기의 셀을 만들고 싶다면 `table-layout` 속성을 `fixed`로 설정할 수 있습니다.

table-layout: fixed;

테이블 클래스의 최종 코드는 다음과 같습니다.

table {
  border-collapse: collapse;
  border-spacing: 3px;
  table-layout: fixed;
}

만약 셀의 너비가 내용에 따라 자동으로 조절되기를 원한다면 `table-layout` 속성을 `auto`로 변경할 수 있습니다.

table-layout: auto;

CSS 코드의 최종 테이블 클래스는 다음과 같습니다.

여기서 마지막 셀에 "MailChimp 등"이라는 단어를 추가한 것을 주목해주세요. 테이블 레이아웃이 유연해졌기 때문에 마지막 행의 셀이 나머지 셀보다 더 넓어진 것을 확인할 수 있습니다.

지금까지는 테이블 전체에 대한 스타일링을 다루었습니다. 이제 행, 셀, 헤더의 배경색, 글꼴, 텍스트 정렬 속성을 변경하여 개별 클래스에 집중할 수 있습니다.

5. 배경색(Background Color)

테이블 첫 번째 행의 배경색을 변경할 수 있습니다. 이를 위해 `:first-child` 의사 클래스 선택자를 사용합니다.

CSS 코드에 다음 코드를 추가하세요.

tr:first-child {
    background-color: yellowgreen;
}

변경된 코드는 다음과 같이 나타납니다.

6. 글꼴(Font)

테이블의 특정 행, 열 또는 셀의 글꼴 스타일이나 크기를 변경할 수 있습니다.

글꼴 스타일을 변경하기 위해 페이지의 마지막 열(사용하는 회사)의 내용을 대상으로 합니다.

td:last-child 클래스 선택자를 사용하여 이 열의 내용을 기울임꼴로 표시합니다. CSS 파일에 다음 코드를 추가할 수 있습니다.

td:last-child {
  font-style: italic;
}

페이지를 새로 고침하면 최종 출력은 다음과 같습니다.

또한 첫 번째 열의 글꼴 색상과 크기를 변경하여 더욱 독특하게 만들 수 있습니다.

CSS 파일에 다음 코드를 추가하십시오.

tr td:first-child {
    color: red;
    font-size: x-large;
    font-weight: bolder;
}

페이지를 렌더링하면 첫 번째 열(언어)의 내용이 더 큰 글꼴 크기로 빨간색에 굵게 표시된 것을 확인할 수 있습니다.

테이블 반응형 만들기

우리가 만든 테이블은 작은 화면에서 제대로 반응하지 않을 수 있습니다. Chrome 개발자 도구 등을 사용하여 코드가 반응형인지 테스트해 볼 수 있습니다.

다양한 접근 방식이 있지만, 여기서는 한 가지 방법만 다루겠습니다.

다음 단계를 따르세요.

코드에서 <table> 요소의 너비를 설정합니다.

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

셀에서 긴 단어가 잘리지 않도록 `td` 및 `th`에 `word-break` 속성을 설정합니다.

th, td {
  border: 2px solid orange;
  word-break: break-word;
}

테이블 스타일링 모범 사례

CSS는 매우 재미있을 수 있습니다. 특히 익숙해지면 더욱 그렇습니다. 테이블을 스타일링할 때 최상의 결과를 얻기 위한 몇 가지 모범 사례를 소개합니다.

외부 스타일 시트 사용: 인라인 스타일을 사용할 수도 있었지만, 외부 스타일 시트를 선택했습니다. 이를 통해 여러 테이블에서 스타일을 재사용하여 개발 시간을 단축할 수 있습니다.
단순하게 유지: 테이블 스타일링에 너무 깊이 빠져 과도하게 꾸미는 것을 피해야 합니다. 항상 간단한 디자인을 유지하고 테이블을 쉽게 스캔하고 읽을 수 있도록 만들어야 합니다.
테두리 추가: 테이블을 읽고 스캔하는 데 도움이 되므로 테두리를 사용하는 것이 좋습니다.
일관된 색상 사용: 웹 페이지에 여러 테이블이 있다면 일관된 색상과 글꼴을 사용하는 것이 중요합니다. 브랜드 색상을 사용하면 브랜드 인지도를 높일 수 있습니다.
반응형 테이블 만들기: 최종 사용자의 기기 화면 크기를 항상 알 수 없으므로 테이블이 반응형으로 작동하도록 해야 합니다.
캡션 사용: 캡션을 사용하여 테이블이 무엇에 대한 것인지 간단하게 설명하는 것이 좋습니다.
간격 사용: 여러 테이블이 연속해서 표시되는 경우 간격을 추가하고 각 테이블에 맞는 캡션을 지정하여 구별해야 합니다.

결론

이제 기본적인 HTML 테이블을 만들고 스타일을 지정하는 방법을 익혔습니다. HTML과 CSS는 광범위한 주제이므로 모든 것을 다루지는 못했지만, 데이터 특성에 따라 크고 작은 테이블을 만들 수 있게 되었습니다. CSS와 UI를 개선하는 방법에 대해 더 자세히 알아보고 싶다면 CSS 치트 시트를 확인해 보시기 바랍니다.