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

  • 릴리스 버전: Australia
  • 업데이트 날짜 2026년 03월 12일
  • 소요 시간: 2분
  • 캔버스의 모든 요소 또는 특정 요소에 대한 HTML 및 CSS 소스 코드를 수정합니다.

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

    특징 및 역량

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

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

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

    중요 고려 사항

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

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

      사용자가 셀의 HTML p 요소를 사용하여 CSS 규칙을 정의하지만 이 규칙은 페이지 전체에 적용됩니다.
    • 다른 브라우저는 다양한 복사/붙여넣기 동작을 나타낼 수 있습니다. Ctrl+V를 눌러도 컨텐츠가 예상대로 복제되지 않으면 구성요소 도구 모음에서 복제 아이콘을 클릭합니다.
    • 복사하여 붙여넣은 컨텐츠가 스타일(예: 글꼴)을 유지하지 않고 설정을 조정해도 도움이 되지 않으면 스타일 필드 옆에 있는 "x"를 클릭하여 스타일을 지운 다음 스타일을 설정합니다.스타일 필드 옆의 "x"를 클릭하여 사용자 지정 스타일을 제거합니다.
    • 붙여넣은 컨텐츠가 저장되는 방식으로 다르게 표시되는 경우 HTML 위생 검사에서 일부 스크립트 태그를 제거했기 때문일 수 있습니다.