다음을 통해 공유

맞춤 속성을 사용하여 이메일, 페이지 및 양식에서 디자이너 기능을 활성화하기

  • 아티클

콘텐츠 디자이너는 그래픽 편집기와 HTML 코드 편집기를 모두 제공합니다. 생성된 HTML은 HTML 렌더러에서 사용할 수 있지만, 그래픽 편집기가 제공하는 디자인 요소 끌어서 놓기 및 일반 스타일 설정을 지원하는 몇 가지 맞춤 속성도 지원합니다. Dynamics 365 Customer Insights - Journeys과 함께 제공되는 기본 메시지 템플릿 및 페이지 템플릿은 이러한 맞춤 속성을 활용하여 귀하가 그러한 템플릿들을 특정 방식으로 맞춤화하는 것을 더욱 용이하게 만듭니다. 자신만의 템플릿을 디자인할 때 이러한 맞춤 속성을 활용할 수도 있습니다.

팁

Microsoft는 이메일에서 사용자 지정 HTML을 지원하지 않습니다.

태그 및 속성 요약

다음 표는 이 항목에서 설명된 맞춤 속성과 메타 태그에 대한 빠른 참조를 제공합니다.

맞춤 속성 설명
<meta type="xrm/designer/setting" name="type" value="marketing-designer-content-editor-document"> 이 태그가 문서의 <head>에 있으면 디자이너 탭이 끌어서 놓기 기능을 제공합니다. 이 태그가 없으면 디자이너 탭은 간단한 전체 페이지 편집기를 제공합니다. 추가 정보: 도구 상자 표시 및 끌어서 놓기 편집 활성화
<meta type="xrm/designer/setting" name="additional-fonts" datatype="font" value="<font-list>"> 문서의 <head>에 이 태그가 있으면 <글꼴 목록>에 열거되어 있는(세미콜론으로 구분) 글꼴이 텍스트 요소의 서식 도구 모음에 있는 글꼴 메뉴에 추가됩니다. 추가 정보: 텍스트 요소 도구 모음에 새 글꼴 추가
<div data-container="true"> … </div> 사용자가 디자인 요소를 끌어서 놓을 수 있는 컨테이너의 시작과 끝을 표시합니다. 추가 정보: 사용자가 디자인 요소를 추가할 수 있는 컨테이너 만들기
<div data-editorblocktype="<element-type>"> … </div> 디자인 요소의 시작과 끝을 표시합니다. 속성 값은 그것이 어느 타입의 요소인지를 나타냅니다(텍스트, 이미지, 버튼 등). 일부 디자인 요소는 여기에서 추가 특성을 지원합니다. 추가 정보: 디자인 요소 표시 및 디자인 보기에서 잠금 요소
<meta type="xrm/designer/setting" name="<name>" value="<initial-value>" datatype="<data-type>" label="<label>"> 이 태그는 사용자가 디자이너>스타일 탭을 사용하여 편집할 수 있는 문서 전체 스타일 설정을 정의합니다. 추가 정보: 스타일 탭에 설정 추가하기
/* @<tag-name> */ … /* @<tag-name> */ 이같은 CSS 코멘트를 사용하여 스타일 설정으로 제어할 CSS 값을 둘러삽니다, 여기서 <tag-name>은 설정을 확립한 메타 태그를 위한 name 속성의 값입니다. 추가 정보: 서두에서 스타일 설정을 구현하기 위해 CSS 코멘트를 추가하기
property-reference= "<attr>:@< tag-name >;<attr>:@< tag-name >; …" 이 속성을 HTML 태그에 배치하여 스타일 설정으로 제어되는 값을 가진 속성을 배치합니다, 여기서 <attr>는 생성될 속성의 명칭이고 <tag-name>은 설정을 확립한 메타 태그를 위한 name 속성의 값입니다. 추가 정보: 본문에서 스타일 설정을 구현하기 위한 특성-참조 속성 추가하기

이 항목의 나머지 섹션은 이 표에 요약된 각 기능을 사용하는 방법에 대한 자세한 정보를 제공합니다.

도구 상자 표시 및 끌어서 놓기 편집 활성화

제3자 도구에서 개발된 HTML을 직접 디자이너의 HTML 탭에 붙여넣어 디자인 구축을 매우 신속하게 시작할 수 있습니다. 단, 이렇게 하면 디자이너 탭은 텍스트 포맷팅 도구 모음을 제공하는 단일 RTF 편집기로 표시될 것이며, HTML에 포함되어 있는 모든 이미지, 링크 및 스타일을 표시하지만 도구 상자, 특성 또는 스타일 탭, 또는 끌어서 놓기 기능은 제공하지 않습니다(이 단순화된 디자이너 뷰는 때때로 전체 페이지 편집기라고도 함). 단, 문서의 <head> 섹션에 다음 메타 태그를 추가함으로써 붙여넣은 디자인을 위한 끌어서 놓기 기능을 활성화할 수는 있습니다:

<meta type="xrm/designer/setting" name="type" value="marketing-designer-content-editor-document">

다음 이미지는 전체 페이지 편집 모드(왼쪽)와 끌어서 놓기 모드(오른쪽)에서 동일한 디자인을 보여줍니다. 유일한 차이는 오른쪽 디자인은 메타 태그를 포함하므로 끌어서 놓기가 가능해지고, 측면 패널이 표시된다는 것입니다.

전체 페이지 편집기 대 끌어서 놓기 편집기.

노트

전체 페이지 편집기를 사용할 때에도 텍스트 포맷팅 도구 모음(표시)을 사용하여 텍스트를 선택, 편집 및 스타일링할 수 있으며 이미지, 링크 및 기타 요소를 더블클릭하여 팝업 대화상자를 사용해 특성을 설정할 수 있습니다. 도구 모음에는 각 수신자의 연락처 레코드에서 끌어온 필드 값 같은 동적 콘텐츠를 추가하기 위한 보조 편집개인화 단추. 버튼도 포함되어 있습니다.

사용자가 디자인 요소를 추가할 수 있는 컨테이너 만들기

디자이너 탭에서 사용자는 디자인 요소 내에 포함된 콘텐츠만 편집할 수 있으며, 새 디자인 요소는 문서의 data-containe로 설정된 부분으로만 드래그할 수 있습니다. 따라서 일부 영역(컨테이너의 외부)은 디자인 탭의 편집에 잠겨 있는 반면 다른 영역(잠금 해제된 컨테이너 내부)은 편집 및 끌어온 내용을 수용하는 템플릿을 만들 수 있습니다.

속성 data-container="true"이 포함된 <div> 태그를 사용하여 다음과 같은 데이터 컨테이너를 만들 수 있습니다:

<table aria-role="presentation">
    <tbody><tr>
        <td>
            LOCKED
        </td>
        <td>
            <div data-container="true">
                <!-- DRAG HERE -->
            </div>
        </td>
    </tr>
</tbody></table>

data-containe Div-태그 쌍 내에 둥지를 틀고, 디자인 요소에 속하지 않은 텍스트 또는 HTML 태그는, 두 개의 드래그 가능 영역 사이에 드래그 불가능하고 편집할 수 없는 영역을 만들 것입니다. 예:

<div data-container="true">
    <!-- DRAG HERE --> <p> LOCKED </p> <!-- DRAG HERE -->
</div>

노트

전체 페이지 편집기가 활성화되면 모든 끌어서 놓기 기능이 비활성화되며, 귀하는 디자이너 탭에서 전체 페이지 편집기에 영향을 주지 않는 data-container Div 태그 바깥의 컨텐츠를 포함하여 모든 컨텐츠를 편집할 수 있습니다.

디자이너 보기에서 컨테이너 잠금

디자이너 탭에서 모든 콘텐츠를 읽기 전용으로 만들기 위해 컨테이너를 잠글 수 있습니다. 잠긴 컨테이너에 디자인 요소가 포함된 경우 해당 요소에 대한 모든 내용과 설정은 잠긴 상태로 유지되며, 선택하는 경우에도 속성 탭이 표시되지 않습니다.

디자인 구성 요소를 추가하고 구성한 후 컨테이너 잠금 기능을 사용하여 컨테이너를 잠글 수 있습니다.

컨테이너를 잠그려면 다음과 같이 컨테이너 태그에 data-locked="hard" 특성을 추가합니다.

<div data-container="true" data-locked="hard">
    <!-- All elements and content here are locked, with no properties shown -->
</div>

노트

또한 디자인 요소 수준에서 콘텐츠를 잠글 수 있습니다. 콘텐츠가 컨테이너 수준에서 잠겨 있으면 해당 설정은 해당 컨테이너 내의 모든 디자인 요소의 잠금/잠금 해제 상태를 무시합니다. 추가 정보: 디자이너 보기에서 잠금 요소

컨테이너 잠금을 추가로 적용하려면 HTML 탭에 대한 액세스를 제한하여 선택한 사용자가 코드에 액세스하는 것을 방지할 수 있습니다(그렇지 않으면 이 설정을 무시할 수 있음). 추가 정보: 디자이너 기능에 대한 액세스 제어

디자인 요소 표시

디자이너 탭을 사용하여 디자인 요소를 추가할 때마다 편집기는 한 쌍의 <div> 태그를 삽입하여 요소의 시작과 끝을 표시하며, 특성 탭의 설정에서 명시된 요소를 표시하기 위해 요구되는 HTML을 생성합니다.

디자인 요소는 양식 data-editorblocktype="<element-type>"의 속성이 포함된 <div> 태그로 표시되는데, 여기서 이 속성의 값은 해당 요소의 타입을 나타냅니다. 예컨대, 다음 <div> 태그는 텍스트 요소를 만듭니다:

<div data-editorblocktype="Text">
    ...
    <!-- Don't edit the element content here -->
    ...
</div>

다음 표에는 data-editorblocktype 속성에 사용할 수 있는 값이 열거되어 있습니다.

디자인 요소 명칭 요소 타입 data-editorblocktype 특성 값
텍스트 요소 공통 디자인 요소 Text
이미지 요소 공통 디자인 요소 Image
구분선 요소 공통 디자인 요소 구분선
버튼 요소 공통 디자인 요소 단추
콘텐츠 블록 요소 공통 디자인 요소 내용
(이 유형의 디자인 요소에는 <블록-타입>에 text 또는 image의 값이 있는 콘텐츠 블록 유형을 식별하는 data-block-datatype="<block-type>" 특성이 포함되어 있습니다.)
마케팅 페이지 요소 이메일 마케팅 페이지
이벤트 요소 이메일 이벤트
설문조사 요소 이메일 설문조사
양식 요소 양식 FormBlock
필드 요소 양식 콘텐츠 Field-<field-name>, 예컨대: Field-email
신청 목록 요소 양식 콘텐츠 SubscriptionListBlock
친구에게 전달 요소 양식 콘텐츠 ForwardToFriendBlock
이메일 금지 요소 및 나를 기억 요소 양식 콘텐츠 필드-확인란
(이러한 요소는 각각 체크박스를 생성하는데 내부 설정에 의해 차별화됩니다.)
제출 버튼 요소 양식 콘텐츠 SubmitButtonBlock
리셋 버튼 요소 양식 콘텐츠 ResetButtonBlock
이미지 문자 요소 양식 콘텐츠 CaptchaBlock

이러한 디자인 요소 각각에 대한 상세 설명은 디자인 요소 준거를 참조하십시오.

중요

HTML 탭에서 작업할 때는 디자인 요소의 <div> 태그들 사이에 있는 콘텐츠의 편집은 피해야 합니다. 왜냐하면 그렇게 하는 것의 결과를 예측할 수 없으며, 귀하의 편집이 어떤 식으로든 디자이너에 의해 덮어씌어질 가능성이 있기 때문입니다. 그대신에 디자이너 탭을 사용하여 디자인 요소의 콘텐츠 및 속성을 관리하십시오.

디자이너 보기에서 잠금 요소

여는 <div> 태그에 다음 특성을 추가하여 디자인 요소의 내용과 속성을 잠글 수 있습니다.

data-protected="true"

예:

<div data-editorblocktype="Divider" data-protected="true">
    …
        <!-- Don't edit the element content here -->
    …
</div>

디자인 요소가 보호됨으로 표시된 경우 페이지 또는 전자 메일의 디자이너 탭에서 작업하는 사용자는 요소의 속성 또는 콘텐츠를 편집할 수 없습니다. 이 특성은 항상 콘텐츠 블록 요소에 포함되지만 모든 유형의 디자인 요소에 추가하여 보호할 수 있습니다. 이 특성을 포함하는 모든 디자인 요소는 보호된 것을 나타내기 위해 HTML 탭에서 음영 처리된 것으로 표시되지만 사용자가 요구하는 경우에도 편집할 수 있습니다. 이 특성을 "거짓"으로 설정(또는 그냥 제거)하여 디자인 요소에서 보호를 제거합니다.

노트

콘텐츠가 컨테이너 수준에서 잠겨 있으면 해당 설정은 해당 컨테이너 내의 모든 디자인 요소의 잠금/잠금 해제 상태를 무시합니다. 추가 정보: 디자이너 보기에서 컨테이너 잠금

콘텐츠 잠금을 추가로 적용하려면 HTML 탭에 대한 액세스를 제한하여 선택한 사용자가 코드에 액세스하는 것을 방지할 수 있습니다(그렇지 않으면 이 설정을 무시할 수 있음). 추가 정보: 디자이너 기능에 대한 액세스 제어

외부에서 생성된 HTML을 디자이너로 가져오기

원하는 도구를 사용하여 마케팅 이메일, 페이지 또는 양식에 대한 초기 HTML 레이아웃 및 내용을 만들 수 있습니다. HTML이 준비되면 관련 디자이너에 붙여 넣기한 후에 다음 하위 절에서 설명하는 대로 필요한 Dynamics 365 Customer Insights - Journeys 기능을 추가합니다.

HTML 코드 가져오기

외부에서 생성된 HTML을 디자이너로 가져오려면 다음을 수행하십시오.

  1. Dynamics 365 Customer Insights - Journeys에서 새로운 마케팅 이메일, 페이지 또는 양식을 만듭니다.
  2. 디자이너의 디자인>HTML 탭으로 이동합니다.
  3. HTML 탭에서 모든 콘텐츠를 지우고 외부에서 작성한 HTML에 붙여 넣습니다.
  4. 디자이너의 디자인>디자이너 탭으로 이동하고 디자인을 검사합니다.
  5. 마케팅 이메일로 작업하는 경우 보조 편집을 사용하여 필요한 모든 콘텐츠 및 링크(신청 센터 링크 및 실제 발신자 주소 포함)를 배치합니다.

팁

방금 외부 HTML을 붙여 넣었으므로 디자인에 Dynamics 365 Customer Insights - Journeys에 특정한 코드가 포함되어 있지 않아 디자이너는 전체 페이지 편집기를 보여줍니다. 이는 기본 텍스트 서식 지정, 이미지 서식 지정 및 동적 콘텐츠 추가를 위한 (이메일용) 보조 편집 기능을 제공합니다. 전체 페이지 편집기로 작업하는 방법에 대한 자세한 내용은 도구 상자 표시 및 끌어서 놓기 편집 활성화를 참조하십시오. 전체 페이지 편집기가 필요한 모든 기능을 제공하는 경우 이를 사용하여 디자인을 미세 조정한 다음 평소대로 그대로 사용합니다. 끌어서 놓기 편집기를 사용하여 디자인을 미세 조정하려는 경우 다음 섹션에서 이를 사용하는 방법에 대한 정보를 참조하십시오.

가져온 후에 끌어서 놓기 편집기 사용

디자이너 보기에서 작업하는 동안 완전한 기능을 갖춘 끌어서 놓기 편집기를 사용하거나 고급 디자인 요소를 추가하려면 가져온 HTML 코드를 다음과 같이 편집할 수 있습니다.

  1. 디자이너의 디자인>HTML 탭으로 다시 이동합니다.

  2. 도구 상자 표시 및 끌어서 놓기 편집 활성화에 설명된 대로 문서의 <헤드> 섹션에 필요한 메타 태그를 추가하여 끌어서 놓기 편집기를 활성화합니다.

  3. 디자인>HTML 탭에서 작업하는 동안 필요에 따라 다음을 수행합니다.

    • 하나 이상의 디자인 요소를 끌어올 수 있는 디자인의 각 부분에서 사용자가 디자인 요소를 추가할 수 있는 컨테이너 만들기에 설명된 대로 데이터 컨테이너를 만드는 코드를 추가합니다.
    • 끌어서 놓기를 사용하지 않고 디자인 요소를 코드에 직접 배치하려는 경우 디자인>HTML 탭에 필요한 코드를 직접 입력할 수 있습니다. 이 방법으로 추가하는 요소는 끌어서 놓기를 지원하지 않지만 디자인>디자이너의 속성 패널에 설정을 제공합니다. 이 기법을 사용하여 텍스트, 이미지, 구분선 및 단추 요소만 배치할 수 있습니다(컨테이너 작성 및 다른 유형의 디자인 요소에 대해 끌어서 놓기 사용) 이러한 각 요소를 만드는 데 필요한 HTML 구조에 대해서는 이 절차 뒤의 표를 참조하십시오. 필요에 따라 이 코드를 표에서 직접 복사/붙여 넣기하십시오.

  4. 이제 디자인>디자이너 탭으로 이동하여 디자인 요소를 설정한 각 컨테이너로 끌어온 다음 속성 패널을 사용하여 끌거나 코드에 직접 붙여 넣은 각 디자인 요소를 구성할 수 있습니다.

디자인 요소 타입 이 코드 붙여넣기 메모                                                     
Text <div data-editorblocktype="Text"><p> Enter your text here</p></div> 여기에서 직접 <p> 태그 사이에 HTML 콘텐츠를 입력하거나 디자이너로 이동하여 서식있는 텍스트 편집기를 사용하여 수행할 수 있습니다.
Image <div data-editorblocktype="Image"><div align="Center" class="imageWrapper"><a href="example.com" title="example.com"><img alt="Some alt text" height="50" src="about:blank" width="50"></a></div></div> 이미지 원본 및/또는 이미지 링크를 변경하는 가장 쉬운 방법은 디자이너로 이동하여 속성 패널을 사용하는 것입니다. 그러나 HTML에서 직접 다음 속성을 편집할 수도 있습니다.
  • <a> 요소의 href 및/또는 title 속성을 편집하여 이미지 링크 및/또는 제목을 설정합니다.
  • 이미지에서 링크를 제거하려면 <a> 요소의 href 및 title 속성 내용을 지웁니다(단, href=""와 같은 속성과 따옴표는 그대로 유지하십시오).
  • <img> 요소의 src 속성을 편집하여 이미지 소스를 설정합니다.
다른 코드는 편집하지 마십시오.
Divider <div data-editorblocktype="Divider"><div align="center" class="dividerWrapper"><table aria-role="presentation" style="padding: 0px; margin: 0px; width: 100%"><tbody><tr style="padding: 0px;"> <td style="margin:0px; padding-left: 0px; padding-right: 0px; padding-top: 5px; padding-bottom: 5px; vertical-align:top;"> <p style="margin: 0px; padding: 0px; border-bottom-width: 3px; border-bottom-style: solid; border-bottom-color: rgb(0, 0, 0); line-height: 0px; width: 100%;"><span>&nbsp;</span></p></td></tr></tbody></table></div></div> 이 코드를 HTML 편집기에서 직접 편집하지 마십시오. 대신 디자이너로 이동하고 속성 패널을 사용하십시오.
단추 <div data-editorblocktype="Button"><!--[if mso]><div align="center"><v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" 이 코드를 HTML 편집기에서 직접 편집하지 마십시오. 대신 디자이너로 이동하고 속성 패널을 사용하십시오.

디자인 요소가 코드에 나타나는 방법에 대한 자세한 내용은 디자인 요소 식별을 참조하십시오.

텍스트 요소 도구 모음에 새 글꼴 추가

텍스트 요소는 디자이너에서 선택된 텍스트에 글꼴을 적용하기 위한 메뉴가 포함된 팝업 서식 도구 모음을 제공합니다.

텍스트 요소를 위한 글꼴 선택기.

이 글꼴 선택기에 새 글꼴을 추가하려면 다음 양식을 사용하는 <meta> 태그를 문서의 <head>에 추가하십시오:

<meta type="xrm/designer/setting" name="additional-fonts" datatype="font" value="<font-list>">

여기서 <글꼴 목록>은 세미콜론으로 구분된 글꼴 이름 목록입니다.

스타일 탭에 설정 추가

기본 제공 템플릿의 편리한 기능 중 하나는 그것이 스타일 탭에서 전역 스타일 설정을 제공하기 때문에 사용자가 글꼴 모음, 색상표 및 기타 해당 템플릿을 위해 활성화된 전역 설정을 신속하게 조정할 수 있다는 것입니다. 각 템플릿에는 해당 특정 디자인에 적합한 스타일 설정만 포함되어 있으며, 마찬가지로 귀하는 본인과 귀하의 사용자들을 위해 적합한 스타일 설정만 제공하는 템플릿을 디자인할 수 있습니다.

디자이너 > 스타일 탭입니다.

스타일 탭에 설정을 추가하려면 다음을 수행해야 합니다:

  • 문서의 <head>에 <meta> 태그를 추가하여 설정을 만듭니다.
  • Meta 태그로 만든 설정을 적용하는 스타일 및/또는 HTML 태그를 설정합니다.

다음 하위 섹션에서는 이러한 각 작업을 수행하는 방법을 설명합니다.

메타 태그를 추가하여 설정을 만듭니다.

요구되는 <meta> 태그는 다음 형식을 취합니다:

<meta type="xrm/designer/setting" name="<name>" value="<initial-value>" datatype="<data-type>" label="<label>">

여기서:

  • <name>은 메타 태그를 표시하며, 귀하는 설정이 적용될 스타일 및 HTML 태그에서도 그것을 참조해야 합니다.
  • <initial-value>는 스타일의 해당 기본값입니다.
  • <data-type>은 사용자가 제공할 값의 타입을 표시합니다. 이 설정은 스타일 탭에서 제시되는 컨트롤의 타입에 영향을 줍니다. 다음 표에 나열된 값 중 하나를 사용해야 합니다.
  • <label>은 설정을 위해 스타일 탭에 제시될 텍스트를 표시합니다.
데이터 유형 값 설명
color #000 또는 #1a32bf 같은 해시태그 값을 사용하여 색을 설정합니다. 스타일 탭에서 색 선택 컨트롤을 만듭니다.
font 글꼴 모음 명칭을 설정합니다. 글꼴 명칭들을 선호 순서대로 쉼표로 구분된 목록을 사용하여 글꼴 스택을 설정할 수도 있습니다. 스타일 탭에서 간단한 입력 필드를 만듭니다.
number 단위 없는 수치를 설정합니다(값과 함께 px 또는 em 같은 단위의 지정을 허용하려면 텍스트를 사용하십시오). 스타일 탭에서 현재 값을 증가/감소시키는 데도 사용할 수 있는 위로/아래로 버튼을 사용하여 입력 필드를 만듭니다.
picture URL로서의 이미지 소스를 설정합니다. 스타일 탭에서 간단한 입력 필드를 만듭니다.
text 텍스트와 숫자를 모두 포함할 수 있는 값을 설정합니다. 단위(예: px 또는 em)를 포함할 수 있는 수치를 위해서도 이 데이터 타입을 사용하십시오. 스타일 탭에서 간단한 입력 필드를 만듭니다.

노트

스타일 탭에 표시되는 라벨은 "[내 스타일]" 같이 대괄호 안에 나타날 수 있습니다. 대괄호는 표시되고 있는 텍스트에 사용할 수 있는 번역이 없음을 표시합니다. "색 1"과 같이 기본 제공 템플릿에서 지원되는 값을 선택하면 번역을 사용할 수 있게 되므로 대괄호는 표시되지 않습니다.

노트

여기에 설명된 바와 같이 <meta> 태그를 사용하여 확립된 스타일 설정은 해당 설정이 다음 섹션에 설명된 바와 같이 하나 이상의 실제 스타일 또는 HTML 태그에서도 참조될 때에만 스타일 탭에 표시됩니다.

서두에서 스타일 설정을 구현하기 위해 CSS 코멘트를 추가하기

스타일 탭에서 만든 설정은 일치하는 xrm/designer/setting 메타 태그를 위한 name 속성의 값이 포함된 두 CSS 코멘트로 CSS 값을 둘러쌈으로써 HTML 문서의 <head>에 확립된 CSS 스타일에 적용할 수 있습니다. CSS 코멘트 쌍은 다음 형식을 취합니다:

/* @<tag-name> */ <value> /* @<tag-name> */

여기서:

  • <tag-name>은 해당 스타일 탭 설정을 확립하는 xrm/designer/setting 메타 태그의 명칭 특성입니다.
  • <value>는 사용자가 해당 스타일 탭 설정을 편집할 때 대체될 값입니다.

중요

이러한 CSS 코멘트 쌍은 <head> 섹션의 <style> 태그 내에 정의된 스타일과 클래스에서만 사용할 수 있습니다. 또한 한 세트의 <style> 태그만 존재해야 하고, 모든 CSS 스타일은 거기에서 설정됩니다.

여기의 예에서는 스타일 탭에서 "색 1"로 불리는 색 선택 컨트롤을 만드는 xrm/designer/setting 메타 태그를 볼 수 있습니다. 그러면 CSS 스타일이 이 설정을 적용하여 <h1> 요소의 텍스트 색을 확립합니다.

<head>
    <meta type="xrm/designer/setting" name="color1" value="#ff0000" datatype="color" label="Color 1">
    <style>
        h1 {color: /* @color1 */ #ff0000 /* @color1 */;}
    </style>
</head>

본문에서 스타일 설정을 구현하기 위한 특성-참조 속성 추가하기

스타일 탭에서 만든 설정은 각 해당 태그에 다음 형태의 속성을 추가함으로써 문서의 <body>에 있는 HTML 태그에 속성 값으로 적용할 수 있습니다:

property-reference= "<attr>:@< tag-name >;<attr>:@< tag-name >; …"

여기서:

  • <attr>는 만들 특성의 명칭입니다.
  • <tag-name>은 설정을 확립한 메타 태그를 위한 name 특성의 값입니다.
  • 복수의 속성은 필요한 경우 단일 특성-참조 속성 내에서 세미콜론으로 구분해야 합니다.

여기의 예에서는 문서에서 영웅 이미지(배너)를 제어하기 위한 두 설정을 만드는 xrm/designer/setting 메타 태그를 볼 수 있는데, 스타일 탭에서는 해당 컨트롤이 "영웅 이미지" 및 "영웅 이미지 높이"로 불립니다. 그러면 그러한 설정을 구현하기 위해 property-reference 특성을 <img> 태그에 사용합니다.

<head>
    <meta type="xrm/designer/setting" name="hero-image" value="picture.jpg" datatype="picture" label="Hero image">
    <meta type="xrm/designer/setting" name="hero-image-height" value="100px" datatype="text" label="Hero image height">
</head>
<body>
    <img property-reference="src:@hero-image;height:@hero-image-height;">
</body>

따라서 이 예에서는 <img> 태그가 다음과 같은 것으로 해소될 것입니다:

<img src="picture.jpg" height="100px">