링크 옵션 설정

Marketo Engage Assets - Journey Optimizer B2B edition 라이브러리 또는 연결된 Market Engage 인스턴스에서 이미지 에셋을 찾아보고 선택하려면 이 유형을 선택하십시오.

{width="700" modal="regular"}

대화 상자에서 선택한 저장소에서 이미지를 선택할 수 있습니다. 자산을 추가하려면 선택을 클릭합니다.

필요한 에셋을 찾는 데 도움이 되는 도구가 있습니다.
- 조건에 따라 표시된 항목을 필터링하려면 왼쪽 상단의 필터 아이콘을 클릭하십시오.
- 표시된 항목을 자산 이름과 일치하도록 필터링하려면 검색 필드에 텍스트를 입력하십시오.
  
  {width="700" modal="regular"}
Experience Manager Assets - 구성된 Experience Manage Assets 저장소에서 이미지 에셋을 찾아보고 선택하려면 이 유형을 선택하십시오.

Assets 선택 대화 상자에서 사용 가능한 도구를 사용하여 이미지를 선택하여 필요한 에셋을 찾은 다음 선택을 클릭합니다.
- 오른쪽 상단에서 저장소를 변경합니다.
- 오른쪽 상단의 자산 관리를 클릭하여 다른 브라우저 탭에서 Assets 저장소를 열고 AEM Assets 관리 도구를 사용합니다.
- 표시를 목록 보기, 눈금 보기, 갤러리 보기 또는 폭포 보기(으)로 변경하려면 오른쪽 상단의 보기 유형 선택기를 클릭하십시오.
- 오름차순과 내림차순 사이의 정렬 순서를 변경하려면 정렬 순서 아이콘을 클릭하십시오.
  
  {width="700" modal="regular"}
- 정렬 기준 메뉴 화살표를 클릭하여 정렬 기준을 이름, 크기 또는 수정됨(으)로 변경합니다.
- 조건에 따라 표시된 항목을 필터링하려면 왼쪽 상단의 필터 아이콘을 클릭하십시오.
- 표시된 항목을 자산 이름과 일치하도록 필터링하려면 검색 필드에 텍스트를 입력하십시오.
{width="700" modal="regular"}
미디어 가져오기 - 시스템에서 파일을 선택하고 Journey Optimizer B2B edition 자산 라이브러리로 가져오려면 이 유형을 선택하십시오.

이미지 업로드 대화 상자에서 시스템의 파일을 파일 상자로 끌어서 놓습니다. 최대 파일 크기는 100MB입니다.

{width="450"}(으)로 가져오기

선택한 이미지의 파일 이름이 대화 상자에 표시됩니다. 에셋 파일 이름은 폴더 간에 고유해야 하며 이름의 파일이 이미 있는 경우 메시지가 표시됩니다. 이름에는 최대 100자를 사용할 수 있으며 특수 문자(예: ;, :, \ 및 |)를 사용할 수 없습니다.

가져오기를 클릭합니다.

오른쪽 패널에서 이미지 제목과 이미지에 대한 대체 텍스트를 추가할 수 있습니다.

이미지 설정 {width="250"}

링크 옵션 설정

설정 탭에서 링크 옵션을 사용하여 대상 페이지와 대상 페이지를 로드하기 위한 브라우저 동작과 이미지를 연결합니다.

링크의 Type 설정:
- 외부 링크 - 표준 URL을 링크 대상으로 사용하려면 이 형식을 선택하십시오.
  
  Url에서 링크 대상의 URL을 입력하십시오. 개인화( ) 아이콘을 클릭하여 개인화 토큰을 URL의 매개 변수로 사용합니다.
  
  {width="250"}
- 랜딩 페이지 - 연결된 Marketo Engage 인스턴스에서 게시된 랜딩 페이지를 선택하려면 이 유형을 선택하십시오.
  
  랜딩 페이지 옵션의 경우 게시된 랜딩 페이지를 선택하십시오. 페이지 선택 아이콘( )을 클릭하고 게시된 랜딩 페이지를 선택합니다.
  
  {width="250"}
Label의 경우 단추 안에 표시할 텍스트를 입력하십시오.

단추 크기는 텍스트와 설정된 스타일에 따라 조정됩니다.
Target의 경우 연결된 대상을 전자 메일 또는 페이지에서 리디렉션하는 방법을 선택하십시오.
- 없음 - 기본 브라우저나 클라이언트 동작(기본값)을 사용하여 링크를 엽니다.
- Blank - 새 창 또는 탭에서 링크를 엽니다.
- 자체 - 같은 프레임에서 링크를 엽니다.
- 상위 - 상위 프레임에서 링크를 엽니다.
- 위쪽 - 창의 전체 본문에서 링크를 엽니다.

스타일 설정

오른쪽 패널에서 이미지 구성 요소의 스타일을 설정합니다.

배경

오른쪽 패널에서 스타일 탭을 선택한 상태에서 배경 섹션을 사용하여 구성 요소의 배경색을 정의합니다.

확인란을 선택하고 색상 사각형을 클릭하여 선택기에서 색상을 선택합니다. 알려진 RGB, HSL, HSB 또는 16진수 값을 입력하여 색상을 선택할 수 있습니다. 또는 색상 슬라이더와 색상 필드를 사용하여 색상을 선택할 수 있습니다.

배경색 선택기 {width="300"}

테두리

스타일 탭을 선택한 오른쪽 패널에서 테두리 섹션을 확장하고 구성 요소의 테두리를 표시하는 옵션을 설정합니다.
토글을 오른쪽으로 이동하여 테두리 표시 옵션을 활성화하고 디자인 기준에 따라 설정합니다.
- 테두리 색상을 설정하려면 확인란을 선택하고 색상 사각형을 클릭하여 선택기에서 색상을 선택합니다. 알려진 RGB, HSL, HSB 또는 16진수 값을 입력하여 색상을 선택할 수 있습니다. 또는 색상 슬라이더와 색상 필드를 사용하여 색상을 선택할 수 있습니다.
{width="300"}
- 테두리 크기(선 폭)을 설정하려면 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.
- 테두리 스타일을(를) 설정하려면 표준 CSS border-style 값 목록에서 값을 선택하십시오.
- 테두리가 표시되는 위치를 확인하려면 각 테두리 위치 확인란을 선택하십시오.
{width="250"}
테두리 반지름의 경우 모퉁이에 대해 원하는 곡선에 따라 숫자 값을 설정하십시오.

값이 0(기본값)이면 사각형 모서리가 생성됩니다.

크기

스타일 탭을 선택한 오른쪽 패널에서 크기 섹션을 확장하고 구성 요소 높이 및 너비에 대한 옵션을 설정합니다.

높이 - 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다. 빈 값(자동)은 기본값이며 내용에 따라 요소의 높이 크기를 조정합니다.
너비 - 픽셀이나 백분율로 너비를 설정하려면 토글을 사용합니다.
- 백분율 너비의 경우 슬라이더를 사용하여 백분율 값을 설정합니다. 백분율은 포함 블록의 콘텐츠 상자를 기반으로 요소 크기를 결정합니다. 이 콘텐츠 상자에서는 패딩과 테두리가 제외됩니다. 예를 들어 값 50은 요소 너비를 포함된 블록 콘텐츠 너비의 50%로 설정합니다.
  
  {width="250"}
- 픽셀 기반 너비의 경우 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다. 비어 있는 값(자동)은 기본값이며 내용에 따라 요소의 너비를 조정합니다.
  
  {width="250"}

정렬

맞춤 섹션을 확장하고 사용할 가로 맞춤(왼쪽, 가운데 또는 오른쪽)을 선택합니다. 이 스타일은 표준 text-align CSS 스타일로 변환되며 구성 요소가 포함된 구성 요소 내에 배치되는 방식에 영향을 줍니다.

가로 맞춤 스타일 {width="250"}

여백

스타일 탭이 선택된 오른쪽 패널에서 여백 섹션을 확장하고 구조적 구성 요소 내에서 여백 간격에 대한 옵션을 설정합니다. 이 스타일은 CSS margin 매개 변수를 복제합니다. 이 매개 변수는 다른 구성 요소와 구분하여 구성 요소 테두리 외부의 공간으로 제어합니다. 구성 요소 주위에 간격을 만들어 위치 및 주변 컨텐츠 레이아웃에 영향을 줍니다.

디자인 요구에 따라 여백 값을 픽셀 단위로 설정합니다. 구성 요소의 모든 면, 상단, 왼쪽-오른쪽 또는 각 면에 대한 여백을 독립적으로 설정할 수 있습니다.

모든 면 - 모든 면에 적용할 하나의 값을 설정하려면 각 면에 대해 다른 여백 확인란의 선택을 취소하십시오. 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

{width="250"}
위쪽-아래쪽 - 위쪽 및 아래쪽 여백을 같은 값으로 설정하려면 위쪽 및 아래쪽 설정 사이에 잠김 아이콘을 설정합니다. 에 대한 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.
왼쪽-오른쪽 - 왼쪽 및 오른쪽 여백을 같은 값으로 설정하려면 왼쪽 및 오른쪽 설정 사이에 잠김 아이콘을 설정합니다. 에 대한 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

{width="250"}
독립 - 각 여백을 독립 값으로 설정하려면 잠금 해제됨 아이콘을 위쪽 및 아래쪽 설정 사이, 왼쪽 및 오른쪽 사이로 설정합니다. 각 설정에 대해 의 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

{width="250"}

패딩

스타일 탭을 선택한 오른쪽 패널에서 패딩 섹션을 확장하고 구조적 구성 요소 내에서 패딩에 대한 옵션을 설정합니다. 이 스타일은 구성 요소의 콘텐츠와 테두리 사이의 공간인 CSS padding 매개 변수를 복제합니다. 패딩은 내용과 구성 요소 테두리 사이의 거리를 제어하는 데 사용할 수 있는 내부 공간을 제공합니다.

디자인 요구에 따라 패딩 값을 픽셀 단위로 설정합니다. 구성 요소의 모든 면, 상단, 왼쪽-오른쪽 또는 각 면에 대한 패딩을 독립적으로 설정할 수 있습니다.

모든 면 - 모든 면에 적용할 하나의 값을 설정하려면 각 면에 대해 다른 패딩 확인란의 선택을 취소하십시오. 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

{width="250"}
위쪽-아래쪽 - 위쪽 및 아래쪽 패딩을 같은 값으로 설정하려면 위쪽 및 아래쪽 설정 사이에 잠김 아이콘을 설정합니다. 에 대한 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.
왼쪽-오른쪽 - 왼쪽 및 오른쪽 패딩을 같은 값으로 설정하려면 왼쪽 및 오른쪽 설정 사이에 잠김 아이콘을 설정합니다. 에 대한 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

{width="250"}
독립 - 각 면에 대한 패딩을 독립 값으로 설정하려면 Unlocked 아이콘을 위쪽 및 아래쪽 설정 사이 및 왼쪽 및 오른쪽 사이에 설정합니다. 각 설정에 대해 의 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

{width="250"}

고급

값이 있는 추가 CSS 호환 특성을 적용하려면 고급 스타일 설정을 사용하십시오. 기존 속성의 값을 변경하거나 새 값을 추가할 수 있습니다. 스타일이 상위-하위 구성 요소(요소)에 대한 CSS 상속 모델을 사용하여 구성 요소에 적용됩니다.

표시된 속성은 구성 요소에 대해 현재 정의된 스타일을 반영합니다. CSS 정의에 따라 값을 변경할 수 있습니다. 추가(+) 아이콘을 클릭하여 구성 요소에 대한 새 스타일 특성을 추가합니다.

고급 스타일 {width="250"}

소셜

소셜 구성 요소를 사용하여 소셜 미디어 페이지에 대한 링크를 콘텐츠에 삽입합니다. 여기에는 세 가지 기본 소셜 미디어 유형이 포함되어 있지만 필요에 따라 유형을 추가하거나 제거할 수 있습니다.

기본 형식을 가진 새 소셜 구성 요소 {width="600" modal="regular"}

소셜 미디어 유형을 추가하려면 추가( +) 아이콘을 클릭하고 추가할 소셜 미디어 유형을 선택하십시오.

{width="250"}
소셜 미디어 유형을 제거하려면 소셜 미디어 아이콘 옆에 있는 X을(를) 클릭합니다.

소셜 미디어 유형을 선택한 상태에서 해당 유형에 대한 옵션을 설정합니다.

URL - 소셜 미디어 그래픽 또는 아이콘에 연결할 소셜 미디어 URL을 입력합니다.
Source - 기본 대신 자신의 이미지를 사용하려면 및 이미지 자산을 선택하십시오. 연결된 Marketo Engage 에셋 저장소, Experience Manager Assets 저장소(구성된 경우)에서 이미지를 선택하거나 시스템에서 이미지 파일을 가져올 수 있습니다. 이미지 에셋 선택 및 가져오기에 대한 자세한 내용은 이미지 구성 요소 정보를 참조하세요.
대체 텍스트 - 표시된 이미지에 대한 대체 텍스트를 입력합니다.

{width="250"}

모든 소셜 미디어 그래픽에 대해 일관된 표시 크기를 정의하려면 이미지 크기를 설정하십시오.

Social 구성 요소에 대해 다음 스타일 옵션을 설정할 수 있습니다.

배경

오른쪽 패널에서 스타일 탭을 선택한 상태에서 배경 섹션을 사용하여 구성 요소의 배경색을 정의합니다.

배경색 선택기 {width="300"}

테두리

스타일 탭을 선택한 오른쪽 패널에서 테두리 섹션을 확장하고 구성 요소의 테두리를 표시하는 옵션을 설정합니다.
토글을 오른쪽으로 이동하여 테두리 표시 옵션을 활성화하고 디자인 기준에 따라 설정합니다.
- 테두리 색상을 설정하려면 확인란을 선택하고 색상 사각형을 클릭하여 선택기에서 색상을 선택합니다. 알려진 RGB, HSL, HSB 또는 16진수 값을 입력하여 색상을 선택할 수 있습니다. 또는 색상 슬라이더와 색상 필드를 사용하여 색상을 선택할 수 있습니다.
{width="300"}
- 테두리 크기(선 폭)을 설정하려면 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.
- 테두리 스타일을(를) 설정하려면 표준 CSS border-style 값 목록에서 값을 선택하십시오.
- 테두리가 표시되는 위치를 확인하려면 각 테두리 위치 확인란을 선택하십시오.
{width="250"}
테두리 반지름의 경우 모퉁이에 대해 원하는 곡선에 따라 숫자 값을 설정하십시오.

값이 0(기본값)이면 사각형 모서리가 생성됩니다.

크기

스타일 탭을 선택한 오른쪽 패널에서 크기 섹션을 확장하고 구성 요소 높이 및 너비에 대한 옵션을 설정합니다.

높이 - 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다. 빈 값(자동)은 기본값이며 내용에 따라 요소의 높이 크기를 조정합니다.
너비 - 픽셀이나 백분율로 너비를 설정하려면 토글을 사용합니다.
- 백분율 너비의 경우 슬라이더를 사용하여 백분율 값을 설정합니다. 백분율은 포함 블록의 콘텐츠 상자를 기반으로 요소 크기를 결정합니다. 이 콘텐츠 상자에서는 패딩과 테두리가 제외됩니다. 예를 들어 값 50은 요소 너비를 포함된 블록 콘텐츠 너비의 50%로 설정합니다.
  
  {width="250"}
- 픽셀 기반 너비의 경우 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다. 비어 있는 값(자동)은 기본값이며 내용에 따라 요소의 너비를 조정합니다.
  
  {width="250"}

정렬

가로 맞춤 스타일 {width="250"}

여백

모든 면 - 모든 면에 적용할 하나의 값을 설정하려면 각 면에 대해 다른 여백 확인란의 선택을 취소하십시오. 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

{width="250"}
위쪽-아래쪽 - 위쪽 및 아래쪽 여백을 같은 값으로 설정하려면 위쪽 및 아래쪽 설정 사이에 잠김 아이콘을 설정합니다. 에 대한 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.
왼쪽-오른쪽 - 왼쪽 및 오른쪽 여백을 같은 값으로 설정하려면 왼쪽 및 오른쪽 설정 사이에 잠김 아이콘을 설정합니다. 에 대한 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

{width="250"}
독립 - 각 여백을 독립 값으로 설정하려면 잠금 해제됨 아이콘을 위쪽 및 아래쪽 설정 사이, 왼쪽 및 오른쪽 사이로 설정합니다. 각 설정에 대해 의 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

{width="250"}

패딩

모든 면 - 모든 면에 적용할 하나의 값을 설정하려면 각 면에 대해 다른 패딩 확인란의 선택을 취소하십시오. 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

{width="250"}
위쪽-아래쪽 - 위쪽 및 아래쪽 패딩을 같은 값으로 설정하려면 위쪽 및 아래쪽 설정 사이에 잠김 아이콘을 설정합니다. 에 대한 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.
왼쪽-오른쪽 - 왼쪽 및 오른쪽 패딩을 같은 값으로 설정하려면 왼쪽 및 오른쪽 설정 사이에 잠김 아이콘을 설정합니다. 에 대한 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

{width="250"}
독립 - 각 면에 대한 패딩을 독립 값으로 설정하려면 Unlocked 아이콘을 위쪽 및 아래쪽 설정 사이 및 왼쪽 및 오른쪽 사이에 설정합니다. 각 설정에 대해 의 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

{width="250"}

고급

고급 스타일 {width="250"}

양식(랜딩 페이지)

[Beta]{class="badge informative" title="Beta 기능"}

Form 구성 요소를 사용하여 게시된 양식을 랜딩 페이지 또는 랜딩 페이지 템플릿에 추가하십시오. 양식을 만들고 게시하는 방법에 대한 자세한 내용은 Forms을 참조하세요.

구성 요소 도구 모음에서 양식 도구를 클릭하거나 오른쪽의 양식 포함 속성을 사용하여 게시된 양식을 선택합니다.

{width="600"}

양식에 대한 기본 후속 작업 형식을(를) 재정의하려면 페이지나 템플릿의 요구 사항에 따라 설정을 변경합니다.

이 페이지는 양식에 대한 감사 페이지라고도 하며 이 설정은 방문자가 양식을 제출할 때 수행되는 작업을 결정합니다.

페이지에서 유지 - 양식을 제출할 때 방문자를 동일한 페이지에 유지하려면 이 옵션을 선택하십시오.
랜딩 페이지 - 후속 작업으로 Journey Optimizer B2B edition 또는 Marketo Engage 랜딩 페이지를 선택하려면 이 옵션을 선택하십시오.

외부 URL - URL을 후속 페이지로 지정하려면 이 옵션을 선택하십시오. 방문자가 양식을 제출하면 브라우저가 지정된 URL을 로드합니다.

note tip
TIP
파일 다운로드에 양식을 사용하려는 경우 호스팅된 파일의 URL을 지정할 수 있습니다. 이 구성에서 제출 버튼은 다운로드 버튼으로 작동합니다.

후속 설정 변경 {width="280"}

필요한 경우 오른쪽 패널의 스타일 탭을 선택하여 구조 구성 요소 내에서 양식 여백을 설정합니다.

모든 면 - 모든 면에 적용할 하나의 값을 설정하려면 각 면에 대해 다른 여백 확인란의 선택을 취소하십시오. 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

{width="250"}
위쪽-아래쪽 - 위쪽 및 아래쪽 여백을 같은 값으로 설정하려면 위쪽 및 아래쪽 설정 사이에 잠김 아이콘을 설정합니다. 에 대한 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.
왼쪽-오른쪽 - 왼쪽 및 오른쪽 여백을 같은 값으로 설정하려면 왼쪽 및 오른쪽 설정 사이에 잠김 아이콘을 설정합니다. 에 대한 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

{width="250"}
독립 - 각 여백을 독립 값으로 설정하려면 잠금 해제됨 아이콘을 위쪽 및 아래쪽 설정 사이, 왼쪽 및 오른쪽 사이로 설정합니다. 각 설정에 대해 의 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

{width="250"}

recommendation-more-help