반응형 이미지용 초점

이미지의 주요 부분이 잘리지 않도록 초점을 설정할 수 있습니다. 초점은 동일한 이미지가 다른 크기로 표시될 수 있는 반응형 레이아웃을 사용할 때 특히 유용합니다.

초점

초점 사용 가능성에 대한 제한사항:

• 이미지 크기 조절 유형 - 크기 조절 속성은 이미지 잘라 채움 또는 없음으로 설정되어야 합니다.
• 이미지 소스 유형 - 소스가 외부 URL이 아닌 로컬에 있어야 합니다.
• 동적 광고 - 동적 광고에서는 초점이 지원되지 않습니다.
• 애니메이션 - 초점에는 애니메이션을 적용할 수 없습니다. 이미지의 크기에 애니메이션을 적용하면 이 이미지에 설정한 초점은 초기 이미지 크기에 적용됩니다.

초점을 사용 설정하면 정렬 옵션이 재정의됩니다.

초점 설정

1. 다음 방법 중 하나를 사용하여 이미지 초점 수정 대화상자를 엽니다.
   • 스테이지에서 이미지를 선택한 다음, 속성 패널에서 초점 사용 설정 체크박스를 클릭합니다.
   • 이미지를 마우스 오른쪽 버튼으로 클릭하고 팝업 메뉴에서 초점 설정...을 선택합니다.
2. 초점을 원하는 위치로 드래그합니다.
   • 기본적으로 초점은 이미지의 중앙에 있습니다.
   • 초점의 컨트롤은 흰색 원으로 표시되어 눈에 잘 띄고 클릭하기 쉽지만, 가운데에 있는 십자선이 실제 초점을 나타냅니다.
   • 키보드의 화살표 키를 사용하면 초점을 한 번에 1픽셀씩 이동할 수 있습니다.
   • 이미지를 마우스 오른쪽 버튼으로 클릭하고 팝업 메뉴에서 재설정을 선택하거나 Ctrl+R 키(Windows) 또는 ⌘+R 키(Mac)를 눌러 초점을 가운데로 재설정할 수 있습니다.
3. 미리보기 탭으로 전환하면 초점이 다양한 이미지 가로 세로 비율의 이미지 잘림에 어떤 영향을 주는지 볼 수 있습니다.
4. 확인을 클릭합니다.

이미지 소스를 변경하면 초점을 유지할지, 수정할지 또는 삭제할지를 묻는 메시지가 Google Web Designer에 표시됩니다.

초점 수정

기존 초점의 위치를 변경할 수 있습니다.

1. 다음 방법 중 하나를 사용하여 이미지 초점 수정 대화상자를 엽니다.
   • 이미지를 마우스 오른쪽 버튼으로 클릭하고 팝업 메뉴에서 초점 수정...을 선택합니다.
   • 이미지를 선택하고 속성 패널의 초점 사용 설정 체크박스 옆에 있는 초점 위치 설정 버튼을 클릭합니다.
2. 초점을 새 위치로 드래그합니다.
3. 확인을 클릭합니다.

초점 전환

초점을 사용 중지하고 정렬 옵션을 사용하면 이미지가 어떻게 표시되는지 볼 수 있습니다. 초점을 다시 사용 설정하면 Web Designer가 이전에 설정된 초점 위치를 기억합니다.

다음 방법 중 하나를 사용하여 선택한 이미지의 초점을 전환할 수 있습니다.

• 속성 패널에서 초점 사용 설정 체크박스를 클릭합니다.
• 이미지를 마우스 오른쪽 버튼으로 클릭하고 팝업 메뉴에서 초점 사용 설정 또는 초점 사용 중지를 선택합니다.

초점 삭제

1. 마우스 오른쪽 버튼으로 이미지를 클릭합니다.
2. 팝업 메뉴에서 초점 삭제를 선택합니다.

초점이 있는 이미지 대체

이미지 대체... 기능을 사용하거나 초점이 사용 설정된 소스 이미지를 변경하면 동일한 초점을 그대로 유지할지, 초점을 수정할지 또는 새 이미지에서 이전 초점을 삭제할지 결정할 수 있습니다.

코드 보기에서의 초점

코드 보기에서 초점 좌표는 gwd-image 요소의 focalpoint 속성에 설정되어 있습니다. 예: