서식 있는 컨텐츠 편집기에서 소스 코드 편집

  • 릴리스 버전: Washingtondc
  • 업데이트 날짜 2024년 02월 01일
  • 읽기1분
  • 캔버스의 모든 요소 또는 특정 요소에 대한 HTML 및 CSS 소스 코드를 수정합니다.

    HTML 요소를 사용하여 레이아웃을 빌드하거나, 요소의 CSS를 직접 편집하여 캔버스 인터페이스에서 사용할 수 없는 스타일을 추가하거나, 코드를 복사하여 붙여넣어 다른 소스에서 콘텐츠를 마이그레이션할 수 있습니다.행 주위에 테두리를 추가하고 머리글 글꼴 사용자 지정

    특징 및 역량

    포털 보안 보장
    코드 편집 창에서 적용 을 클릭하면 코드 편집기가 인스턴스를 손상시키는 데 사용될 수 있는 HTML 태그를 제거합니다. 자세한 내용은 HTML sanitizer 문서를 참조하십시오.
    중요한 코드 식별
    삭제하지 말아야 할 경우 편집 창에서 CSS 조각이 빨간색으로 강조 표시됩니다. 이는 포털 테마의 일부이거나 여러 요소가 해당 코드를 사용하는 설정을 나타냅니다.
    또한 다음 HTML 요소 중 하나에서 참조하는 CSS 규칙을 삭제하면 코드 편집기에서 CSS 규칙을 복원합니다.
    • 캔버스
    • 구분선
    • 버튼
    • 링크 블록
    불필요한 코드 제거
    변경 내용을 저장하면 코드 편집기에서 사용하지 않는 CSS 규칙을 제거합니다.
    반대로, 제거하려는 CSS 규칙을 코드 편집기에서 복원하면 해당 CSS 코드 블록을 강조 표시하고 CSS 제거 단추를 클릭하여 코드 편집기를 재정의합니다.
    그림 1. CSS 제거 단추 사용 예제

    다음 비디오에서 사용자는 delete 키를 사용하여 CSS 규칙을 삭제하려고 하지만 시스템은 코드를 복원합니다. 그런 다음 사용자가 코드를 강조 표시하고 CSS 제거를 클릭하면 코드가 성공적으로 제거됩니다.

    사용자가 delete 키를 사용하여 CSS 규칙을 삭제하지 못했기 때문에 강조 표시된 코드를 제거하는 CSS 제거 버튼을 사용합니다.
    주:
    이 기능은 기본적으로 사용할 수 없습니다. 관리자는 코드 편집 속성을 활성화해야 합니다. Content Publishing과 함께 설치되는 속성 참조

    중요 고려 사항

    • 사용자 정의 HTML 및 CSS를 추가하면 디자인이 손상될 수 있습니다. 이 기능을 사용할 때는 주의해서 진행하십시오. 서식 있는 컨텐츠 편집기는 코드 편집기의 변경 내용을 추적하지 않으므로 실행 취소 단추는 코드 변경 내용을 안정적으로 되돌리지 않습니다.
    • 의도하지 않은 결과를 초래할 수 있으므로 HTML 요소(예: div 또는 p)를 사용하여 CSS 규칙을 정의하는 것은 권장하지 않습니다.
      그림 2. HTML 요소를 사용하여 CSS 규칙을 정의할 때 예기치 않은 결과의 예

      다음 예제에서 사용자는 셀의 p 요소에 대한 CSS 규칙을 정의합니다. 그러나 페이지 미리 보기에서 스타일 규칙은 모든 텍스트 상자와 바닥글의 p 요소에 적용됩니다.

      사용자는 셀에 HTML p 요소를 사용하여 CSS 규칙을 정의하지만 규칙은 페이지 전체에 적용됩니다.