레이아웃 모드를 사용하여 구성 요소 크기 조정

적응형 양식 작성 인터페이스를 사용하면 레이아웃 모드를 사용하여 구성 요소의 크기를 조정할 수 있습니다. 열 내의 파란색 점을 드래그하여 구성 요소를 배치할 시작 및 종료 점을 정의합니다. 응답형 그리드 내에서 구성 요소를 탭하면 파란색 점이 표시됩니다. 응답형 격자는 12개의 동일한 열로 구성됩니다. 대체 열의 흰색 및 파란색 음영은 한 열과 다른 열을 구별합니다.

레이아웃 모드를 사용하여 데스크톱, 태블릿, 휴대폰 및 기타 작은 장치와 같은 모든 장치 유형에 대한 구성 요소의 크기를 조정할 수 있습니다. 태블릿은 데스크탑 버전에서 레이아웃 구성을 자동으로 파생하고 작은 장치는 휴대폰에서 레이아웃 구성을 파생시킵니다. 그러나 자동으로 파생된 구성을 재정의하여 각 장치 유형에 대해 다른 구성을 정의할 수 있습니다.

액세스 레이아웃 모드

Preview 옵션 옆에 있는 적응형 양식 작성 인터페이스 맨 위에 표시되는 드롭다운 목록에서 Layout 을 선택합니다. 양식은 레이아웃 모드로 표시됩니다.

  1. Adobe Experience Manager 작성자 인스턴스에 로그인하고 Adobe Experience Manager > Forms > Forms & Documents​로 이동합니다.

  2. 새 양식을 만들거나 기존 적응형 양식을 엽니다.

  3. Preview 옵션 옆에 있는 드롭다운 목록에서 Layout 을 선택합니다. 양식은 레이아웃 모드로 표시됩니다.

    레이아웃 모드

구성 요소 크기 조정

  1. 레이아웃 모드에서 구성 요소를 탭하여 크기를 조정합니다. 응답형 그리드의 시작 및 끝에 파란색 점이 표시됩니다.

  2. 파란색 점을 드래그하여 놓아 응답형 그리드에서 구성 요소의 위치를 정의합니다.

    레이아웃 모드를 사용한 크기 조정

    구성 요소를 탭한 후 표시되는 도구 모음은 다음 옵션으로 구성됩니다.

    • Parent: 구성 요소의 상위 항목을 선택합니다.
    • Revert breakpoint layout: 모든 크기 변경 사항을 실행 취소하고 구성 요소에 기본 레이아웃을 적용합니다.
    • Float to new line: 동일한 라인 내에 여러 구성 요소가 있는 경우 구성 요소를 다음 라인으로 이동합니다.

    패널 수준에서 Revert breakpoint layout ( 중단점 되돌리기) 옵션을 사용하여 모든 크기 조정 변경을 취소할 수도 있습니다.

    노트

    레이아웃 모드를 사용하여 표 열, 도구 모음, 도구 모음 단추 및 대상 영역 구성 요소의 크기를 조정할 수 없습니다. 스타일 모드를 사용하여 이러한 구성 요소의 크기를 조정할 수 있습니다.

목표: 표 구성 요소와 이미지 구성 요소를 삽입하고 적응형 양식에 서로 평행한 위치에 배치하려는 경우.

  1. 적응형 양식에서 Edit 모드를 사용하여 테이블 및 이미지 구성 요소를 삽입합니다. 이미지 구성 요소는 표 구성 요소 뒤에 표시됩니다.

  2. Layout 모드로 전환하고 Table 구성 요소를 탭합니다. 구성 요소 크기를 조정할 파란색 점은 1 및 12열에 표시됩니다.

  3. 열 12에 있는 파란색 점을 응답형 그리드의 열 6으로 드래그합니다.

    테이블의 끝점 정의

  4. 마찬가지로 Image 구성 요소를 선택하고 열 1의 파란색 점을 응답형 격자의 열 7로 드래그합니다. 테이블 및 이미지 구성 요소가 서로 평행하게 표시됩니다.

    표 및 이미지가 레이아웃 모드에서 동시에 표시됨

    이미지 구성 요소를 선택하고 도구 모음에서 사용할 수 있는 Float to new line 옵션을 탭하여 이미지 구성 요소를 다음 라인으로 이동할 수 있습니다.

패널 크기 조정

개별 구성 요소 대신 전체 패널의 크기를 조정하려면 다음 단계를 실행합니다.

  1. 패널에서 크기를 조정할 구성 요소를 탭하고 부모 선택 을 선택한 다음, 패널이 구성 요소의 바로 위 상위 패널인 경우 드롭다운 목록에서 첫 번째 옵션을 선택합니다.

    응답형 그리드의 시작 및 끝에 파란색 점이 표시됩니다.

  2. 파란색 점을 드래그하여 놓아 응답형 그리드에서 패널의 위치를 정의합니다.
    1단계와 2단계를 반복하고 상위 선택을 선택하여 크기가 조정된 패널을 다음 행으로 이동할 수 있습니다.

패널에 대한 다중 열 레이아웃 정의

다음 단계를 실행하여 패널의 열 수를 정의합니다.

  1. Edit 모드에서 패널을 탭하고 구성을 선택한 다음, Panel Layout 드롭다운 목록에서 Responsive - everything on the page without navigation 옵션을 선택합니다.

  2. 저장을 눌러 속성을 저장합니다.

  3. Layout 모드에서 패널의 구성 요소 중 하나를 탭하고 상위 선택을 선택하고 패널을 선택합니다.

  4. 다중 열을 탭하고 드롭다운 목록에서 열 수를 선택합니다. 열 수는 1부터 12까지입니다. 패널은 다중 열 레이아웃으로 분할됩니다.

레이아웃 모드에서 다중 열

이전 반응형 레이아웃을 위한 새로운 응답형 그리드 활성화

구성 요소의 크기를 조정하려면 Adobe Experience Manager Forms 6.4 이하 버전을 사용하여 만드는 양식에 대해 새로운 반응형 그리드를 활성화합니다.

노트

새 응답형 그리드로 전환하면 양식에 사용된 구성 요소에 이미 정의된 레이아웃 속성이 무시됩니다.

새 응답형 그리드를 활성화하려면 다음 단계를 수행하십시오.

  1. Preview 옵션 옆에 있는 드롭다운 목록에서 Layout 을 선택합니다. 레이아웃 모드 활성화 확인이 표시됩니다.
  2. Yes 을 눌러 양식에 대해 Layout 모드를 활성화합니다.

새로운 응답형 레이아웃으로 적응형 양식에 이전 조각을 포함합니다

적응형 양식에 대한 새로운 응답형 레이아웃을 사용하면 이전 응답형 레이아웃이 포함된 적응형 양식 조각을 양식에 추가할 수 있습니다. 하지만 새 레이아웃은 조각에서 사용되는 구성 요소에 이미 정의된 레이아웃 속성을 삭제합니다. 레이아웃 모드로 전환하여 조각에 사용되는 구성 요소의 레이아웃 속성을 정의할 수 있습니다.

이전 적응형 양식에 새 응답형 레이아웃이 포함된 조각 포함

이전 응답형 레이아웃이 있는 적응형 양식에 새 응답형 레이아웃으로 조각을 포함하는 경우 양식에 대한 레이아웃 모드를 활성화하라는 메시지가 표시되고 조각을 다시 포함하라는 메시지가 표시됩니다.

레이아웃 모드를 활성화하려면 Preview 옵션 옆에 있는 드롭다운 목록에서 Layout 을 선택하고 Yes 을 눌러 확인합니다. Edit 모드를 선택하여 조각을 다시 포함합니다.

이전 응답형 레이아웃이 있는 양식의 레이아웃 모드 비활성화

양식에 사용된 템플릿에 대한 속성을 편집하여 이전 응답형 레이아웃이 있는 양식의 레이아웃 모드를 비활성화할 수 있습니다.

레이아웃 모드를 비활성화하려면 다음 단계를 수행하십시오.

  1. Tools > General > Templates 를 선택하고 양식에 사용된 템플릿을 Edit 모드로 엽니다.

  2. 왼쪽 창에서 양식 컨테이너를 선택하고 Policy. 을 누릅니다

    레이아웃 모드 비활성화

  3. Layout Settings 탭을 탭하고 Disable Layout Mode 을 선택합니다.

  4. 변경 내용 저장을 눌러 템플릿 속성을 저장합니다.

이 페이지에서는