CSS 테이블 스타일링

소개

이 랩에서는 HTML 테이블을 스타일링하는 데 사용되는 기본적인 CSS 속성을 배우게 됩니다. 기본적으로 HTML 테이블은 단순하며 읽기 어려울 수 있습니다. CSS 를 사용하면 기본 테이블을 잘 구성되고 시각적으로 매력적이며 이해하기 쉬운 데이터 표현으로 변환할 수 있습니다.

기본 HTML 테이블로 시작하여 점진적으로 스타일을 적용할 것입니다. 테두리 관리, 간격 추가, 헤더 스타일링 및 셀 내 텍스트 정렬 방법을 배우게 됩니다.

필요한 index.html 파일은 이미 생성되었습니다. 여러분의 과제는 테이블을 스타일링하기 위해 styles.css 파일에 CSS 코드를 작성하는 것입니다. 작업 공간의 "Web 8080" 탭에서 변경 사항을 실시간으로 미리 볼 수 있습니다.

테이블에 border-collapse collapse 설정

이 단계에서는 테이블 스타일링을 시작합니다. 기본적으로 HTML 테이블 셀은 자체적인 개별 테두리를 가지고 있어 두껍고 구식으로 보이는 "이중 테두리" 모양을 만들 수 있습니다. border-collapse 속성은 테이블 테두리가 분리될지 또는 단일 테두리로 합쳐질지를 제어합니다.

깔끔하고 단일 선 테두리를 만들기 위해 border-collapse를 collapse로 설정할 것입니다.

먼저 왼쪽 파일 탐색기에서 styles.css 파일을 엽니다. 파일에 다음 CSS 규칙을 추가합니다.

table {
  border-collapse: collapse;
}

코드를 추가한 후 파일을 저장합니다. 아직 테두리가 보이지는 않겠지만, 이 속성은 다음 단계를 위해 필수적입니다. "Web 8080" 탭으로 전환하여 라이브 미리보기를 볼 수 있지만, 이 단계에서는 시각적 변화가 최소화될 것입니다.

th 및 td 에 border 1px solid black 적용

이제 테이블이 축소된 테두리 모델을 사용하도록 설정했으므로, 헤더 셀 (th) 과 데이터 셀 (td) 에 실제 테두리를 추가해 보겠습니다. 쉼표로 구분된 선택자를 사용하여 두 요소를 한 번에 대상으로 지정할 수 있습니다.

이 단계에서는 테이블의 모든 셀에 1px의 solid black 테두리를 추가합니다.

기존 table 규칙 아래에 있는 styles.css 파일에 다음 CSS 규칙을 추가합니다.

th,
td {
  border: 1px solid black;
}

파일을 저장하고 "Web 8080" 탭으로 전환합니다. 이제 각 테이블 셀 주위에 깔끔한 단일 선 테두리가 표시되어야 합니다.

테이블 셀에 padding 8px 사용

이제 테이블에 테두리가 생겼지만, 셀 안의 내용이 가장자리에 닿아 있어 답답해 보입니다. padding 속성을 사용하여 내용과 셀 테두리 사이에 공간을 추가하여 가독성을 높일 수 있습니다.

이 단계에서는 모든 테이블 셀에 8px의 패딩을 추가합니다.

styles.css 파일에서 기존 th, td 규칙을 수정하여 padding 속성을 포함시킵니다.

th,
td {
  border: 1px solid black;
  padding: 8px;
}

파일을 저장한 후 "Web 8080" 탭을 다시 확인합니다. 이제 셀이 더 커지고 텍스트 주위에 편안한 간격이 생긴 것을 알 수 있습니다.

테이블 헤더 행에 background-color 추가

테이블 헤더를 데이터 행과 구분하기 위해 다른 배경색을 지정하는 것은 일반적인 관행입니다. 이렇게 하면 열 제목과 내용을 시각적으로 분리할 수 있습니다.

이 단계에서는 헤더 셀 (th) 에 연한 회색 배경색을 추가합니다.

styles.css 파일에서 th 요소만 대상으로 하는 새로운 CSS 규칙을 추가합니다.

th {
  background-color: #f2f2f2;
}

파일을 저장하고 "Web 8080" 탭에서 결과를 확인합니다. 이제 테이블의 헤더 행에 뚜렷한 배경색이 적용되어 쉽게 식별할 수 있습니다.

데이터 셀에 text-align left 적용

텍스트 정렬은 테이블의 가독성에 매우 중요합니다. 기본적으로 헤더 셀 (th) 은 가운데 정렬되고, 데이터 셀 (td) 은 왼쪽 정렬됩니다. td 요소의 기본값은 왼쪽 정렬이지만, 모든 브라우저에서 일관된 렌더링을 보장하기 위해 명시적으로 설정하는 것이 좋은 습관입니다.

이 단계에서는 데이터 셀의 텍스트 정렬을 명시적으로 왼쪽으로 설정합니다.

styles.css 파일에서 td 선택자에 대한 새로운 CSS 규칙을 추가합니다.

td {
  text-align: left;
}

파일을 저장합니다. 이는 기본 동작이므로 "Web 8080" 탭에서 시각적인 변화를 느끼지 못할 수도 있지만, 스타일시트가 의도된 디자인에 대해 더 견고하고 명확해졌습니다. 이것으로 테이블의 기본 스타일링이 완료되었습니다.

요약

실습을 완료하신 것을 축하드립니다! 기본적인 CSS 속성을 사용하여 평범한 HTML 테이블을 스타일이 적용된 전문적인 모습으로 성공적으로 변환했습니다.

이 실습에서는 다음을 배웠습니다.

• border-collapse: collapse;를 사용하여 테이블에 깔끔하고 단일한 테두리를 만드는 방법
• 테이블 헤더 (th) 및 데이터 (td) 셀에 border를 적용하는 방법
• padding 속성을 사용하여 셀에 내부 간격을 추가하는 방법
• background-color를 설정하여 테이블 헤더를 구분하는 방법
• text-align을 사용하여 셀 내 텍스트의 가로 정렬을 제어하는 방법

이러한 기술은 웹에서 표 형식 데이터를 효과적으로 표시하는 데 필수적입니다.