레거시 문서 편집기에서 새 편집기로 마이그레이션할 때 표 스타일 문제가 발생할 수 있습니다.

이 문서에서는 새 편집기로 마이그레이션한 후 일반적인 문제를 해결하는 방법을 보여줍니다.

이 문서에서 다루는 주제는 다음과 같습니다.

  • 에서 테이블 줄 바꿈을 수정하는 방법 <figure>요소
  • 테이블 헤더 및 헤더 수준 형식 문제를 해결하는 방법
  • 테이블 형식 및 맞춤 문제를 해결하는 방법

에서 테이블 줄 바꿈을 수정하는 방법 <figure>요소

새 문서 편집기에서 사용하는 <figure>태그를 사용하여 다양한 브라우저와 플랫폼에서 테이블에 일관된 스타일과 기능을 제공할 수 있습니다. 이 동작은 새 편집기의 테이블 플러그인 아키텍처의 일부입니다. 제한된 테이블 높이 또는 원하지 않는 형식 문제와 같은 스타일 문제가 발생할 수 있습니다. 이 섹션에서는 이런 일이 일어나는 이유와 이를 방지하거나 해결하는 방법에 대해 설명합니다.

중요: 중요한 변경 작업을 하기 전에 CSS와 콘텐츠를 백업하세요.

새 문서 편집기는 <figure class="table">요소를 포함하고 사용자 지정 클래스를 무시하는 인라인 스타일을 적용할 수 있습니다.

이 문제를 해결하려면 표 스타일을 복원하세요.

  1. 새 마크업을 대상으로 CSS 선택기를 업데이트합니다.
    • figure.table table { /* your table styles */ }
    • figure.table th, figure.table td { /* cell styles */ }
  2. 사용 !important필요한 경우 인라인 스타일을 무시할 수 있습니다.
  3. 전체 사이트에 적용하기 전에 중복 문서에서 변경 내용을 테스트하세요.

테이블 줄 바꿈 문제를 방지하거나 해결하려면 다음과 같이 하세요.

  • 헬프 센터 CSS를 검토하여 <figure class="table">요소에 max-height 또는 오버플로우 설정과 같은 제한적인 스타일이 없습니다.
  • 스타일 문제가 발생하면 대상으로 CSS를 업데이트하세요. <figure class="table">다음과 같이 표시됩니다.
    figure.table {
    max-height: none;
    overflow: visible;
    }
  • 콘텐츠를 마이그레이션하는 경우 제거하지 마세요. <figure> 태그를 추가할 수 있습니다. 콘텐츠를 편집할 때 새 문서 편집기에서 다시 추가할 수 있습니다.
참고: 이 안내는 일반적인 제품 지식을 기반으로 하며 원래 티켓에 명시적으로 존재하지 않습니다. 새 문서 편집기는 에 의존합니다. <figure>기능 지원 및 일관성을 위해 설계되었습니다. 스타일 문제를 해결하기 위해 편집기 출력 HTML을 변경하려고 시도하는 것보다 헬프 센터 CSS를 사용자 지정하는 것이 좋습니다.

테이블 헤더 및 헤더 수준 형식 문제를 해결하는 방법

마이그레이션 후 일반적인 형식 문제:

  • 표 머리글의 배경 색이나 스타일을 잃을 수 있음
  • 표 헤더 셀이 H2 텍스트로 잘못 변환될 수 있음
  • 기본 또는 사용자 지정 CSS의 변경으로 인해 H2, H3 크기가 다르게 나타날 수 있습니다.
  • 편집기가 테이블 변경 내용을 예상대로 저장하지 못할 수도 있습니다.

마이그레이션 후 테이블 헤더가 올바르게 표시되도록 하려면 다음과 같이 하세요.

  1. 헬프 센터 테마에서 <thead>또는 <th>요소, 예:
    thead { background-color: #f5f5f5; }
    th { background-color: #f5f5f5; }
  2. 기존 항목 유지 또는 업데이트 <th>일관성을 유지하기 위한 스타일

새 문서 편집기에서 테이블 헤더를 설정하려면 다음과 같이 하세요.

  1. 문서에서 표를 선택한 다음 맨 위 행을 클릭합니다.
  2. 로우드롭다운에서헤더 로우옵션을 사용 설정합니다.
    • 헤더 로우 옵션이 없으면 수동으로 <thead>및 <th>요소를 추가하거나 새 문서 편집기 설정에서 사용 가능한 플러그인이나 편집기 옵션을 확인하세요.

H2 또는 H3 스타일이 올바르지 않게 나타나는 경우

헤더 수준 검토 및 업데이트:

  1. 새 문서 편집기에서 문서 편집
  2. 편집기가 H2로 변환한 테이블 헤더 텍스트를 선택하세요.
  3. 형식을 표 머리글이나 일반 텍스트 등 올바른 스타일로 변경합니다.

CSS로 헤더 수준 크기 조정:

  1. 지식 관리자로 이동 > 디자인 사용자 지정> 사용자 지정 > 코드 편집> style.CSS테마 사용자 지정
  2. H2, H3 및 유사한 스타일이 원하는 크기와 일치하도록 CSS를 업데이트하세요.
  3. 게시를 클릭하기 전에미리 보기기능을 사용하여 최종 형식을 확인하세요.

편집기가 테이블 변경 내용을 저장하지 않거나변경 내용 없음과 같은 오류가 표시되는경우:

  1. 문제 재현 시도
  2. HTTP 보관(HAR) 파일 및 화면 캡처 캡처
  3. 도움이 더 필요한 경우 Zendesk 고객 지원팀에 문의하세요.

자세한 내용은 다음 문서를 참조하세요.

  • 새 문서 편집기로 전환할 때 표 스타일링 수정하기
  • 헬프 센터 문서에 표 추가 및 서식 지정하기
팁: 업데이트할 문서가 많은 경우에는 일괄 변경 스크립트나 마이그레이션 도구를 고려하여 헤더 수준과 스타일을 표준화하고 일괄 변경을 하기 전에 항상 문서를 백업하세요. 새 문서 편집기 구현에 특정 테이블 기능이 없는 경우에는 사용 가능한 플러그인이 있는지 확인하거나 플랫폼 관리자에게 문의하여 개선 사항에 대해 문의하세요.

테이블 형식 및 맞춤 문제를 해결하는 방법

마이그레이션 후 일반적인 문제:

  • 너비 및 테두리에 대한 사용자 지정 표 스타일은 이전과 같이 적용되지 않습니다.
  • 일관되지 않은 텍스트 크기 및 셀 공간
  • 마이그레이션 중 변경된 표 클래스 및 테두리 스타일
  • 헤더 행 분할 <thead>및 <tbody>, 이로 인해 스타일 불일치가 발생합니다.

이러한 문제를 해결하려면 다음과 같이 하세요.

  • 표 요소를 대상으로 헬프 센터 CSS 업데이트
    .article-body td, .article-body th {
    padding: 20px;
    font-size: 16px;
    }
  • 테이블 맞춤 수정
    • 새 문서 편집기 테이블 맞춤 옵션을 사용합니다. 새 문서 편집기에는 레거시 편집기보다 적은 수의 기능이 있을 수 있습니다.
    • 매번 표를 가운데에 맞추거나 정렬이 작동하지 않으면 CSS를 추가하거나 조정하세요.
      .article-body table {
      margin-left: 0 !important;
      margin-right: auto !important;
      }
  • 표 셀 공간 및 맞춤 관리
    • 테마 CSS가 해당 특성을 제어할 수 있도록 셀 공간을 설정하는 불필요한 인라인 스타일을 제거하세요.
    • 테마 CSS에서 원하는 셀 공간 정의
  • 표 클래스, 테두리 및 헤더 조정
    • 새 테이블 클래스나 변경된 테이블 클래스에 대한 CSS 규칙을 업데이트합니다. 예를 들어, .nonItemList
    • 모든 헤더 행이 내부에 있는지 확인하세요. <thead>적절한 스타일링을 위해
    • 다음에서 헤더 행 이동 <tbody>받는 사람 <thead>필요에 따라
  • 변경 내용 테스트 및 확인
    • 새 문서 편집기에서 영향을 받는 문서를 미리 보고 서식을 확인하세요.
    • 수동 검토가 필요할 수 있으므로 사용자 지정 표가 있는 각 문서에 대해 이 단계를 반복합니다.

자세한 내용은새 문서 편집기로 전환하기를 참조하세요.

번역 고지 사항: 본 문서는 콘텐츠에 대한 기본적인 이해를 제공하기 위해 자동 번역 소프트웨어를 사용하여 번역되었습니다. 정확한 번역을 제공하고자 합당한 노력을 기울였으나 Zendesk는 번역의 정확성을 보장하지 않습니다.

번역된 문서에 포함된 정보의 정확성과 관련하여 질문이 있으시면 문서의 공식 버전인 영문 버전을 참조하시기 바랍니다.

Zendesk 제공