HTML과 JavaScript를 이용한 테이블 행 색상 구분

본 내용은 " [인터넷프로그래밍실습] HTML을 사용하여 테이블을 생성, 생성된 테이블에서 홀수열의 색상과 짝수열의 색상을 다르게 출력하는 자바스크립트 코드 " 의 원문 자료에서 일부 인용된 것입니다. 2023.10.05

문서 내 토픽

• 1. HTML 테이블 구조

  HTML의 table, tr, th, td 요소를 사용하여 테이블을 생성합니다. thead와 tbody를 구분하여 헤더 행과 데이터 행을 명확히 하며, 각 행(tr)은 여러 개의 셀(td)로 구성됩니다. 이 예제에서는 3개의 열을 가진 테이블을 생성하고 헤더 행과 3개의 데이터 행을 포함합니다.

• 2. CSS 스타일링

  CSS의 클래스 선택자를 사용하여 홀수 행과 짝수 행에 다른 배경색을 적용합니다. even-row 클래스는 파란색(#cce6ff), odd-row 클래스는 빨간색(#ffcccc)의 배경색을 지정합니다. 이를 통해 시각적으로 행을 구분하여 가독성을 향상시킵니다.

• 3. JavaScript DOM 조작

  JavaScript의 getElementById와 getElementsByTagName 메서드를 사용하여 테이블 요소에 접근합니다. for 루프를 통해 각 행을 순회하면서 행의 인덱스를 확인하고, 모듈로 연산자(%)를 사용하여 홀수/짝수를 판별한 후 해당 클래스를 동적으로 할당합니다.

• 4. 동적 클래스 할당

  JavaScript의 className 속성을 사용하여 런타임에 HTML 요소에 CSS 클래스를 동적으로 할당합니다. 첫 번째 행(헤더)은 건너뛰고 데이터 행부터 시작하여 각 행의 인덱스에 따라 적절한 클래스를 부여하는 방식으로 구현됩니다.

Easy AI와 토픽 톺아보기

• 1. HTML 테이블 구조

  HTML 테이블은 표 형식의 데이터를 구조화하는 데 매우 효과적입니다. table, thead, tbody, tr, td 등의 요소를 올바르게 사용하면 의미론적으로 명확한 마크업을 작성할 수 있습니다. 특히 스크린 리더 사용자를 위해 접근성을 고려한 테이블 구조가 중요합니다. 그러나 레이아웃 목적으로 테이블을 사용하는 것은 피해야 하며, 순수하게 데이터 표현에만 사용해야 합니다. 현대 웹 개발에서는 CSS Grid나 Flexbox가 레이아웃에 더 적합하지만, 실제 표 데이터에는 테이블이 여전히 최선의 선택입니다.

• 2. CSS 스타일링

  CSS는 웹 디자인의 핵심으로, 시각적 표현과 사용자 경험을 결정합니다. 현대 CSS는 Flexbox, Grid, 변수, 미디어 쿼리 등 강력한 기능을 제공하여 반응형 디자인을 쉽게 구현할 수 있습니다. 그러나 CSS의 복잡성이 증가하면서 유지보수가 어려워질 수 있으므로, BEM, SMACSS 같은 방법론을 따르는 것이 좋습니다. 성능 최적화를 위해 불필요한 스타일을 제거하고 효율적인 선택자를 사용하는 것도 중요합니다. CSS 전처리기나 CSS-in-JS 솔루션도 대규모 프로젝트에서 유용합니다.

• 3. JavaScript DOM 조작

  JavaScript DOM 조작은 동적 웹 애플리케이션을 만드는 필수 기술입니다. querySelector, getElementById 등으로 요소를 선택하고, textContent, innerHTML, appendChild 등으로 콘텐츠를 수정할 수 있습니다. 그러나 과도한 DOM 조작은 성능 저하를 초래하므로, 배치 업데이트나 DocumentFragment 사용을 고려해야 합니다. 현대 프레임워크(React, Vue, Angular)는 DOM 조작을 추상화하여 더 효율적으로 관리합니다. 직접 DOM을 조작할 때는 메모리 누수를 방지하고 이벤트 리스너를 적절히 정리하는 것이 중요합니다.

• 4. 동적 클래스 할당

  동적 클래스 할당은 JavaScript로 요소의 스타일을 변경하는 강력한 방법입니다. classList.add, classList.remove, classList.toggle을 사용하면 깔끔하게 클래스를 관리할 수 있습니다. 이 방식은 CSS와 JavaScript의 관심사를 분리하여 유지보수성을 높입니다. 조건부 스타일링, 상태 관리, 애니메이션 트리거 등에 매우 유용합니다. 그러나 많은 클래스를 동시에 조작할 때는 성능을 고려해야 하며, 클래스 이름 충돌을 피하기 위해 네이밍 컨벤션을 따르는 것이 좋습니다. 대규모 프로젝트에서는 CSS-in-JS나 컴포넌트 기반 접근이 더 효과적일 수 있습니다.