설명서Journey OptimizerJourney Optimizer 안내서

이메일 콘텐츠에 사용자 정의 CSS 추가 email-metadata

마지막 업데이트: 2026년 9월 5일

작성 대상:

  • 중급
  • 사용자

이 페이지에서: 고급 스타일을 위해 전자 메일 Designer의 전자 메일 콘텐츠에 사용자 지정 CSS를 추가하는 방법, CSS를 유효하게 유지하는 방법, 적용되지 않는 스타일의 문제를 해결하는 방법에 대해 알아봅니다.

style
shade-box

전자 메일을 디자인할 때 Journey Optimizer 전자 메일 Designer 내에서 직접 사용자 지정 CSS를 추가할 수 있습니다. 이 기능을 사용하면 고급 및 특정 스타일을 적용하여 콘텐츠의 유연성을 높이고 외관을 제어할 수 있습니다.

사용자 지정 CSS 정의 define-custom-css

이메일 콘텐츠에 사용자 지정 CSS를 추가하려면 아래 단계를 따르십시오.

  1. 하나 이상의 구성 요소를 추가하여 전자 메일 Designer에 일부 콘텐츠가 정의되어 있는지 확인하십시오.

  2. 왼쪽 탐색 트리 또는 오른쪽 창 상단에서 본문​을(를) 선택하십시오. CSS 스타일 섹션이 오른쪽에 표시됩니다.

    사용자 지정 CSS 추가 단추 선택 {width="85%"}

    note
    NOTE
    CSS 스타일 섹션은 편집기에 콘텐츠가 이미 있는 경우에만 사용할 수 있습니다.

  3. 사용자 지정 CSS 추가 단추를 클릭합니다.

    note
    NOTE
    사용자 지정 CSS 추가 단추는 본문​을 선택한 경우에만 사용할 수 있습니다. 하지만 사용자 지정 CSS 스타일을 콘텐츠 내의 모든 구성 요소에 적용할 수 있습니다.

  4. 표시되는 전용 텍스트 영역에 CSS 코드를 입력합니다. 사용자 지정 CSS가 올바르고 적절한 구문을 따르는지 확인하십시오. 자세히 알아보기

    전용 텍스트 영역에 사용자 지정 CSS 입력 {width="65%"}

    note
    NOTE
    잠긴 콘텐츠🔗가 있는 템플릿을 사용하는 경우 콘텐츠에 사용자 지정 CSS를 추가할 수 없습니다. 단추 레이블이 사용자 지정 CSS 보기(으)로 변경되고 콘텐츠에 이미 있는 사용자 지정 CSS는 읽기 전용입니다.

  5. 사용자 지정 CSS를 저장하고 사용자 지정 CSS가 콘텐츠에 올바르게 적용되었는지 확인합니다. 그렇지 않은 경우 문제 해결 섹션을 확인하십시오.

    사용자 지정 CSS 추가 단추 선택 {width="85%"}

  6. 모든 콘텐츠를 제거하면 섹션이 사라지고 이전에 정의한 사용자 지정 CSS가 더 이상 적용되지 않습니다.

  7. CSS 스타일 섹션이 다시 표시되도록 편집기에 콘텐츠를 다시 추가하십시오. 사용자 지정 CSS가 다시 적용됩니다.

유효한 CSS를 사용하는지 확인 use-valid-css

사용자 지정 CSS 추가 텍스트 영역에 올바른 CSS 문자열을 입력할 수 있습니다. 적절한 포맷의 CSS가 즉시 콘텐츠에 적용됩니다.

CAUTION
사용자는 사용자 지정 CSS의 보안을 책임집니다. CSS에 취약점이 도입되거나 기존 콘텐츠와 충돌하지 않는지 확인하십시오.
의도하지 않게 컨텐츠의 레이아웃 또는 기능을 손상시킬 수 있는 CSS를 사용하지 마십시오.
CSS 샘플

다음은 유효한 CSS의 예입니다.

code language-css 
.acr-component[data-component-id="form"] {
  display: flex;
  justify-content: center;
  background: none;
}

.acr-Form {
  width: 100%;
  padding: 20px 100px;
  border-spacing: 0px 8px;
  box-sizing: border-box;
  margin: 0;
}

.acr-Form .spectrum-FieldLabel {
  width: 20%;
}

.acr-Form.spectrum-Form--labelsAbove .spectrum-FieldLabel,
.acr-Form [data-form-item="checkbox"] .spectrum-FieldLabel {
  width: auto;
}

.acr-Form .spectrum-Textfield {
  width: 100%;
}

#acr-form-error,
#acr-form-confirmation {
  width: 100%;
  padding: var(--spectrum-global-dimension-static-size-500);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: var(--spectrum-global-dimension-static-size-200);
}

.spectrum-Form-item.is-required .spectrum-FieldLabel:after{
  content: '*';
  font-size: 1.25rem;
  margin-left: 5px;
  position: absolute;
}

/* Error field placeholder */
.spectrum-HelpText {
  display: none !important;
}

.spectrum-HelpText.is-invalid,
.is-invalid ~ .spectrum-HelpText {
  display: flex !important;
}
code language-css 
@media only screen and (min-width: 600px) {
  .acr-paragraph-1 {
    width: 100% !important;
  }
}
잘못된 CSS 샘플

잘못된 CSS를 입력하면 CSS를 저장할 수 없음을 나타내는 오류 메시지가 표시됩니다. 다음은 잘못된 CSS의 예입니다.

<style> 태그를 사용할 수 없습니다.

code language-html 
<style type="text/css">
  .acr-Form {
    width: 100%;
    padding: 20px 100px;
    border-spacing: 0px 8px;
    box-sizing: border-box;
    margin: 0;
  }
</style>

중괄호 누락과 같은 잘못된 구문은 허용되지 않습니다.

code language-css 
body {
  background: red;

기술 구현 implementation

사용자 지정 CSS는 아래 예와 같이 data-name="global-custom" 특성이 있는 <style> 태그의 일부로 <head> 섹션의 끝에 추가됩니다. 이렇게 하면 사용자 지정 스타일이 콘텐츠에 전체적으로 적용됩니다.

샘플 참조
code language-html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="content-version" content="3.3.31">
    <meta name="x-apple-disable-message-reformatting">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style data-name="default" type="text/css">
      td { padding: 0; }
      th { font-weight: normal; }
    </style>
    <style data-name="grid" type="text/css">
      .acr-grid-table { width: 100%; }
    </style>
    <style data-name="acr-theme" type="text/css" data-theme="default" data-variant="0">
      body { margin: 0; font-family: Arial; }
    </style>
    <style data-name="media-default-max-width-500px" type="text/css">
      @media screen and (max-width: 500px) {
        body { width: 100% !important; }
      }
    </style>
    <style data-name="global-custom" type="text/css">
      /* Add you custom CSS here */
    </style>
  </head>
  <body>
    <!-- Minimal content -->
  </body>
</html>

사용자 지정 CSS는 이메일 Designer의 설정 창에서 해석되거나 확인되지 않습니다. 완전히 독립적이며 사용자 지정 CSS 추가 옵션을 통해서만 수정할 수 있습니다.

보호 기능 - 가져온 콘텐츠

이메일 Designer으로 가져온 콘텐츠와 함께 사용자 지정 CSS를 사용하려면 다음을 고려하십시오.

  • CSS를 포함한 외부 HTML 콘텐츠를 가져오는 경우 해당 콘텐츠를 변환하지 않으면 CSS 스타일 섹션을 사용할 수 없는 호환성 모드​에 있게 됩니다. 기존 콘텐츠 가져오기에 대한 자세한 정보

  • 사용자 지정 CSS 추가 옵션을 통해 적용된 CSS를 포함하는 이메일 Designer으로 만든 콘텐츠를 가져오는 경우 이전에 적용된 CSS가 동일한 옵션에서 표시되고 편집할 수 있습니다.

문제 해결 troubleshooting

사용자 지정 CSS가 적용되지 않은 경우 아래 옵션을 고려하십시오.

  • CSS가 올바르고 구문 오류(예: 중괄호 누락, 잘못된 속성 이름)가 없는지 확인합니다. 방법 알아보기

  • CSS가 data-name="global-custom" 특성이 있는 <style> 태그에 추가되고 있는지 확인하십시오.

  • global-custom 스타일 태그에 data-disabled 특성이 true(으)로 설정되어 있는지 확인하십시오. 이 경우 사용자 지정 CSS는 적용되지 않습니다.

    accordion
    예제:
    code language-html 
    <style data-name="global-custom" type="text/css" data-disabled="true"> body: { color: red; } </style>

  • 콘텐츠에 적용된 테마를 포함한 다른 CSS 규칙으로 CSS가 재정의되지 않았는지 확인하십시오.

    • 브라우저 개발자 도구를 사용하여 콘텐츠를 검사하고 CSS가 올바른 선택기를 타깃팅하는지 확인하십시오.

    • 선언이 우선하도록 선언에 !important을(를) 추가해 보십시오.

      accordion
      예제:
      code language-css 
      .acr-Form {
  background: red !important;
}
AI Knowledge Reference

This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.

For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.

  • TL;DR: This page explains how to add custom CSS to email content in the Email Designer for advanced styling, how to keep the CSS valid, how it is implemented in the HTML, and how to troubleshoot styles that are not applied.

Intents:

  • Add custom CSS to email content for advanced and specific styling
  • Ensure the entered CSS is valid so it is applied and can be saved
  • Understand where custom CSS is injected in the generated HTML
  • Troubleshoot custom CSS that is not applied
  • Understand custom CSS behavior with imported content

Glossary:

  • Add Custom CSS: The Email Designer option (available when Body is selected) to enter custom CSS in a dedicated text area (product-specific)
  • CSS styles section: The section, shown when Body is selected and content is present, from which custom CSS is added (product-specific)
  • global-custom: The data-name="global-custom" <style> tag added to the end of the <head> where custom CSS is placed (product-specific)
  • Compatibility mode: The mode for imported external HTML content (unless converted) in which the CSS styles section is not available (product-specific)

Guardrails:

  • The CSS styles section is only available when content is already present in the editor; the Add custom CSS button is only available when Body is selected.
  • Custom CSS must be valid and follow proper syntax; invalid CSS (for example using <style> tags, or syntax errors such as missing braces) triggers an error message and cannot be saved.
  • When using a template with locked content, you cannot add custom CSS; the button changes to View custom CSS and existing custom CSS is read-only.
  • If you remove all content, the CSS styles section disappears and the previously defined custom CSS is no longer applied; adding content back reapplies it.
  • For imported external HTML content in Compatibility mode (unless converted), the CSS styles section is not available.
  • Users are responsible for the security of their custom CSS and should ensure it does not introduce vulnerabilities or break the layout.
  • Custom CSS is not interpreted or validated by the Settings pane; it is independent and can only be modified through the Add Custom CSS option.

Terminology:

  • Canonical name: Custom CSS — Acronym: CSS — variants: Add Custom CSS, custom CSS styles
  • Synonyms: “Add custom CSS” = “Add Custom CSS” (button); becomes “View custom CSS” for locked content
  • Do not confuse: “custom CSS” (global-custom style tag) ≠ default/system-generated CSS styles (other data-name style tags such as default, grid, acr-theme)
  • Do not confuse: “Compatibility mode” (imported external HTML, no CSS styles section) ≠ content created with the Email Designer (custom CSS visible and editable)

FAQ:

  • Q: Why is the Add custom CSS button missing? — The CSS styles section requires content in the editor, and the button is only available when Body is selected.
  • Q: What happens if my CSS is invalid? — An error message is displayed indicating the CSS cannot be saved; <style> tags and syntax errors such as missing braces are not accepted.
  • Q: Where is my custom CSS added in the HTML? — To the end of the <head> section as a <style data-name="global-custom"> tag.
  • Q: My custom CSS is not applied — what should I check? — Verify the CSS is valid, that it is in the global-custom style tag, that data-disabled is not set to true, and that it is not overridden by other rules including an applied theme; consider adding !important.
  • Q: Can I add custom CSS to a template with locked content? — No; the button becomes View custom CSS and any existing custom CSS is read-only.
recommendation-more-help
journey-optimizer-help