Adobe Captivate에서 콘텐츠 블록 및 구성 요소에 안쪽 여백 추가

크기 조정: 요소 주위에 더 많은 공간을 확보해야 하는 경우 안쪽 여백을 추가하거나 늘려봅니다. 이것은 특히 대화형 요소에 유용하며, 이러한 요소에서 추가 공간은 액세스 가능성을 향상시킬 수 있습니다.
테두리 간격: 안쪽 여백은 콘텐츠와 테두리 사이에 간격을 추가합니다. 그러면 페이지의 다른 요소와의 정렬이 좋아질 수 있습니다.

이 페이지의 주제는 다음과 같습니다.

콘텐츠 블록 안쪽 여백
구성 요소 수준 안쪽 여백
다른 구성 요소에 대한 안쪽 여백의 예
자동 레이아웃

콘텐츠 블록 안쪽 여백

경계에서 전체 콘텐츠 블록에 안쪽 여백을 추가하고 다른 뷰포트에서 동작을 확인합니다.

오른쪽 도구 모음에서 시각적 속성을 선택하고 맞춤 및 간격 섹션을 확장하여 안쪽 여백 값을 확인합니다.

콘텐츠 블록 안쪽 여백
콘텐츠 너비 슬라이더를 사용하여 왼쪽이나 오른쪽에서 콘텐츠 블록의 가로 간격을 수정합니다. 슬라이더를 사용하여 원하는 간격 백분율을 지정합니다. 너비를 조정하면 안쪽 여백 값이 자동으로 업데이트되어 변경 사항을 반영합니다.
모든 장치 뷰포트에서 콘텐츠 너비를 비례적으로 조정하려면자동 레이아웃을 활성화하고, 콘텐츠 너비를 수동으로 조정하려면 끕니다. 다양한 뷰포트에 대한 자동 레이아웃에 대해 자세히 알아보세요.

자동 레이아웃이 비활성화되어 있으면 모든 측면에 안쪽 여백 값을 설정할 수 있으며 각 뷰포트의 콘텐츠 너비를 개별적으로 조정할 수 있습니다. 즉, 다른 뷰포트에 영향을 주지 않고 한 뷰포트에 대한 콘텐츠 너비를 추가할 수 있습니다.

자동 레이아웃이 비활성화된 태블릿 보기에 대한 콘텐츠 블록 안쪽 여백

참고:

프로젝트 너비가 고정되어 있으므로 콘텐츠 블록의 가로 안쪽 여백은 백분율로 설정됩니다. 세로 안쪽 여백은 긴 스크롤 콘텐츠를 수용하기 위해 픽셀 단위로 정의됩니다.

구성 요소 수준 안쪽 여백

이미지, 텍스트, 대화형 요소, 카드 및 위젯 개체를 포함하여 콘텐츠 블록 내의 각 요소에 대한 안쪽 여백을 통합합니다. 콘텐츠 블록 내의 구성 요소에 대한 안쪽 여백은 다음 두 가지 방법으로 추가할 수 있습니다.

균일 안쪽 여백: 네 면 모두에 동시에 안쪽 여백을 추가합니다.

비균일 안쪽 여백: 각 면에 개별적으로 안쪽 여백을 추가합니다. 이것은 기본적으로 선택됩니다.

다음은 텍스트 블록 내의 네 면 모두에 50px의 균일한 안쪽 여백의 예입니다.

구성 요소의 가장자리 위로 마우스를 가져가면 끌어서 간격을 조정할 수 있는 분홍색 핸들이 표시됩니다. 모든 면에 균일한 안쪽 여백을 적용하려면 Shift 키를 누른 상태에서 핸들을 끕니다.

다른 구성 요소에 대한 안쪽 여백의 예

다음은 1366x768px 치수의 프로젝트에서 다양한 구성 요소에 대한 안쪽 여백의 몇 가지 예입니다.

모든 텍스트 블록에 안쪽 여백을 추가하여 콘텐츠와 경계 사이에 공간을 만듭니다. 각 텍스트 구성 요소(제목, 부제 또는 본문 텍스트)에 대해 분홍색 핸들을 사용하여 캔버스에서 직접 끌어서 안쪽 여백을 삽입합니다. 또는 텍스트 구성 요소를 선택하고 시각적 속성 아래의 맞춤 및 간격 섹션에서 안쪽 여백 값을 입력합니다.

이 예제에서는 특히 하단에 100px의 안쪽 여백을 적용하여, 본문 구성 요소 내에 여러 열로 구성된 텍스트 블록에 안쪽 여백을 추가하는 방법을 보여 줍니다.

이미지를 선택하고 이미지 테두리 근처에 있는 분홍색 핸들을 끕니다. 또는 시각적 속성 메뉴의 맞춤 및 간격 섹션에서 안쪽 여백 값을 입력할 수 있습니다.

이 예제에서는 이미지 컨테이너의 경계에서 60픽셀의 하단 안쪽 여백을 보여 줍니다.

이미지 그리드의 이미지, 위젯, 카드, 문자 내, 그리고 질문 슬라이드의 이미지에 안쪽 여백을 추가하지만 배경 이미지에는 안쪽 여백을 추가할 수 없습니다.

이것은 대화형 버튼 구성 요소 내에 안쪽 여백을 추가하는 예입니다. 버튼 구성 요소를 추가하고 콘텐츠 블록 내에서 버튼을 선택합니다. 분홍색 핸들을 사용하여 간격을 끌어서 추가하거나 맞춤 및 간격 섹션에서 안쪽 여백 값을 입력합니다.

참고:

라디오 그룹 및 드롭다운 대화형 구성 요소는 안쪽 여백을 지원하지 않습니다.

머리글, 부제, 이미지, 카드 및 아이콘에 대한 텍스트와 같이 위젯 내의 모든 구성 요소에 안쪽 여백을 추가합니다. 플립카드 위젯의 이 예에서는 위젯 내의 구성 요소를 선택하고 분홍색 핸들을 사용하여 안쪽 여백을 조정할 수 있습니다.

또는 구성 요소를 선택하고 시각적 속성의 맞춤 및 간격에서 안쪽 여백을 추가합니다. 이 예제에서는 30px의 안쪽 여백이 카드 안쪽의 뒤집기 아이콘에 추가됩니다. 마찬가지로, 각 카드 내에서 텍스트 또는 이미지를 선택하고 경계에 안쪽 여백을 추가할 수 있습니다.

텍스트, 이미지, 대화형 버튼 등 질문 슬라이드의 모든 구성 요소에 안쪽 여백을 포함합니다. 질문 슬라이드에 있는 옵션 사이에 공백을 추가하면 선택 작업이 더 쉬워지고 질문의 전체적인 미적 요소가 향상됩니다. 이것은 이미지 옵션 내에 안쪽 여백이 있는 객관식 질문의 예입니다.

자동 레이아웃

자동 레이아웃을 활성화하면 안쪽 여백이 콘텐츠 블록 및 구성 요소에 대한 장치 뷰포트 전체에서 비례적으로 조정되며, 값은 프로젝트의 크기에 따라 데스크탑, 태블릿 및 모바일 장치에 반응합니다. Adobe Captivate에서 프로젝트 치수를 변경하는 방법에 대해 자세히 알아보세요.

활성화한 경우 자동 레이아웃 동작

자동 레이아웃을 활성화하면 여러 장치 전체에서 안쪽 여백이 비례적으로 조정되어, 각 뷰포트의 값이 자동으로 수정됩니다. 해상도가 1366x768px인 프로젝트에서 데스크탑에 있는 50px의 안쪽 여백은 태블릿에서는 28px로, 모바일에서는 16px로 크기가 조정되어 종횡비를 유지합니다.