학습 내용
사용자 지정 HTML 템플릿을 가져오거나 사용자 지정 코딩된 템플릿을 만들 때 사용자 지정 코드 문제를 해결하는 방법을 알아보세요.
사용자 지정 HTML은 기술에 능숙한 마케터나 개발자 액세스 권한이 있는 사람에게만 사용하는 것을 권장합니다. 워드프레스닷컴 제품은 사용자 정의 HTML을 지원하지만, 지원팀은 이 문서에서 다루는 일반적인 지침을 제공하는 것 외에는 사용자 정의 템플릿을 구축하는 데 도움을 드릴 수 없습니다.
데이터 보안을 유지하기 위해 클라비요의 지원팀은 HTML 파일을 열 수 없습니다.
사용자 지정 HTML 및 CSS 요소
이메일을 대화형으로 만드는 데 사용되는 특정 HTML 및 CSS 요소는 현재 지원되지 않습니다. 예를 들어 특정 CSS 속성 선택기를 사용하여 Gmail에서 이메일을 대화형으로 만들려는 경우 템플릿이 클라비요에서 오류를 트리거할 수 있습니다.
클라비요는 현재 이메일 템플릿에서 특정 연산자(예: ~)를 지원하지 않습니다. 이로 인해 특정 사용자 정의 HTML 및 CSS를 사용할 수 있는 범위가 제한될 수 있습니다. 템플릿에 완전히 지원되지 않는 HTML 또는 CSS가 포함되어 있는 경우 이메일 미리 보기를 생성할 수 없으며 대신 오류 메시지가 표시됩 니다.
일반적인 HTML 문제
사용자 지정 HTML 이메일이 올바르게 보이지 않는다면 다음 몇 가지 일반적인 위치에서 문제를 확인할 수 있습니다.
글꼴의 작은따옴표글꼴의 작은따옴표
CSS에서 글꼴 패밀리 속성을 추가하는 곳마다 작은따옴표나 불필요한 따옴표가 있는지 확인하세요. 글꼴을 추가할 때 따옴표를 모두 제거합니다.
| 문제 | 수정됨 |
| 글꼴-가족:'Helvetica Neue', 헬베티카, Arial | 글꼴가족:Helvetica Neue, Helvetica, Arial |
미디어 쿼리
미디어 쿼리가 표준 형식이 아닌 경우 제대로 렌더링되지 않습니다. 모든 미디어 쿼리에 대해 표준 형식을 따르세요.
| 표준 미디어 쿼리 형식 |
| @미디어 전용 화면 및 (최대 너비: 460px) |
불필요한 센터 태그
<center> 이메일 템플릿 전체에 HTML 태그가 여러 개 있는 경우 이메일이 Gmail에서 제대로 렌더링되지 않을 수 있습니다. 이 문제를 해결하려면 불필요한 <center> 태그를 모두 제거하세요. <center> 이메일 템플릿 상단의 <body> 태그 근처에 태그 하나만 있으면 됩니다. 모든 추가 <center> 태그는 불필요합니다.
클라비요는 자바스크립트 이메일을 지원하지 않습니다.
대부분의 이메일 클라이언트(Gmail, 핫메일, 야후 등)는 이메일의 자바스크립트를 보안 위협으로 간주합니다. 스크립트가 악성 콘텐츠를 숨길 수 있기 때문입니다. 그 결과 이러한 주요 이메일 클라이언트는 이메일에서 스크립트를 완전히 차단합니다. 이메일의 자바스크립트와 관련된 내재된 보안 위협과 대부분의 주요 이메일 클라이언트에서 이러한 스크립트를 지원하지 않는 점을 고려할 때 추가된 스크립트는 자동으로 제거됩니다.
클라비요는 임베드된 양식이나 동영상을 지원하지 않습니다.클라비요는 임베드된 양식이나 동영상을 지원하지 않습니다.
클라비요는 템플릿에 임베드된 양식, 위젯 또는 동영상을 지원하지 않습니다. 테스트 결과 이러한 유형의 기능이 모든 주요 이메일 클라이언트에서 안정적으로 렌더링되지 않는 것으로 나타났기 때문입니다. 자바스크립트 스니펫과 마찬가지로 대부분의 이메일 클라이언트는 이러한 요소를 보안 위협으로 간주하여 이메일에서 모두 제거합니다.
이 문제에 대한 해결 방법을 알고 싶다면 이메일에 동영상 또는 GIF 추가하기 도움말 문서를 참조하세요.
기타 지원되지 않는 태그 및 속성기타 지원되지 않는 태그 및 속성
여기서 다루는 HTML 태그 및 속성은 Klaviyo에서 지원하는 모든 것을 나열한 것은 아닙니다. 일반적으로 주요 받은 편지함 공급업체에서 지원하는 HTML 요소는 Klaviyo 에서도 지원됩니다.
템플릿에 지원되지 않는 HTML이 있는 경우 Klaviyo 에서 지원되지 않는 요소를 지원되는 대체 요소(예: 스팬 태그)로 바꾸려고 시도합니다. 명확한 대체물이 없는 경우 해당 HTML 부분이 제거됩니다. HTML을 추가한 후 일부가 사라지는 것처럼 보인다면 해당 태그가 지원되지 않는 것일 수 있으므로 비슷한 효과를 내기 위해 대체 HTML 태그나 속성을 사용해 보세요.
추가 리소스