모바일 카드 작성기 구성 요소

  • 릴리스 버전: Xanadu
  • 업데이트 날짜 2024년 08월 01일
  • 읽기2분
  • 모바일 카드를 구성하는 구성요소에 대해 자세히 알아봅니다.

    구성요소 추가 및 제거

    컨테이너

    컨테이너 구성요소에는 다른 구성요소가 포함되어 있습니다. 컨테이너에는 다른 컨테이너를 포함한 모든 카드 구성요소가 포함될 수 있습니다. 컨테이너를 사용하여 카드 구성요소를 구성하고 컨테이너 내의 구성요소가 정렬 및 배포되는 방법을 결정할 수 있습니다.

    표 1. 컨테이너 구성 속성
    속성 설명
    높이 컨테이너의 높이(픽셀)
    너비 컨테이너의 너비(픽셀). 이 속성을 비워 두면 컨테이너가 사용 가능한 공간을 채웁니다.
    여백 상단 컨테이너의 상단 여백(픽셀)
    여백 하단 컨테이너의 하단 여백(픽셀)
    왼쪽 여백 컨테이너의 왼쪽 여백(픽셀)
    오른쪽 여백 컨테이너의 오른쪽 여백(픽셀)
    모서리 반경 컨테이너의 모서리 반경입니다. 이 값을 늘리면 컨테이너의 둥근 모서리가 생성됩니다.
    컨테이너 방향 컨테이너 내의 구성요소 방향을 결정합니다. 다음 값 중 하나를 선택합니다.
    • 가로
    • 세로
    정렬 컨테이너 내의 구성요소 정렬을 결정합니다. 다음 값 중 하나를 선택합니다.
    • 스트레치
    • 센터
    • 왼쪽
    • 오른쪽
    • 상위
    • 하단
    배포 컨테이너 내의 구성요소 배포를 결정합니다. 다음 값 중 하나를 선택합니다.
    • 같음
    • 자동

    이미지

    이미지 구성요소는 이미지를 표시하는 데 사용됩니다. 이미지가 포함된 기록(예: 사용자 기록의 아바타 필드)의 필드를 선택하여 표시할 이미지를 정의합니다.

    표 2. 이미지 구성 속성
    속성 설명
    매핑된 필드 이미지를 포함하는 기록의 필드입니다.
    주:
    카드 템플릿을 만들 때 필드를 선택할 수 없습니다. 카드가 특정 화면과 연결될 때 이 선택이 수행됩니다.
    높이 이미지의 높이(픽셀)
    너비 이미지의 너비(픽셀)
    모서리 반경 이미지의 모서리 반경입니다. 이 값을 늘리면 이미지의 둥근 모서리가 생성됩니다.
    상단 여백 이미지의 상단 여백(픽셀)
    오른쪽 여백 이미지의 오른쪽 여백(픽셀)
    하단 여백 이미지의 하단 여백(픽셀)
    왼쪽 여백 이미지의 왼쪽 여백(픽셀)
    크기 조정 이미지의 크기 조정입니다. 다음 값 중 하나를 선택합니다.
    • 작성
    • 맞춤

    텍스트

    텍스트 구성요소가 카드에 텍스트를 표시합니다. 정적 텍스트 또는 필드 값 레이블의 텍스트일 수 있습니다. 기록 목록을 볼 때 사용자가 먼저 봐야 하는 정보에 텍스트 구성요소를 사용합니다.

    표 3. 텍스트 구성 속성
    속성 설명
    필드 유형 텍스트 필드의 유형입니다. 다음 값 중 하나를 선택합니다.
    • 필드 값
    • 필드 레이블
    • 정적 텍스트
    필드 유형 텍스트 텍스트 구성요소에 나타나는 텍스트입니다. 이 값은 필드 유형 속성에서 정적 텍스트를 선택한 경우에만 사용됩니다.
    매핑된 필드 사용할 텍스트가 들어 있는 필드입니다. 텍스트 구성요소는 필드 유형 속성에서 선택한 값에 따라 필드의 레이블 또는 필드 값을 표시합니다.
    주:
    카드 템플릿을 만들 때 필드를 선택할 수 없습니다. 카드가 특정 화면과 연결될 때 이 선택이 수행됩니다.
    높이 텍스트 구성요소의 높이(픽셀)
    너비 텍스트 구성요소의 너비(픽셀)
    모서리 반경 텍스트 구성요소의 모서리 반경입니다. 이 값을 늘리면 텍스트 구성요소의 둥근 모서리가 생성됩니다.
    상단 여백 텍스트 구성요소의 상단 여백(픽셀)
    오른쪽 여백 텍스트 구성요소의 오른쪽 여백(픽셀)
    하단 여백 텍스트 구성요소의 하단 여백(픽셀)
    왼쪽 여백 텍스트 구성요소의 왼쪽 여백(픽셀)
    텍스트 정렬 구성요소의 텍스트에 대한 정렬입니다. 다음 값 중 하나를 선택합니다.
    • 왼쪽
    • 중앙
    • 오른쪽
    최대 라인 수 요소에 있는 텍스트의 최대 라인 수입니다.
    글꼴 가중치 텍스트의 글꼴 가중치입니다. 다음 값 중 하나를 선택합니다.
    • 정규
    • 굵게
    글꼴 크기 텍스트의 글꼴 크기입니다. 숫자 값을 입력합니다.
    텍스트 색 텍스트의 색입니다. 이 속성의 값은 HTML 색상 코드입니다(예: sienna의 경우 #A0522D).
    주:
    텍스트 구성요소의 배경색을 변경할 수는 없지만 컨테이너 구성요소 내에 텍스트 구성요소를 배치하고 컨테이너 배경색을 변경할 수 있습니다.