이미지의 주요 부분이 잘리지 않도록 초점을 설정할 수 있습니다. 초점은 동일한 이미지가 다른 크기로 표시될 수 있는 반응형 레이아웃을 사용할 때 특히 유용합니다.
배경 이미지용 초점
초점은 이미지를 배경 이미지로 설정할 때 유용할 수 있습니다. 이미지의 너비와 높이를 100%로 설정하고 초점을 설정하면 이미지의 가장 중요한 부분이 요소 크기와 관계없이 항상 표시되도록 할 수 있습니다.
초점 사용 가능성에 대한 제한사항:
- 이미지 크기 조절 유형 - 크기 조절 속성은 이미지 잘라 채움 또는 없음으로 설정되어야 합니다.
- 이미지 소스 유형 - 소스가 외부 URL이 아닌 로컬에 있어야 합니다.
- 동적 광고 - 동적 광고에서는 초점이 지원되지 않습니다.
- 애니메이션 - 초점에는 애니메이션을 적용할 수 없습니다. 이미지의 크기에 애니메이션을 적용하면 이 이미지에 설정한 초점은 초기 이미지 크기에 적용됩니다.
초점을 사용 설정하면 정렬 옵션이 재정의됩니다.
초점 설정
- 다음 방법 중 하나를 사용하여 이미지 초점 수정 대화상자를 엽니다.
- 스테이지에서 이미지를 선택한 다음, 속성 패널에서 초점 사용 설정 체크박스를 클릭합니다.
- 이미지를 마우스 오른쪽 버튼으로 클릭하고 팝업 메뉴에서 초점 설정...을 선택합니다.
- 초점을 원하는 위치로 드래그합니다.
- 기본적으로 초점은 이미지의 중앙에 있습니다.
- 초점의 컨트롤은 흰색 원으로 표시되어 눈에 잘 띄고 클릭하기 쉽지만, 가운데에 있는 십자선이 실제 초점을 나타냅니다.
- 키보드의 화살표 키를 사용하면 초점을 한 번에 1픽셀씩 이동할 수 있습니다.
- 이미지를 마우스 오른쪽 버튼으로 클릭하고 팝업 메뉴에서 재설정을 선택하거나 Ctrl+R 키(Windows) 또는 ⌘+R 키(Mac)를 눌러 초점을 가운데로 재설정할 수 있습니다.
- 미리보기 탭으로 전환하면 초점이 다양한 이미지 가로 세로 비율의 이미지 잘림에 어떤 영향을 주는지 볼 수 있습니다.
- 확인을 클릭합니다.
이미지 소스를 변경하면 초점을 유지할지, 수정할지 또는 삭제할지를 묻는 메시지가 Google Web Designer에 표시됩니다.
초점 수정
기존 초점의 위치를 변경할 수 있습니다.
- 다음 방법 중 하나를 사용하여 이미지 초점 수정 대화상자를 엽니다.
- 이미지를 마우스 오른쪽 버튼으로 클릭하고 팝업 메뉴에서 초점 수정...을 선택합니다.
- 이미지를 선택하고 속성 패널의 초점 사용 설정 체크박스 옆에 있는 초점 위치 설정
버튼을 클릭합니다.
- 초점을 새 위치로 드래그합니다.
- 확인을 클릭합니다.
초점 전환
초점을 사용 중지하고 정렬 옵션을 사용하면 이미지가 어떻게 표시되는지 볼 수 있습니다. 초점을 다시 사용 설정하면 Web Designer가 이전에 설정된 초점 위치를 기억합니다.
다음 방법 중 하나를 사용하여 선택한 이미지의 초점을 전환할 수 있습니다.
- 속성 패널에서 초점 사용 설정 체크박스를 클릭합니다.
- 이미지를 마우스 오른쪽 버튼으로 클릭하고 팝업 메뉴에서 초점 사용 설정 또는 초점 사용 중지를 선택합니다.
초점 삭제
- 마우스 오른쪽 버튼으로 이미지를 클릭합니다.
- 팝업 메뉴에서 초점 삭제를 선택합니다.
초점이 있는 이미지 대체
이미지 대체... 기능을 사용하거나 초점이 사용 설정된 소스 이미지를 변경하면 동일한 초점을 그대로 유지할지, 초점을 수정할지 또는 새 이미지에서 이전 초점을 삭제할지 결정할 수 있습니다.
초점 및 미디어 규칙
미디어 규칙을 사용하여 초점 위치를 변경할 수는 없습니다. 표시 영역 크기에 따라 다른 이미지를 표시하고 싶지만 이미지에 동일한 초점을 사용할 수 없는 경우, 문서에 두 이미지를 모두 넣은 후 미디어 규칙을 사용하여 각 이미지를 표시하지 않을 표시 영역 크기에 대해 해당 불투명도를 0으로 변경하세요.
코드 보기에서의 초점
코드 보기에서 초점 좌표는 gwd-image 요소의 focalpoint 속성에 설정되어 있습니다. 예:
<gwd-image class="gwd-image-1t0s" id="gwd-image_1" scaling="none" source="assets/moon_landscape.jpg" focalpoint="540 295"></gwd-image>