Flex 레이아웃에 추가
InDesign의 Flex 레이아웃 패널을 사용하여 Flex 레이아웃에서 항목을 만들고, 정렬하고, 방향을 설정하고, 줄을 바꾸고 양쪽 정렬하고 간격을 조정할 수 있습니다.
Flex 레이아웃이란 무엇인가요?
Flex 레이아웃은 콘텐츠가 변경될 때 자동으로 적응하는 컨테이너를 만들 수 있는 기능입니다. 컨테이너의 항목은 방향, 간격, 패딩 및 정렬을 사용하여 배치됩니다. 콘텐츠가 추가, 제거 또는 크기가 조정될 때 레이아웃이 자동으로 조정되므로 수동 조정이 필요하지 않습니다.
Flex 레이아웃 옵션 액세스하기
문서에서 오브젝트/그룹/여러 오브젝트를 선택하고 다음 중 하나를 수행하여 Flex 레이아웃 옵션에 액세스하세요.
- 오브젝트 > Flex 레이아웃으로 이동합니다.
- 오브젝트를 마우스 오른쪽 버튼으로 클릭하여 Flex 레이아웃에 액세스하세요.
- 창 > Flex 레이아웃 패널로 이동합니다.
- 한 번 클릭하면 상위 Flex로 작업하고, 두 번 클릭하면 하위 Flex를 선택합니다.
- 직접 선택 도구를 사용하여 하위 항목을 선택합니다.
|
|
선택한 오브젝트를 Flex 레이아웃에 추가합니다. |
|
Flex 레이아웃으로 변환 |
오브젝트(직사각형 프레임, 직사각형 모양 또는 그룹)를 Flex 레이아웃으로 변환합니다. |
|
Flex 레이아웃 제거 |
선택 항목에서 Flex 레이아웃을 제거합니다. Flex 레이아웃에 여러 오브젝트가 있는 경우 그룹이 생성됩니다. 하나의 오브젝트만 있는 경우 해당 오브젝트는 그대로 유지됩니다. |
|
Flex 컨트롤 표시 |
Flex 레이아웃 패널을 엽니다(속성 패널 대신). |
Flex 레이아웃을 통해 InDesign에 CSS Flexbox와 유사한 컨테이너 개념이 도입되었습니다. 이 기능은 하위 오브젝트에 대한 강력한 레이아웃 컨트롤을 제공합니다. Flex 레이아웃을 사용하면 디자인이 체계적이고 더 유연해지며 수동으로 조정할 필요가 적어집니다.
Flex 레이아웃 컨테이너
오브젝트 스타일에서 Flex 레이아웃 속성을 직접 구성할 수 있습니다. Flex 레이아웃 설정이 포함된 수직 컨테이너라는 오브젝트 스타일을 만든 다음 레이아웃의 모든 Flex 레이아웃 컨테이너에 적용할 수 있습니다.
예:
오브젝트 스타일 패널을 사용하여 Flex 레이아웃을 적용하고 방향, 정렬, 간격과 같은 속성을 설정하세요. 저장하면 이 스타일을 다른 컨테이너에 적용하여 레이아웃 동작이 일관되게 할 수 있습니다.
하위 Flex 레이아웃
오브젝트 스타일의 동일한 Flex 레이아웃 섹션에서 Flex 레이아웃 하위 요소와 중첩된 하위 요소의 속성도 정의할 수 있어, 고정 또는 유연한 치수와 같은 동작을 레이아웃 전체에서 표준화할 수 있습니다.
- 대화형 요소의 직접 만들기: Flex 레이아웃 내의 하위 요소를 별도로 생성하고 Flex 레이아웃에 추가하지 않고도 대화형 요소로 변환할 수 있습니다.
- 하위 요소 잠금: Flex 레이아웃 내의 하나 이상의 하위 요소를 잠가서 직접 드래그, 크기 조정 또는 프레임 밖으로 이동하지 않도록 하면서 키보드 화살표 키를 사용한 위치 변경은 계속 허용할 수 있습니다.
- 하위 요소의 키보드 탐색: 가로 레이아웃에서는 왼쪽 또는 오른쪽 화살표 키를, 세로 레이아웃에서는 위쪽 또는 아래쪽 화살표 키를 사용하여 잠긴 요소나 잠기지 않은 요소의 위치를 변경할 수 있습니다.
오브젝트 스타일을 사용하여 잠긴 Flex 프레임 내에서 Flex 속성을 정의할 수 있습니다.
Flex 레이아웃 패널
패널에 액세스하려면 창 > Flex 레이아웃으로 이동하세요. Flex 레이아웃 패널이 열립니다. 이제 요구 사항에 따라 Flex 레이아웃을 만들거나 추가하거나 기존 레이아웃을 사용자 지정할 수 있습니다. 선택 항목이 없어도 패널을 사용하여 기본값을 변경할 수 있습니다(자동 감지가 꺼져 있는 경우). 환경 설정 > 일반 > Flex 레이아웃 설정 자동 감지 및 적용으로 이동하여 자동 감지 설정을 확인하세요.
A. Flex 컨테이너의 너비 B. Flex 컨테이너의 높이 C. 감싸기 D. Flex 레이아웃에서 오브젝트의 방향 E. 수직 간격 F. 가로 간격 G. 여백 H. 균등 배치 I. Flex 레이아웃에서 오브젝트의 정렬
|
폭과 높이 |
Flex 레이아웃 컨테이너와 그 하위 요소의 크기를 모두 독립적으로 제어할 수 있습니다. Flex 레이아웃 컨테이너의 폭과 높이는 다음과 같이 설정할 수 있습니다.
하위 Flex 레이아웃의 경우(중첩된 Flex 레이아웃 포함):
|
||||||||||||||||||
|
감싸기 |
컨테이너에서 포장되는 오브젝트를 켜거나 드래그합니다. |
||||||||||||||||||
|
방향
|
컨테이너 내 항목의 흐름 방향을 선택합니다(행, 행 역순, 열, 열 역순). |
||||||||||||||||||
|
간격 |
패딩과 간격을 제어합니다.
|
||||||||||||||||||
|
균등 배치 |
주축을 따라 항목의 분포를 제어합니다.
|
||||||||||||||||||
|
정렬 |
교차축을 따라 다음과 같이 항목을 정렬합니다. 상위, 중앙, 하위, 또는 왼쪽, 중앙, 오른쪽.
|
캔버스 내 패딩 및 간격 컨트롤
Flex 레이아웃은 패딩과 간격을 조정하기 위한 대화형 캔버스 내 컨트롤을 제공합니다.
- 연결된 패딩: 네 개의 패딩 값을 모두 함께 조정합니다.
- 연결되지 않은 패딩: 각 면을 독립적으로 조정합니다.
- 가로 및 세로 간격: 줄바꿈된 행이나 열을 포함하여 항목 간의 간격을 직접 수정합니다.
캔버스의 시각적 표시기는 현재 값을 반영하며 Flex 레이아웃 패널에서 실시간으로 업데이트됩니다.
Flex 레이아웃 프레임 변환 및 기울이기
이제 Flex 레이아웃의 동작을 방해하지 않고 회전, 미러링, 크기 조절 또는 기울이기를 할 수 있습니다. 변환은 상위 및 중첩된 Flex 프레임 모두에 적용되며, 오브젝트를 변환하는 동안 Flex 레이아웃 패널이 활성 상태로 유지됩니다. 이를 통해 Flex 구조를 손상시키지 않고 레이아웃을 변환하면서 정렬, 간격, 줄 바꿈 및 방향을 조정할 수 있습니다.