에디터 X: 사이트에 사용자 지정 요소 추가하기 | 도움말 센터

잠시만요. 답변을 준비 중입니다...

에디터 X: 사이트에 사용자 지정 요소 추가하기

4 분 분량

에디터 X는 에이전시 및 프리랜서를 위한 새로운 플랫폼인 Wix Studio로 전환됩니다.Wix Studio에 대해 자세히 알아보세요.

사용자 지정 요소를 사용해 나만의 디자인 기능과 CSS 기능으로 사이트를 개선하세요. 사용자 지정 요소를 서버 URL 또는 Velo 파일에 연결해 모든 자바스크립트 구성 요소를 추가할 수 있습니다. 필요한 경우 에디터 X에서 직접 더 많은 속성을 설정할 수 있습니다.

시작하기 전:

사이트에 프리미엄 플랜이 있고 에디터 X 광고가 없이 도메인이 연결되어 있어야 합니다.

사용자 지정 요소는 에디터 X 사이트에서 고유한 HTML 태그를 사용할 수 있도록 합니다. 이러한 요소는 지원되는 모든 브라우저에서 작동하며 모든 자바스크립트 ES6 라이브러리 또는 HTML 5를 사용하는 프레임워크와 함께 사용될 수 있습니다.

유용한 사용자 지정 요소의 예시

코드 요구 사항

도움말:

타사 소스의 사용자 지정 요소를 사용할 수 있습니다. 페이지에 사용자 지정 요소를 추가할 때 속성에서 태그 이름을 업데이트하기만 하면 됩니다.
사용자 지정 요소의 성능은 해당 요소의 구현에 따라 달라집니다.

사이트에 필요한 만큼 사용자 지정 요소를 추가하세요. 사용자 지정 요소를 페이지로 끌어온 후 소스(서버 URL 또는 Velo 파일)를 정의하고 페이지 레지스트리에 표시될 태그 이름을 지정하세요.

속성

패널을 사용해 사용자 지정 요소가 모든 중단점에서 제대로 표시되는지 확인합니다. 크기, 도킹, 정렬 등을 조정할 수 있습니다.

참고:

기본적으로 사용자 지정 요소는 페이지의 customElements 레지스트리에 표시됩니다. 사용자 지정 요소에 입력한 태그 이름은 이 레지스트리에서 이름을 정의합니다.

HTML 속성을 설정해 요소의 속성 및 동작을 추가로 조정합니다. 요소 속성 패널을 사용하면 에디터 X에서 직접 속성을 추가, 편집 및 제거할 수 있으므로 실제 코드에 액세스할 필요가 없습니다.

중요!

사용자 지정 요소의 코드는 정의된 속성을 인식하고 처리해야 합니다. 그렇지 않으면 요소가 제대로 작동하지 않습니다.

다음은 사이트에 기본 사용자 지정 요소 추가하기의 예시입니다. 지침에서는 사이트에 "Hello World" 텍스트를 추가하는 방법에 대해 설명합니다.

먼저 자바스크립트 파일에서 요소 및 해당 동작을 추가하고 코딩해야 합니다.

다음으로 사용자 지정 요소 클래스를 정의합니다.

이 예시에서는 이를 HelloWorld로 정의했으며 사용자 지정 요소 등록 시에도 동일한 이름을 사용합니다. 아래의 connectedCallback() 함수는 요소가 DOM에 추가될 때 자동으로 트리거되는 생명 주기 콜백 함수입니다.

1class HelloWorld extends HTMLElement { connectedCallback() { this.innerHTML = 'Hello World!'; } } customElements.define('hello-world', HelloWorld);

사용자 지정 요소 클래스를 정의한 후에는 이를 customElements.define(name, class) 방식으로 등록합니다.

사이트에 사용자 지정 요소 추가 시, 등록된 이름을 태그 이름으로 입력합니다. 등록하고 나면 사용자 지정 요소를 사이트에 사용할 수 있습니다.

1CustomElementRegistry.define('hello-world', HelloWorld);

더 많은 정보를 찾고 계시나요?

여기를 클릭해 Velo by Wix로 이 요소를 사용하는 방법을 확인하세요.

페이지 메뉴