사용자 정의 코드 삽입 - Webflow 도움말
코드 삽입 요소를 사용하여 사이트에 사용자 정의 코드 블록을 추가하여 다양한 사용자 정의 기능을 활용하세요.
<style> 태그 내의 CSS, <script> 태그 내의 JS만 지원합니다. 서버 측 언어(예: Perl, PHP, Python, Ruby)는 코드 삽입 요소에 통합할 수 없습니다.코드 삽입 요소 추가 방법
디자인이나 리치 텍스트 요소 어디에나 타사 코드나 사용자 정의 코드를 삽입할 수 있습니다.
디자인에 사용자 정의 코드를 직접 추가하는 방법
- 삽입할 코드를 클립보드에 복사합니다.
- 추가 패널을 열고 코드 삽입 요소를 Webflow 캔버스에 추가합니다.
- 1단계에서 복사한 사용자 정의 코드를 붙여넣습니다.
- 모달을 저장하고 닫습니다.
<html>, <body>, 또는 <head> 태그를 포함하지 마세요. 그렇지 않으면 웹사이트/레이아웃이 깨질 수 있습니다.리치 텍스트 요소에 사용자 정의 코드 추가하는 방법
- 클립보드에 임베드할 코드를 복사합니다
- 사용자 정의 코드를 추가할 리치 텍스트 요소에 커서를 놓습니다
- 삽입 메뉴를 열기 위해 “플러스” 아이콘을 클릭하고 사용자 정의 코드 버튼을 클릭합니다
- 1단계에서 복사한 사용자 정의 코드를 붙여넣습니다
사용자 정의 코드 내에서 동적 콘텐츠 사용하는 방법
컬렉션 필드를 임베디드 코드에 통합하여 다양한 용도로 정보를 동적으로 가져올 수 있습니다. 자세히 알아보기: Webflow 도움말 센터에서 동적 임베드 보기.
코드 임베드 요소 편집하는 방법
코드 임베드 요소의 코드 편집기를 열고 코드를 편집하는 여러 가지 방법이 있습니다. 다음을 수행할 수 있습니다: - 캔버스에서 코드 임베드 요소를 선택하고 더블 클릭 - 캔버스에서 코드 임베드 요소를 선택하고 엔터 키를 누름 - 캔버스에서 코드 임베드 요소를 선택하고 설정 “톱니바퀴” 아이콘을 클릭 - 캔버스에서 코드 임베드 요소를 선택하고 설정 패널의 코드 임베드 설정 아래에서 코드 편집기 열기를 클릭 코드 임베드 요소의 크기 설정 방법
코드 임베드 요소 내의 사용자 정의 코드가 명시적으로 크기나 치수를 설정하지 않으면, 콘텐츠가 종종 부모 요소의 전체 너비를 차지할 수 있습니다. 사용자 정의 코드에 `height="100%" width="100%"`를 추가하여 임베드 요소와 콘텐츠의 너비와 높이를 스타일 패널에서 조정할 수 있습니다. 임베드된 콘텐츠 미리보기 방법
<iframe></iframe> 또는 <style> 태그로 감싼 사용자 정의 코드는 캔버스나 리치 텍스트 요소 내에서 미리보기가 표시되지만, 일부 코드 임베드는 라이브 웹사이트에서만 볼 수 있습니다. 코드 편집기에서 태그를 사용할 때마다 디자이너에서 해당 요소의 자리 표시자가 표시됩니다. 미리보기, 게시 또는 사이트를 내보내면, 스크립트와 사용자 정의 코드가 배치된 위치에 렌더링됩니다.
여기에 있는 모든 코드는 제외됩니다
자세히 알아보기: 테스트 및 피드백을 위한 스테이징 도메인으로 .webflow.io 사용하기를 참조하세요.
FAQ 및 문제 해결 팁
코드 임베드 요소에서 서버 측 언어를 사용할 수 있나요?
코드 임베드 요소에서는 서버 측 언어(예: Perl, PHP, Python, Ruby)를 통합할 수 없습니다. 코드 임베드 요소는 HTML, <style> 태그 내의 CSS, <script> 태그 내의 JS만 지원합니다.
코드 임베드 요소의 50,000자 제한을 늘릴 수 있나요?
코드 임베드 요소의 사용자 지정 코드는 50,000자를 초과할 수 없습니다. 임베드하려는 코드가 더 길다면 다른 서버에 저장하고 스크립트를 참조할 수 있습니다. 또한, 타사 도구를 사용하여 사용자 지정 코드를 최소화하거나 여러 코드 임베드 요소로 코드를 분할할 수 있습니다(이로 인해 JavaScript 함수가 손상되지 않는 경우).도와주세요! 내 사용자 지정 코드가 작동하지 않아요!
코드에 적절한 시작 및/또는 종료 태그가 포함되어 있는지, <html>, <body>, <head> 태그가 포함되어 있지 않은지 다시 확인하세요.
2020년 8월부터 새로 게시된 Webflow 사이트에는 jQuery v3.5.1이 포함되어 있습니다. 사용자 지정 코드로 다른 버전의 jQuery를 가져오면 사이트에서 충돌 및 예기치 않은 동작이 발생할 수 있습니다. onClick, onHover 등 DOM 이벤트에 영향을 미치는 스크립트도 예기치 않은 동작을 유발할 수 있습니다.
사용자 지정 코드는 Webflow의 기본 기능과 충돌할 수 있는 고급 수정 사항이라는 점을 염두에 두는 것이 중요합니다. 따라서 Webflow는 사용자 지정 코드의 기능이나 완전한 호환성을 보장할 수 없습니다.
지원 팀은 사용자 지정 코드 설정이나 문제 해결에 대한 직접적인 도움을 제공할 수 없습니다. 이러한 주제는 고객 지원 정책의 범위를 벗어나기 때문입니다. 사용자 지정 코드에 문제가 발생하면 Webflow 포럼에서 알려주시면 Webflow 커뮤니티 전체(직원 포함)가 추가적인 도움과 리소스를 제공할 수 있습니다.