반복되는 HTML 요소에 홀수 번째와 짝수 번째를 구분하여 스타일을 적용하려면 CSS의 nth-child(odd)와 nth-child(even) 선택자를 사용하면 됩니다. 이 방법은 별도의 JavaScript 로직 없이 순수 CSS만으로 리스트 항목이나 카드 목록에 교차 색상을 손쉽게 적용할 수 있어 매우 실용적입니다.
예제 코드
아래는 과목 목록에서 홀수 번째 항목은 파란색, 짝수 번째 항목은 보라색으로 표시하는 완전한 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>홀수·짝수 nth-child 예제</title>
</head>
<body>
<section class="subjects">
<article class="subjectName">MongoDB</article>
<article class="subjectName">Javascript</article>
<article class="subjectName">Java</article>
<article class="subjectName">MySQL</article>
</section>
<style>
.subjectName:nth-child(odd) {
color: blue;
}
.subjectName:nth-child(even) {
color: purple;
}
</style>
</body>
</html>동작 원리
:nth-child(odd)는 부모 요소 안에서 1번째, 3번째, 5번째처럼 홀수 위치에 있는 자식 요소를 선택하고, :nth-child(even)은 2번째, 4번째, 6번째처럼 짝수 위치에 있는 자식 요소를 선택합니다. 위 예제에서는 MongoDB와 Java가 파란색으로, Javascript와 MySQL이 보라색으로 표시됩니다.
실행 방법
위 코드를 index.html과 같은 이름의 파일로 저장한 뒤, VS Code 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 'Open with Live Server' 옵션을 선택하면 브라우저에서 바로 결과를 확인할 수 있습니다.
출력 결과
