구조 구성 요소 structure-components

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

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

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

필요한 에셋을 찾는 데 도움이 되는 도구가 있습니다.

• 조건에 따라 표시된 항목을 필터링하려면 왼쪽 상단의 필터 아이콘을 클릭하십시오.

• 표시된 항목을 자산 이름과 일치하도록 필터링하려면 검색 필드에 텍스트를 입력하십시오.

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

구성된 Experience Manage Assets 저장소에서 이미지 에셋을 찾아보고 선택하려면 이 유형을 선택하십시오.

Assets 선택 대화 상자에서 사용 가능한 도구를 사용하여 이미지를 선택하여 필요한 에셋을 찾은 다음 선택 ​을 클릭합니다.

• 오른쪽 상단에서 저장소 ​를 변경합니다.

• 오른쪽 상단의 자산 관리 ​를 클릭하여 다른 브라우저 탭에서 Assets 저장소를 열고 AEM Assets 관리 도구를 사용합니다.

• 표시를 목록 보기, 눈금 보기, 갤러리 보기 또는 폭포 보기(으)로 변경하려면 오른쪽 상단의 보기 유형 선택기를 클릭하십시오.

• 오름차순과 내림차순 사이의 정렬 순서를 변경하려면 정렬 순서 아이콘을 클릭하십시오.

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

• 정렬 기준 메뉴 화살표를 클릭하여 정렬 기준을 이름, 크기 또는 수정됨(으)로 변경합니다.

• 조건에 따라 표시된 항목을 필터링하려면 왼쪽 상단의 필터 아이콘을 클릭하십시오.

• 표시된 항목을 자산 이름과 일치하도록 필터링하려면 검색 필드에 텍스트를 입력하십시오.

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

시스템에서 파일을 선택하고 Journey Optimizer B2B edition 자산 라이브러리로 가져오려면 이 유형을 선택하십시오.

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

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

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

가져오기 ​를 클릭합니다.

1. 스타일 탭을 선택한 오른쪽 패널에서 테두리 섹션을 확장하고 구성 요소의 테두리를 표시하는 옵션을 설정합니다.

2. 토글을 오른쪽으로 이동하여 테두리 표시 옵션을 활성화하고 디자인 기준에 따라 설정합니다.

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

   {width="300"}

   • 테두리 크기(선 폭)을 설정하려면 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

   • 테두리 스타일 ​을(를) 설정하려면 표준 CSS border-style 값 목록에서 값을 선택하십시오.

   • 테두리가 표시되는 위치를 확인하려면 각 테두리 위치 확인란을 선택하십시오.

   {width="250"}

3. 테두리 반지름 ​의 경우 모퉁이에 대해 원하는 곡선에 따라 숫자 값을 설정하십시오.

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

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

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

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

  {width="250"}

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

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

  {width="250"}

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

  {width="250"}

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

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

{width="250"}

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

  {width="300"}

• 배경 이미지 - 배경 이미지 설정을 활성화하려면 토글 선택기를 이동합니다.

  {width="250"}

  자산 원본 유형을 선택하고 이미지 파일을 선택합니다.

1. 스타일 탭을 선택한 오른쪽 패널에서 테두리 섹션을 확장하고 구성 요소의 테두리를 표시하는 옵션을 설정합니다.

2. 토글을 오른쪽으로 이동하여 테두리 표시 옵션을 활성화하고 디자인 기준에 따라 설정합니다.

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

   {width="300"}

   • 테두리 크기(선 폭)을 설정하려면 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

   • 테두리 스타일 ​을(를) 설정하려면 표준 CSS border-style 값 목록에서 값을 선택하십시오.

   • 테두리가 표시되는 위치를 확인하려면 각 테두리 위치 확인란을 선택하십시오.

   {width="250"}

3. 테두리 반지름 ​의 경우 모퉁이에 대해 원하는 곡선에 따라 숫자 값을 설정하십시오.

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

맞춤 섹션을 확장하고 사용할 세로 맞춤(위쪽, 중간 또는 아래쪽)을 선택합니다. 이 스타일은 표준 vertical-align CSS 스타일로 변환되며 포함된 구성 요소 내의 위치에 영향을 줍니다.

{width="250"}

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

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

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

  {width="250"}

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

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

  {width="250"}

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

  {width="250"}

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

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

{width="250"}