복사하여 서식 있는 컨텐츠 편집기에 붙여넣기
캔버스에 있는 요소에 대한 HTML 및 CSS 소스 코드를 복사하여 붙여넣습니다.
요소의 CSS 를 직접 편집하여 스타일을 추가하거나 코드를 복사하여 붙여넣어 다른 소스에서 콘텐츠를 마이그레이션합니다.
중요사항:
2025년 5월 릴리스의 경우 붙여넣은 콘텐츠에 배경색이 있는 경우 배경 이미지 스타일링으로 서식이 지정되지 않는 한 오른쪽 패널에 해당 색상이 표시되지 않습니다. 배경은 콘텐츠에 배경색, 그라데이션 및 이미지를 추가하는 레이어 역할을 합니다. 오른쪽 패널에 색상을 표시하려면 코드 편집 기능을 사용하여 붙여넣은 스타일을 background-color 에서 background-image CSS의 해당 값으로 조정할 수 있습니다.
팁:
색상 불투명도 기능은 새로운 기능이며 이전 릴리스에서는 지원되지 않습니다.
제한
- 브라우저는 브라우저 기능 차이로 인해 다른 복사-붙여넣기 동작을 나타낼 수 있습니다.
-
캔버스에서 구성요소를 복사하면 ctrl+v에서 예상대로 복제되지 않으므로 구성요소 도구 모음에 액세스해야 합니다.
주:
캔버스에 색상 불투명도를 추가할 수도 있습니다. 그러나 제한 사항 중 하나는 색상이 rgb 또는 hex 대신 rgba()로 형식이 지정될 때 복사/붙여넣기가 모든 스타일을 전송하지 않는다는 것입니다.
-
강조 표시된 텍스트 붙여넣기는 텍스트 구성요소 내에서 지원되지 않으므로 Chrome에서 작동하는 동작이 Firefox 또는 Safari에서 작동하지 않을 수 있습니다.
-
붙여넣은 콘텐츠의 색상을 16진수 코드 형식으로 추가하는 것이 좋습니다(불투명도를 추가하려면 #rrggbbaa 하거나 #rrggbb 사용할 수 있음).
- 해시 태그(#)가 필요합니다.
- 16진수 코드는 파운드 기호 또는 해시 태그(#)로 시작하고 색상 불투명도가 없는 경우 6글자, 색상 불투명도가 있는 경우 8글자가 옵니다.
- 8자 구문은 코드 편집 기능을 통해 요소 CSS에 추가된 경우에만 작동합니다. 오른쪽 패널의 색상 입력 필드에는 6자 구문만 허용됩니다.
- 편집 코드 모달을 열어 구성요소의 rgba() 색상을 16진수 코드로 조정하여 스타일링을 반영할 수도 있습니다.
특정 스타일이 적용되지 않았거나(예: 글꼴 이름) 붙여넣은 콘텐츠의 설정을 조정해도 작동하지 않는 경우 먼저 글꼴 이름 옆에 있는 "x"를 선택하여 스타일을 지워보십시오.
- 붙여넣은 콘텐츠가 예상대로 표시되지 않거나 잘못 동작하는 경우 큰 섹션 대신 작은 청크를 한 번에 복사해 보십시오.
- • 붙여넣은 컨텐츠가 저장 및 다시 로드 전과 후에 다르게 표시되는 경우 HTML 위생 검사에서 일부 스크립트 태그를 제거했기 때문일 수 있습니다.
선택 취소된 영역
-
분홍색 영역을 선택하면 캔버스에서 선택된 구성요소의 선택이 취소됩니다.
-
녹색 영역을 선택하면 현재 구성요소가 선택된 상태로 유지됩니다.
주:
강조 표시된 텍스트 잘라내기 및 붙여넣기는 텍스트 구성요소 내에서 지원되지 않으며 브라우저 간에 환경이 다르게 작동할 수 있습니다. Chrome에서 작동하는 동작이 Firefox 또는 Safari에서는 작동하지 않을 수 있습니다.
추가 서식 있는 콘텐츠 작업 및 동작
캔버스에 색상 불투명도를 추가하는 기능은 사용할 수 있는 유용한 기능입니다. 유일한 제한 사항은 색상이 rgb 또는 hex 대신 rgba() 로 형식이 지정될 때 복사 및 붙여넣기 함수 스타일이 다르다는 것입니다.
- 16진수 코드 형식으로 색상을 추가합니다(
#rrggbbaa불투명도를 추가하거나#rrggbb). - 코드 편집 모달을 열어 구성요소의 rgba() 색상을 16진수 코드로 조정하여 스타일링을 반영합니다.
주:
구성요소를 선택하지 않으면 컨텐츠가 캔버스 끝에 붙여넣어집니다.
- 구성요소를 선택하면 구성요소 아래에 콘텐츠가 붙여 넣습니다.
- 구성요소를 편집 중인 경우 다음과 같은 붙여넣기 동작이 발생합니다.
- 소스가 일반 텍스트인 경우 컨텐츠가 현재 구성요소에 붙여넣고 붙여넣은 텍스트를 대상 스타일링과 일치시킵니다.
- 소스의 형식이 지정된 경우 최신 구성요소 아래에 추가됩니다.
- 구성요소가 중첩된 구성요소(예: 탭, 아코디언 또는 행)를 활성화하면 컨텐츠가 상위 컨테이너 내에 추가됩니다.
- 캔버스 밖에서 선택 시 구성요소가 선택 취소되면 소스 서식으로 붙여넣기를 사용할 수 있습니다.
소스 코드 편집에 대한 자세한 내용은 다음을 참조하십시오. 서식 있는 컨텐츠 편집기에서 소스 코드 편집