웹사이트 간 복제 및 삽입

이 교육 세션 동안 귀하는 다음을 이해하게 됩니다:

1. 웹사이트 간 복제 및 삽입 방법
2. 클래스 이름과 스타일의 충돌을 방지하기 위한 전략
3. 상호 작용 이름과 작업의 충돌을 피하기 위한 접근 방식
4. 예외 및 특수 사례를 해결하는 방법

웹사이트 간 복제 및 삽입 방법

귀하의 웹사이트에서 요소나 요소 그룹을 복제하여 다른 사이트에 삽입할 수 있습니다. 모든 기본 요소, 디자인, 리소스, 구성 및 기능은 유지됩니다.

다른 웹사이트의 요소와 모듈을 활용하려면:

1. Designer에서 초기 사이트(복제하려는 사이트)에 액세스합니다.
2. 다음을 사용하여 요소를 복제합니다. 명령 + 씨 (맥) 또는 제어 + 씨 (윈도우)
3. Designer에서 두 번째 웹사이트에 접속하고 삽입하려는 요소를 선택하세요.
4. 다음을 사용하여 요소에 삽입하십시오. 명령 + V (맥) 또는 제어 + V (윈도우)

다음을 활용하여 삽입 과정을 되돌릴 수도 있습니다. 명령 + 지 (맥) 또는 제어 + 지 (윈도우).

중대한: 읽기 전용 모드에서는 웹사이트에서 복제가 불가능합니다. 

문제 해결

"기본 클립보드 데이터를 읽을 수 없습니다" 또는 "클립보드가 비어 있습니다"라는 메시지가 표시되면 다음을 확인하세요.

• 읽기 전용 모드가 아닌 Designer의 라이브 사이트에서 요소를 복제하고 있습니다.
• 장치의 기본 복사/붙여넣기 기능을 재정의하는 시스템 기본 설정이 없습니다. 구체적으로, 명령 + 씨 그리고 명령 + V (맥) 또는 컨트롤 + C 그리고 컨트롤 + V (Windows) 기본 기능은 유지되며 사용자 정의 바로가기로 변경되지 않습니다. 이러한 바로가기에 사용자 지정 기능이 할당되어 있는 경우 웹 사이트 간 복제 및 삽입을 원하는 경우 해당 바로가기를 제거하세요.

클래스 이름과 스타일의 충돌을 방지하기 위한 접근 방식

충돌을 일으키는 원본 사이트와 대상 사이트에 유사한 클래스가 있는 경우 이를 관리하기 위한 몇 가지 전술이 있습니다.

동일한 클래스 이름, 다양한 스타일

원본 웹 사이트와 대상 웹 사이트의 클래스가 동일한 이름을 공유하지만 서로 다른 스타일을 갖는 시나리오에서 Webflow는 숫자를 추가하여 삽입된 요소의 클래스 이름을 변경합니다(예: "클래스 이름 1", "클래스 이름 2" 등).

동일한 클래스 이름, 동일한 스타일

이름이 일치하는 클래스(추가된 숫자 무시(예: "클래스 이름", "클래스 이름 2", "클래스 이름 3" 등)))와 동일한 스타일이 두 사이트 모두에 존재하는 상황에서 Webflow는 삽입된 클래스를 대상 사이트의 기존 클래스. 이렇게 하면 대상 웹사이트에서 반복적인 스타일의 수가 줄어듭니다.

예를 들어 사이트 A의 "Button" 클래스가 있는 버튼을 사이트 B에 삽입한다고 가정합니다. 사이트 B에는 사이트 A의 "버튼"을 미러링하는 "Button 3"이라는 클래스가 있습니다. Webflow는 동일한 클래스를 인식하고 삽입된 버튼에 사이트 B의 “버튼 3” 클래스를 적용합니다.

스타일 충돌

다른 요소에 삽입하면 내부에 삽입한 상위 요소(예: 상위 요소)의 상속으로 인해 복사된 요소의 스타일에 영향을 미칠 수 있습니다. 

복사된 요소가 이전에 텍스트 정렬(예: 중앙 정렬된 텍스트)을 사용하여 가운데 정렬된 요소 내에 있었지만 수신자 요소에 하위 요소가 오른쪽으로 정렬되는 대조 스타일이 있는 경우 붙여넣은 요소는 삽입 시 오른쪽 정렬됩니다. .

상호 작용 이름 및 작업의 충돌을 방지하기 위한 접근 방식

Webflow는 동일한 상호 작용을 병합하려고 노력하지만 복잡성이 발생할 수 있습니다. 다음은 상호 작용에서 갈등을 해결하는 방법에 대한 자세한 조사입니다.

요소 활성화

상호 작용 패널의 위쪽 부분에서는 요소와 상호 작용할 때(예: 마우스 오버 또는 클릭) 애니메이션을 시작하는 요소 활성화를 추가할 수 있습니다.

중복된 요소에 연결하면 이러한 활성화가 콘텐츠를 붙여넣은 사이트에 통합됩니다.

동일한 이름, 서로 다른 동작

대상 사이트에 동일한 상호 작용이 있는 경우 이름 붙여넣는 것과 동일하지만 다른 행위, 중복을 나타내기 위해 붙여넣은 상호 작용의 이름에 숫자 접미사가 추가됩니다(예: "상호 작용 이름 2", "상호 작용 이름 3" 등).

동일한 이름, 동일한 작업

클래스 이름을 사용한 충돌 해결과 유사하게 대상 사이트의 상호 작용이 동일한 이름을 공유하는 경우 이름 추가된 숫자(예: "상호작용", "상호작용 2", "상호작용 3" 등)를 무시하고 붙여넣은 것과 동일하며 동일합니다. 행위, 우리는 그것들을 동일한 것으로 식별하고 붙여넣은 상호 작용을 대상의 기존 상호 작용과 결합합니다.

페이지 트리거

상호 작용 패널의 아래쪽 부분에는 페이지 트리거를 포함하여 페이지가 로드될 때와 같이 페이지 상태가 변경될 때 애니메이션을 시작할 수 있습니다.

요소 트리거와 달리 페이지 트리거는 요소를 사이트에 붙여넣을 때 포함되지 않습니다.

특수 사례 및 경계 시나리오

특정 시나리오에서는 복사된 특정 설정이나 콘텐츠가 대상 사이트로 전송되지 않을 수 있습니다.

맞춤형 글꼴

개인화된 글꼴이 포함된 텍스트 요소를 복사하여 붙여넣는 경우 새 사이트에 원래 글꼴이 설정되어 있지 않으면 기본 글꼴이 사용됩니다.

사용자 정의된 글꼴을 유지하려면 요소를 붙여넣기 전에 새 사이트에 추가하세요. 사용자 정의 글꼴 가져오기에 대해 자세히 알아보세요.

외부 콘텐츠 편집자의 콘텐츠

Microsoft Word, Google Docs 등과 같은 타사 콘텐츠 편집기는 Webflow CMS 내의 서식 있는 텍스트 필드에 복사할 때 콘텐츠를 손상시킬 수 있으므로 수동으로 형식을 다시 지정해야 합니다.

Google Docs는 추가 서식 없이 CMS의 서식 있는 텍스트 필드에 더 깔끔한 붙여넣기 옵션을 제공하여 다양한 콘텐츠 요소에 대한 적절한 마크다운을 보장합니다.

링크 연결 설정

다른 사이트의 요소를 붙여넣으면 해당 섹션을 동시에 붙여넣지 않는 한 사이트 내의 특정 페이지나 섹션으로 연결되는 링크 설정이 재설정됩니다.

양식 알림 구성

복사된 양식 요소는 대상 사이트의 양식 알림 설정을 상속합니다. 자세한 내용은 양식 알림 설정을 참조하세요.

지도 API 인증

한 사이트에서 다른 사이트로 지도 요소를 통합하려면 대상에 Google 지도 API 키를 추가해야 합니다. 다른 설정은 소스에서 새 사이트로 자동으로 전송됩니다.

상속된 텍스트 서식

복사된 텍스트 요소는 평소와 같이 상위 요소의 서식을 상속합니다. 따라서 복사된 요소에 새 사이트의 상위 수준에 설정된 특정 스타일이 없으면 해당 스타일이 붙여넣은 요소에 적용됩니다.

기본 HTML 태그

"모든 H1 제목" 또는 "모든 단락"에 적용된 스타일과 같이 소스 사이트 요소의 기본 HTML 태그와 연결된 스타일은 복사본을 새 사이트에 붙여넣을 때 제외됩니다.

CMS 데이터와의 연결

컬렉션 데이터가 새 사이트로 전송되지 않으므로 전체 컬렉션 목록을 붙여넣으면 빈 컬렉션 목록 요소만 생성됩니다. 

그러나 구성한 컬렉션 항목의 레이아웃을 재사용하기 위한 실용적인 솔루션은 다음과 같습니다. 

1. 통합 Div 블록 로 컬렉션 아이템
2. 내의 모든 요소를 구성합니다. 컬렉션 아이템 아래의 Div 블록
3. 컨테이너를 복사하여 붙여넣으세요. Div 블록 새로운 사이트로

붙여넣은 요소는 CMS 데이터에 연결되지 않지만(예: H1은 일반 "제목"으로 변환됨) 모든 클래스가 복제되어 새 사이트 전체에서 재사용할 수 있습니다. 컬렉션 페이지의 레이아웃을 재사용할 때도 이 기술을 활용하세요.

빌딩 블록

원본 사이트에서 빌딩 블록으로 저장된 요소는 대상 사이트에서 해당 상태를 유지하지 않습니다. 이를 빌딩 블록으로 다시 설정하려면 디자이너 보드에서 요소를 선택하고 명령 + 옮기다 + ㅏ (Mac의 경우) 또는 제어 + 옮기다 + ㅏ (윈도우즈에서).

색상 정의

원본 사이트에서 변수로 지정된 색상의 클래스를 붙여넣으면 대상 사이트에서 해당 색상이 변수로 인식되지 않습니다.

전문가 팁: 클래스를 포함시킨 후 여러 요소에서 해당 클래스를 사용하려는 경우 색상을 변수로 정의해야 합니다. 색상 변수에 대해 자세히 알아보세요.

중요한: 원본 사이트가 제거되면 원본 사이트의 자산 URL(이미지, 비디오, documents 등)을 참조하여 복사/붙여넣은 요소에 액세스할 수 없습니다.