설명서Journey OptimizerJourney Optimizer 안내서

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

Last update: Tue Oct 14 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

작성 대상:

  • 중간
  • 사용자

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

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

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

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

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

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

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

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

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

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

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

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

샘플 참조
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가 <style> 특성이 있는 data-name="global-custom" 태그에 추가되고 있는지 확인하십시오.

  • 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;
}
recommendation-more-help
b22c9c5d-9208-48f4-b874-1cefb8df4d76