이 포스트에서는 CSS로 홀수와 짝수에 따라 다르게 표시되는 기법을 서술합니다.
사무실에서 다루는 문서의 표나 각종 요금 고지서 등의 표를 보면 홀수줄과 짝수줄의 색이 다르게 입혀져 있는 것을 볼 수 있습니다. (참고로 마이크로소프트 엑셀 등 스프레드시트 프로그램에도 이 기능이 있습니다.) 이 기능은 CSS로도 구현할 수 있습니다.
다음 코드를 봅시다.
p:nth-child(2) {
color: blue;
}
이 CSS 코드는 2번째로 등장하는 <p> … </p> 요소의 색을 파란색으로 만드는 코드입니다. 2번째가 아닌 나머지 <p> … </p> 요소들은 이 코드의 영향을 받지 않습니다.
p:nth-child(even) {
color: blue;
}
이렇게 수정하면 짝수 번째(2번째, 4번째, 6번째 …)로 등장하는 <p> … </p> 요소들의 색이 전부 파란색으로 바뀝니다. 이를 응용하면 표의 홀수줄과 짝수줄의 색을 다르게 만드는 CSS 코드를 작성할 수 있습니다.
다음은 CSS를 이용하여 표에서 홀수줄과 짝수줄의 색을 다르게 한 예입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Table CSS Sample (Even and odd)</title>
<style type="text/css">
/* Basic table style */
table { border-collapse: collapse; }
table, th, td { border: 1px solid; }
th, td { padding: 4px; }
/* Additional style */
thead tr { background-color: #cccccc; }
td.center { text-align: center; }
td.right { text-align: right; }
tbody tr:nth-child(even) { background-color: #ffd4e9; }
tbody tr:nth-child(odd) { background-color: #d4e9ff; }
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>상품명</th><th>수량</th><th>단가</th><th>총액</th>
</tr>
</thead>
<tbody>
<tr>
<td>새우깡</td>
<td class="center">60</td> <td class="right">1,000</td> <td class="right">60,000</td>
</tr>
<tr>
<td>양파링</td>
<td class="center">80</td> <td class="right">1,200</td> <td class="right">96,000</td>
</tr>
<tr>
<td>꼬깔콘</td>
<td class="center">60</td> <td class="right">1,300</td> <td class="right">78,000</td>
</tr>
<tr>
<td>허니버터칩</td>
<td class="center">30</td> <td class="right">1,500</td> <td class="right">45,000</td>
</tr>
<tr>
<td>도리토스</td>
<td class="center">40</td> <td class="right">1,300</td> <td class="right">52,000</td>
</tr>
<tr>
<td>포카칩</td>
<td class="center">30</td> <td class="right">1,300</td> <td class="right">39,000</td>
</tr>
</tbody>
</table>
</body>
</html>
여기서 강조 표시된 17번 줄과 18번 줄 부분이 홀수줄과 짝수줄의 색을 다르게 입히는 코드입니다. (17번 줄이 짝수 줄 색 입히는 코드, 18번 줄이 홀수 줄 색 입히는 코드입니다.) 이를 실행해 보면,
이렇게 됩니다.
이와 같이 홀짝에 따라 다른 모양으로 표시되는 CSS를 구현할 수 있습니다.