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

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

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

액세스 레이아웃 모드

미리 보기 옵션 옆에 있는 응용 양식 작성 인터페이스 상단에 표시되는 드롭다운 목록에서 레이아웃​을 선택합니다. 양식은 레이아웃 모드로 표시됩니다.

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

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

  3. 미리 보기 옵션 옆에 맨 위에 표시되는 드롭다운 목록에서 레이아웃​을 선택합니다. 양식은 레이아웃 모드로 표시됩니다.

    레이아웃 모드

구성 요소 크기 조정

  1. 레이아웃 모드에서 구성 요소를 눌러 크기를 조정합니다. 응답형 격자의 시작과 끝에 파란색 점이 표시됩니다.

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

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

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

    • 상위: 구성 요소의 상위 항목을 선택합니다.
    • 새 라인으로 이동: 동일한 라인 내에 여러 구성 요소가 있는 경우 구성 요소를 다음 라인으로 이동합니다.

    모든 크기 조정 변경 내용을 실행 취소하고, 중단점 레이아웃 되돌리기( 중단점 되돌리기) 옵션을 사용하여 크기가 조정된 구성 요소를 포함하는 패널에 기본 레이아웃을 적용할 수 있습니다. 크기를 조정한 구성 요소의 상위 항목을 눌러 옵션을 봅니다.

    NOTE

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

목표: 표 구성 요소 및 이미지 구성 요소를 삽입하고 적응형 양식으로 서로 나란히 배치할 수 있습니다.

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

  2. 레이아웃 모드로 전환하고 표 구성 요소를 누릅니다. 구성 요소의 크기를 조정할 파란색 점이 1 및 12열에 표시됩니다.

  3. 12열에 있는 파란색 점을 응답형 격자의 열 6으로 드래그하여 놓습니다.

    표의 끝점을 정의합니다.

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

    레이아웃 모드에서 표 및 이미지 병행

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

패널 크기 조정

개별 구성 요소 대신 전체 패널의 크기를 조정하려면 다음 단계를 수행하십시오.

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

    응답형 격자의 시작과 끝에 파란색 점이 표시됩니다.

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

패널의 다중 열 레이아웃 정의

다음 단계에 따라 패널의 열 개수를 정의합니다.

  1. 편집 모드에서 패널을 누르고 구성을 선택한 다음 패널 레이아웃 드롭다운 목록에서 탐색​]옵션이 없는 페이지의 모든 항목을 선택합니다.[

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

  3. 레이아웃 모드에서 패널의 구성 요소를 누르고 상위 선택을 선택한 다음 패널을 선택합니다.

  4. 다중 열을 누르고 드롭다운 목록에서 열 수를 선택합니다. 열 수는 1부터 12까지입니다. 패널은 여러 열 레이아웃으로 나뉘어집니다.

레이아웃 모드의 다중 열

이전 응답형 레이아웃에 대해 새 응답형 격자 활성화

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

NOTE

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

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

  1. 미리 보기 옵션 옆에 맨 위에 표시되는 드롭다운 목록에서 레이아웃​을 선택합니다. 레이아웃 모드를 활성화하라는 확인이 표시됩니다.
  2. 양식에 대해 Yes Layout 모드를 활성화하려면 <a0/>Yes<a1/>을 누릅니다.

새 응답형 레이아웃을(를) 사용하여 기존 조각을 적응형 양식에 포함

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

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

기존 응답형 레이아웃을 사용하여 새 응답형 레이아웃이 포함된 조각을 적응형 양식에 포함시킨 경우, 시스템에서는 양식의 레이아웃 모드를 활성화하고 조각을 다시 포함하라는 메시지를 표시합니다.

레이아웃 모드를 활성화하려면 미리 보기 옵션 옆에 표시되는 드롭다운 목록에서 레이아웃​을 선택하고 Yes​를 눌러 확인합니다. 편집 모드를 선택하여 조각을 다시 포함합니다.

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

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

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

  1. 도구 > 일반 > 템플릿​을 선택하고 양식에 사용된 템플릿을 편집 모드에서 엽니다.

  2. 왼쪽 창에서 문서 컨테이너를 선택하고 정책을 누릅니다.

    레이아웃 모드 비활성화

  3. 레이아웃 설정 탭을 누르고 레이아웃 모드 비활성화​를 선택합니다.

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

이 페이지에서는