CSS 의사클래스 HTML table 태그에 활용해 보기(nth-child)

CSS 의사클래스에 대한 내용을 책에서 본 기억이 있는데 나름 유용할 것 같다는 생각에 class, id 선택자 방식과 의사클래스를 이용해 HTML 태그를 선택할 수 있는 코드를 나누어서 간단히 샘플 코드를 작성해 보았습니다.

CSS 의사클래스는 프로그래밍 계산 결과 방식과 비슷한 형태로 HTML 태그를 선택할 수 있다는 장점으로 인해 불필요한 코드를 작성하지 않아도 되기에 코드의 가독성이 더 좋아 보입니다. 단점은 CSS 의사클래스를 자세히 모르는 사람들에겐 코드의 가독성을 더 떨어뜨리는 결과가 있을 수도 있어 보입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS 의사클래스</title>
    <style type="text/css">
		div { text-align: center; }
		table { width: 100%; }
		td, th {border: 1px solid black;}
		/* tr 태그 자식 요소들이 홀수인 경우 2n = tr 태그안 요소 중, +1 첫번째로 나오는 요소 선택 1,3,5,7,9...   */
		#good tr:nth-child(2n+1){
			background-color: blanchedalmond;
		}
		/* tr 태그 자식 요소들이 짝수인 경우 2n = tr 태그안 요소 중, +0 첫번째로 나오는 요소 선택 0,2,4,6,8,10...*/
		#good tr:nth-child(2n+0){
			background-color: brown;
		}

		#bad .even{
			background-color: blanchedalmond;
		}

		#bad .odd{
			background-color: brown;
		}
    </style>
  </head>
  <body>
  <div>
	<h2>CSS 의사클래스를 사용하지 않을땐 class를 HTML 태그에 넣어 줘야 하는데 코드를 수정해야할 부분이 많아진다.</h2>
	<table id="bad">
		<caption>인적 정보</caption>
		<tr class="even">
			<th>이름</th>
			<td>성별</td>
			<td>나이</td>
			<td>사는지역</td>
		</tr>
		<tr class="odd">
			<td>홍길동</td>
			<td>남</td>
			<td>28</td>
			<td>조선</td>
		</tr>
		<tr class="even">
			<td>아이유</td>
			<td>여</td>
			<td>25</td>
			<td>서울</td>
		</tr>
		<tr class="odd">
			<td>김호랑</td>
			<td>동물</td>
			<td>14</td>
			<td>사파리</td>
		</tr>
		<tr class="even">
			<td>타노스</td>
			<td>우주인</td>
			<td>??</td>
			<td>우주</td>
		</tr>
	</table>

	<h2>HTML 태그에 id나 class를 붙이지 않고도 처리 가능해 HTML 태그가 깔끔하다.</h2>
	<table id="good">
		<caption>인적 정보</caption>
		<tr>
			<th>이름</th>
			<td>성별</td>
			<td>나이</td>
			<td>사는지역</td>
		</tr>
		<tr>
			<td>홍길동</td>
			<td>남</td>
			<td>28</td>
			<td>조선</td>
		</tr>
		<tr>
			<td>아이유</td>
			<td>여</td>
			<td>25</td>
			<td>서울</td>
		</tr>
		<tr>
			<td>김호랑</td>
			<td>동물</td>
			<td>14</td>
			<td>사파리</td>
		</tr>
		<tr>
			<td>타노스</td>
			<td>우주인</td>
			<td>??</td>
			<td>우주</td>
		</tr>
	</table>
  </div>
</html>

결과

자주 사용하지 않았던 CSS 의사클래스를 어디에서 활용하면 좋을지 생각하며 예제 코드를 간단히 작성해 보았습니다. 활용하는 사람에 따라 기존보다 더 간단히 코드 작업을 마무리할 수 있어 보입니다. 대부분 DB에 데이터를 활용해 반복문을 이용해 생성하는 HTML 태그가 대부분이지만 CSS 의사클래스를 활용한다면 HTML 태그를 선택하기 위해 class, id 태그를 HTML을 넣지 않아도 되며 간혹 스타일을 편하게 적용하고자 불필요한 분기문을 추가로 작성하지 않아도 되니 기억해 놓고 잘 활용하면 좋을 것 같습니다.

저작자표시 비영리 변경금지

소스

CSS 의사클래스 HTML table 태그에 활용해 보기(nth-child)