WordPress에서 반응형 테이블을 만드는 방법

게시 됨: 2023-02-12

표는 많은 양의 정보를 정리된 방식으로 우아하게 표시하는 데 도움이 되는 웹사이트 디자인 요소입니다. 기존 컴퓨터 디스플레이에서는 잘 작동하지만 모바일 장치에서는 종종 바람직하지 않은 경험을 만들 수 있습니다.

다행스럽게도 보다 응답성이 뛰어난 테이블을 생성할 수 있는 몇 가지 실행 가능한 솔루션이 있습니다. 이러한 반응형 디자인 방식을 사용하면 사이트의 사용자 경험(UX)을 개선할 수 있습니다. 즉, 방문자는 사용 중인 장치 유형에 관계없이 테이블의 데이터를 보다 쉽게 ​​보고 액세스할 수 있습니다.

이 문서에서는 테이블을 반응형으로 만드는 것이 무엇을 의미하는지 살펴보겠습니다. 그런 다음 WordPress에서 반응형 테이블을 만드는 두 가지 방법을 살펴보겠습니다. 바로 다이빙하자!

목차
1. 반응형 테이블이란 무엇입니까?
2. 반응형 테이블 만드는 방법(플러그인 없이)
2.1. 1단계: 반응형 CSS에 대한 표 서식 지정
2.2. 2단계: CSS에 사용자 지정 태그 추가
2.3. 3단계: WordPress에서 테이블의 응답성 테스트
3. 플러그인으로 반응형 테이블 만드는 방법
3.1. 1단계: 플러그인 다운로드
3.2. 2단계: 데이터 입력
3.3. 3단계: 표 서식 지정
3.4. 4단계: 테이블 테스트
4. WP 엔진이 사이트 응답성을 유지하도록 도와줍니다.

반응형 테이블이란 무엇입니까?

일반적으로 테이블의 목표는 이해하기 쉬운 방식으로 많은 데이터를 표시하는 것입니다. 그러나 모바일 장치에서 테이블을 보려고 하면 문제가 발생할 수 있습니다. 이것은 테이블 행이 종종 화면 표시가 처리할 수 있는 것보다 더 넓은 열이기 때문에 발생합니다.

반응형 테이블을 만들 때 기본적으로 원래 데이터 테이블에 대한 규칙 집합을 만드는 것입니다. 이러한 규칙은 디스플레이 크기에 따라 중단점을 결정할 수 있습니다. 즉, 사용자가 설정된 중단점보다 작은 장치에서 테이블에 액세스하면 테이블 레이아웃이 화면 크기에 맞게 다시 포맷되어 응답합니다.

반응형 테이블은 일반적으로 스크롤 막대를 추가하거나 정보를 쌓아 형식을 다시 지정할 수 있습니다. 테이블을 읽을 수 없게 만들 수 있으므로 화면 크기가 변경될 때 셀의 정보를 축소하고 함께 채우는 것을 원하지 않습니다. 다행히 반응형 디자인은 구현하기가 그리 어렵지 않습니다.

반응형 테이블 만드는 방법(플러그인 없이)

워드프레스에서 반응형 테이블을 만드는 방법에는 기본적으로 두 가지가 있습니다. 먼저 플러그인 없이 작업을 완료하는 방법을 살펴보겠습니다.

여기에는 약간의 코딩 지식, 특히 CSS(Cascading Style Sheets)에 대한 이해가 필요합니다. 또한 안정적으로 작동하는 테이블을 디자인할 때까지 라이브 웹 사이트가 아닌 스테이징 또는 개발 환경에서 작업하는 것이 좋습니다.

1단계: 반응형 CSS에 대한 표 서식 지정

이 예에서는 특정 중단점에서 형식을 다시 지정하도록 샘플 테이블의 데이터에 지시할 것입니다. 경우에 따라 단순히 테이블에 스크롤 막대를 추가할 수 있지만 실제로는 테이블의 데이터를 그룹화하여 수평 스크롤이 필요 없는 보다 읽기 쉬운 형식으로 표시할 것입니다.

가로 스크롤은 종종 컨텍스트에서 벗어난 열의 데이터를 보고 있음을 의미할 수 있기 때문에 이것은 훌륭한 접근 방식입니다.

이 표를 더 잘 작동시키려면 먼저 표 형식이 제대로 지정되었는지 확인해야 합니다. 블록 편집기를 사용하여 테이블을 생성하는 경우 정상적으로 수행한 다음 CSS가 제대로 작동하는지 확인하기 위해 <thead> 및 <tbody> 속성을 ​​추가할 수 있습니다.

테이블을 추가하면 HTML 편집기를 사용하여 서식을 조정할 수 있습니다. <thead></thead> 속성은 모든 열 헤더를 래핑해야 합니다. 마찬가지로 <tbody></tbody> 특성에서 모든 후속 테이블 데이터를 래핑합니다.

다음 단계에서 CSS 태그를 추가하면 스타일 시트에서 테이블의 각 열에 대한 헤더로 표시할 내용과 본문 또는 셀 내용을 이해할 수 있습니다.

2단계: CSS에 사용자 지정 태그 추가

다음으로 사용자 정의 CSS 코드 스니펫과 WordPress Twenty Nineteen 테마를 사용할 것입니다. 이 테마는 기본 코드의 일부로 꽤 반응이 빠른 디자인을 가지고 있지만 CSS 조정을 통해 더 발전할 것입니다.

모든 테마가 다르기 때문에 반응형 테이블 디자인을 성공적으로 구현하려면 테마의 구조를 철저히 이해하고 싶을 것입니다. 일부 테마에는 추가 JavaScript 라이브러리가 필요할 수 있습니다.

예를 들어 Appearance > Customize > Additional CSS 로 이동하여 다음과 같은 사용자 정의 CSS 코드를 추가할 수 있습니다.

@media screen and (max-width: 600px) {

 table {width:100%;}

 thead {display: none;}

 tr:nth-of-type(2n) {background-color: inherit;}

 tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;}

 tbody td {display: block; text-align:center;}

 tbody td:before {

 content: attr(data-th);

 display: block;

 text-align:center;

 }

 }

자신의 코드를 편집기에 붙여넣은 후 변경 사항을 적용하려면 게시를 선택해야 합니다.

3단계: WordPress에서 테이블의 응답성 테스트

WordPress에는 세 가지 화면 크기에서 콘텐츠를 테스트할 수 있는 유용한 화면 테스트 기능이 내장되어 있습니다. 맞춤 CSS를 추가한 화면 하단에서 태블릿 또는 휴대전화 아이콘을 클릭하여 표의 새로운 스타일을 테스트할 수 있습니다.

이 예에서는 CSS와 함께 작동하는 데 필요한 모든 HTML 특성을 포함하는 간단한 테이블을 이미 만들었습니다. CSS의 중단점은 600px로 설정되어 있지만 필요에 따라 변경할 수 있습니다.

스크롤 막대를 추가하거나 테이블의 데이터를 압축하는 대신 추가한 CSS는 데이터를 모바일 친화적인 형식으로 재구성합니다. 이를 통해 모바일 장치의 사용자는 세로로 스크롤하고 나머지 관련 셀과 관련하여 테이블의 데이터를 볼 수 있습니다.

플러그인으로 반응형 테이블을 만드는 방법

테마의 코드나 CSS를 사용자 지정하는 것이 불편하다면 다른 옵션이 있습니다. 웹 사이트를 위한 반응형 테이블 디자인을 만드는 데 도움이 되는 여러 WordPress 플러그인을 사용할 수 있습니다.

1단계: 플러그인 다운로드

시작하려면 플러그인을 선택해야 합니다. 반응형 테이블을 디자인하기 위한 몇 가지 옵션이 있으므로 시작할 수 있도록 몇 가지를 강조하겠습니다.

  • Ninja Tables : 반응형 테이블을 구축하기 위한 WordPress의 최고의 플러그인으로 분류되며 선택할 수 있는 100개 이상의 테이블 스타일이 제공됩니다.
  • wpDataTables : 이것은 프리미엄 버전의 무료 플러그인이지만 라이트 버전에는 풍부한 대화형 표와 차트를 만들기 위한 기능이 포함되어 있습니다.
  • WP Responsive Table : 작은 화면에서 가로로 스크롤되는 반응형 표를 쉽게 만들 수 있는 간단하고 무료인 플러그인입니다.

이 예제의 나머지 부분에서는 Ninja Tables를 사용하여 WordPress에서 반응형 데이터 테이블을 만드는 방법을 보여줍니다.

2단계: 데이터 입력

플러그인을 설치하고 활성화하면 테이블 생성으로 바로 이동할 수 있습니다. NinjaTables > 모든 테이블 > 테이블 추가 로 이동할 수 있습니다.

여기에서 처음부터 새 테이블을 추가하거나 파일에서 테이블을 가져올 수 있습니다. 테이블 추가 옵션을 사용하여 처음부터 테이블을 만들 것입니다. 그런 다음 테이블의 제목과 설명을 입력해야 합니다.

여기에도 몇 가지 다른 옵션이 있습니다. 예를 들어 WooCommerce 상점을 설정하는 경우 해당 정보를 사용하여 WooCommerce 테이블을 만들 수 있습니다.

정보를 추가하면 추가를 클릭하여 테이블을 생성합니다. 그런 다음 데이터 입력을 시작해야 합니다. 열 추가를 선택하여 테이블 구조를 설정할 수 있습니다.

열을 만들기 위해 완료해야 할 몇 가지 필드가 있습니다. 여기에는 열의 헤더 이름과 포함된 데이터 유형이 포함됩니다. 반응형 중단점을 설정할 수도 있습니다.

테이블이 다양한 장치에 어떻게 반응하는지 결정하는 여러 옵션 중에서 선택하려면 항상 모든 장치에 표시를 클릭하여 메뉴에 액세스할 수 있습니다.

열을 만든 후 데이터 추가 를 선택하면 NinjaTables에서 테이블에 여러 항목을 빠르게 추가할 수 있는 간편한 양식을 제공합니다.

여러 항목을 입력해야 하는 경우 계속 추가 옵션을 선택된 상태로 둘 수 있습니다. 완료되면 창을 닫고 표 편집 화면으로 돌아갈 수 있습니다.

3단계: 표 서식 지정

이제 정보가 포함된 테이블이 있으므로 NinjaTable의 설정 및 스타일 옵션을 탐색할 수 있습니다. 테이블 편집 창 내에서 상단 탭과 화면 오른쪽 아래에서 더 많은 설정에 액세스할 수 있습니다.

번갈아 나타나는 표 행 색상, 텍스트 중앙 정렬, 데이터 숨기기 등 표의 스타일과 모양을 맞춤설정할 수 있는 다양한 옵션이 있습니다.

4단계: 테이블 테스트

NinjaTable을 사용하면 테이블을 편집하는 동안 테이블의 응답성을 쉽게 테스트할 수 있습니다. 테이블 디자인 탭에는 화면 반응성을 테스트하기 위한 세 가지 옵션이 있습니다.

데스크탑 , 태블릿 또는 모바일 을 선택하여 해당 종류의 장치에서 테이블이 어떻게 보이는지 볼 수 있습니다.

생성하는 각 테이블에는 단축 코드도 함께 제공됩니다. 또한 블록 편집기 메뉴의 서식 섹션에서 찾을 수 있는 NinjaTable 블록을 사용하여 웹 사이트 콘텐츠에 테이블을 쉽게 추가할 수 있습니다.

WP 엔진이 사이트 응답성을 유지하도록 도와줍니다.

적절한 리소스에 액세스할 수 있다면 견고한 반응형 디자인을 사용하는 웹 사이트를 구축하는 것이 어려울 필요가 없습니다.

여기 WP Engine에서는 고객에게 최고의 디지털 경험을 제공할 수 있기를 바랍니다. 다음 프로젝트를 위한 다양한 WordPress 호스팅 계획 및 개발자 솔루션을 확인하십시오!