서식 있는 컨텐츠 편집기에서 복사하여 붙여넣기

  • 릴리스 버전: Australia
  • 업데이트 날짜 2026년 03월 12일
  • 소요 시간: 3분

    • 캔버스의 요소에 대한 HTML 및 CSS 소스 코드를 복사하여 붙여넣습니다.

    요소의 CSS를 직접 편집 하여 스타일을 추가하거나 코드를 복사하여 붙여넣어 다른 소스에서 콘텐츠를 마이그레이션합니다.

    중요사항:
    2025년 5월 릴리스의 경우, 붙여넣은 컨텐츠에 배경색이 있는 경우 배경 이미지 스타일로 서식이 지정되지 않는 한 오른쪽 패널에 색상이 표시되지 않습니다. 배경은 콘텐츠에 배경색, 그라데이션 및 이미지를 추가하는 레이어 역할을 합니다. 오른쪽 패널에 색상을 표시하려는 경우 코드 편집 기능을 사용하여 붙여넣은 스타일을 background-color 에서 background-image CSS의 해당 값으로 조정할 수 있습니다.
    팁:
    색 불투명도 기능은 새로운 기능이며 이전 릴리스에서는 지원되지 않습니다.

    제한

    • 브라우저의 기능적 차이로 인해 브라우저에 다른 복사-붙여넣기 동작이 표시될 수 있습니다.

    • 캔버스에서 구성요소를 복사하면 ctrl+v에서 예상대로 복제되지 않으므로 구성요소 도구 모음에 액세스해야 합니다.

    그림 1. 구성요소 도구 모음
    구성요소 도구 모음에서 추가 선택 항목을 제공합니다.
    주:
    캔버스에 색상 불투명도를 추가할 수도 있습니다. 그러나 제한 사항 중 하나는 색상이 rgb 또는 hex 대신 rgba() 로 포맷 될 때 복사 / 붙여 넣기가 모든 스타일을 전송하지 않는다는 것입니다.

    • 강조 표시된 텍스트 붙여넣기는 텍스트 구성요소 내에서 지원되지 않으므로 Chrome에서 작동하는 동작이 Firefox 또는 Safari에서 작동하지 않을 수 있습니다.

    • 붙여넣은 콘텐츠의 색상을 16진수 코드 형식으로 추가하는 것이 좋습니다(불 투명도를 추가하기 위해 #rrggbbaa하거나 #rrggbb 사용할 수 있음).

      • 해시 태그(#)가 필요합니다.
      • 16진수 코드는 파운드 기호 또는 해시 태그(#)로 시작하고 색상 불투명도가 없는 경우 6자, 색상 불투명도가 있는 경우 8글자가 뒤따릅니다.
      • 8자 구문은 코드 편집 기능을 통해 요소 CSS에 추가된 경우에만 작동합니다. 오른쪽 패널의 색상 입력 필드는 6자 구문만 허용합니다.
    • 코드 편집 모달을 열어 구성요소의 rgba() 색상을 16진수 코드로 조정하여 스타일을 반영할 수도 있습니다.

    특정 스타일이 적용되지 않거나(예: 글꼴 이름) 붙여넣은 콘텐츠에 대한 설정 조정이 작동하지 않는 경우 먼저 글꼴 이름 옆에 있는 "x"를 선택하여 스타일을 지웁니다.

    그림 2. 글꼴 이름
    글꼴 설정을 조정할 수 있습니다.
    • 붙여넣은 콘텐츠가 예상대로 표시되지 않거나 잘못 동작하는 경우 큰 섹션 대신 작은 청크를 한 번에 복사해 보세요.
    • • 붙여넣은 콘텐츠가 저장 및 다시 로드 전후에 다르게 표시되는 경우 HTML 위생 검사에서 일부 스크립트 태그를 제거했기 때문일 수 있습니다.

    선택 취소된 영역

    • 분홍색 영역을 선택하면 캔버스에서 선택된 구성요소의 선택이 취소됩니다.

    • 녹색 영역을 선택하면 현재 구성요소가 선택된 상태로 유지됩니다.

    그림 3. 서식 있는 컨텐츠 편집기 캔버스
    선택한 색상 배경에 따라 작업을 결정할 수 있습니다.
    주:
    강조 표시된 텍스트 잘라내기 및 붙여넣기는 텍스트 구성요소 내에서 지원되지 않으며 브라우저 간 경험은 다르게 동작할 수 있습니다. Chrome에서 작동하는 동작이 Firefox 또는 Safari에서는 작동하지 않을 수 있습니다.

    추가 서식 있는 콘텐츠 작업 및 동작

    주:
    콘텐츠 관리자와 관리자는 이미지를 포함하여 선택한 캔버스 요소에 배경색을 적용할 수 있습니다. 사용 가능한 기능에는 단색 및 그라데이션 색상 사용과 색상 불투명도 조정이 포함됩니다. 이러한 설정은 캔버스 요소에 서식 있는 콘텐츠를 추가할 때 설정 스타일 탭의 오른쪽 패널에서 액세스할 수 있습니다.
    캔버스에 색상 불투명도를 추가하는 기능은 유용한 기능입니다. 유일한 제한 사항은 색상이 rgb 또는 hex 대신 rgba ()로 포맷 될 때 복사 및 붙여 넣기 기능 스타일이 다르다는 것입니다.
    • 16진수 코드 형식으로 색상을 추가합니다(불투명도를 추가하거나 #rrggbb 추가하려면 #rrggbbaa).
    • 코드 편집 모달을 열어 구성요소의 rgba() 색상을 16진수 코드로 조정하여 스타일을 반영합니다.
    • Color Opacity(색상 불투명도)는 그라데이션 및 색상 레이어 옵션을 표시합니다. 배경 이미지 레이어가 첫 번째이기 때문에 불투명도는 관련이 없습니다. 그라데이션은 기본적으로 FFFFFF 및 OOOOO입니다.

    • Background color to canvas 요소는 그라데이션, 색상 및 이미지에 대한 배경 옵션을 표시합니다. 토글을 켜고 배경 옵션을 선택합니다.

    주:
    구성요소를 선택하지 않으면 캔버스 끝에 컨텐츠가 붙여넣어집니다.
    • 구성요소를 선택하면 그 아래에 컨텐츠가 붙여넣어집니다.
    • 구성요소를 편집 중인 경우 다음과 같은 붙여넣기 동작이 발생합니다.
      • 소스가 일반 텍스트인 경우 컨텐츠가 현재 구성요소에 붙여넣어지고 붙여넣은 텍스트를 대상 스타일과 일치시킵니다.
      • 소스의 서식이 지정되면 최신 구성요소 아래에 추가됩니다.
      • 구성요소가 중첩된 구성요소(예: 탭, 아코디언 또는 행)를 활성화하는 경우 콘텐츠는 상위 컨테이너 내에 추가됩니다.
    • 캔버스 밖에서 선택할 때 구성요소의 선택을 취소하면 소스 서식을 사용하여 붙여넣을 수 있습니다.

    소스 코드 편집에 대한 자세한 내용은 서식 있는 컨텐츠 편집기에서 소스 코드 편집