제목:

홀짝에 따라 다르게 표시되는 CSS

날짜: Posted on

이 포스트에서는 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를 구현할 수 있습니다.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다