구성요소 API

`gwd-360gallery`

회전하는 개체를 표시하는 갤러리 개체입니다.

속성

이름	설명
`images:string`	갤러리에서 사용되는 쉼표로 구분된 이미지 경로 문자열입니다.
`autoplay:boolean`	갤러리 로드 후 갤러리가 자동으로 재생되어 갤러리의 이미지를 차례로 표시해야 합니다.
`wrap:boolean`	끝에서 중단되는 대신, 사용자가 첫 번째에서 마지막 프레임까지 갤러리를 스와이프할 수 있어야 합니다.

이벤트

이름	설명
`firstinteraction`	사용자가 처음으로 갤러리와 상호작용할 때 전송됩니다.
`allframesviewed`	갤러리의 모든 프레임이 한 번 이상 표시되었을 때 전송됩니다.
`allframesloaded`	갤러리의 모든 프레임이 로드되었을 때 전송됩니다.
`frameshown`	새 프레임이 표시되었을 때 전송됩니다.
`frameactivated`	새 프레임이 활성화되기 시작할 때(아직 보이지 않더라도) 전송됩니다.
`frametap`	사용자가 프레임을 탭할 때 전송됩니다.

메서드

이름	설명
`goToFrame(frame:number, opt_animate:string, opt_direction:string)`	지정한 프레임에 애니메이션이 적용됩니다.
`rotateOnce(opt_duration:number, opt_direction:string)`	갤러리의 객체를 한 번 회전합니다.
`goForwards()`	갤러리를 한 프레임 앞으로 이동합니다.
`goBackwards()`	갤러리를 한 프레임 뒤로 이동합니다.

3D 핫스팟

`gwd-3d-hotspot`

3D 모델에 주석을 표시하는 요소입니다.

속성

이름	설명
`data-position:string`	핫스팟의 위치입니다.
`data-normal:string`	핫스팟의 표준입니다.
`hotspot-name:string`	핫스팟의 이름입니다.
`hotspot-title:string`	정보 카드에 표시할 제목 텍스트입니다.
`hotspot-description:string`	정보 카드에 표시할 설명 텍스트입니다.
`hide-infocard:boolean`	정보 카드를 숨길지 여부를 나타냅니다.

3D 핫스팟 컨테이너

`gwd-3d-hotspot-container`

3D 모델의 주석을 위한 컨테이너 요소입니다.

속성

이름	설명
`up-image:file`	누르지 않은 상태의 3D 핫스팟 이미지 URL입니다.
`over-image:file`	마우스 오버 상태의 3D 핫스팟 이미지 URL입니다.
`down-image:file`	누른 상태의 3D 핫스팟 이미지 URL입니다.

3D 모델

`gwd-3d-model`

3D 뷰어 구성요소입니다.

속성

이름	설명
`id-url:download`	3D 모델의 ID 또는 URL입니다.
`data-gwd-refresh-assets:string`	3D 애셋을 새로고침해야 하는지 결정하기 위해 Google Web Designer에서 사용하는 속성입니다.
`glass:boolean`	3D 모델에 유리 소재를 사용합니다.
`src:string`	표시할 모델입니다.
`transparent:boolean`	3D 모델에서 투명한 배경을 사용합니다.
`gesture-cue-icon:file`	동작 큐 아이콘입니다.
`gesture-cue-text:string`	동작 큐 아이콘 아래에 표시되는 텍스트입니다.
`gesture-cue-duration:number`	동작 큐의 표시 시간(초)입니다. 값이 -1인 경우 시간 제한이 없습니다.

이벤트

이름	설명
`scene-rendered`	3D 모델 장면이 처음 렌더링된 후 전송됩니다.
`camera-changed`	3D 카메라 속성이 변경되면 전송됩니다. event.detail 객체에는 카메라의 모든 현재 속성이 포함되어 있습니다.
`hotspot-clicked`	핫스팟을 클릭하면 전송됩니다. event.detail 객체에는 클릭된 핫스팟의 이름이 포함되어 있습니다.
`interaction-start`	사용자가 3D 모델과 상호작용을 시작할 때 전송됩니다.
`interaction-end`	사용자가 3D 모델과 상호작용을 중지하면 전송됩니다.

메서드

이름	설명
`setYaw(yaw:number)`	카메라 제한을 고려하여 애니메이션 없이 요 각도를 설정합니다.
`setTargetYaw(targetYaw:number)`	카메라 제한 또는 -360도에서 360도 사이의 바닥 회전을 기준으로 목표 요 각도를 설정합니다.
`setTargetPitch(targetPitch:number)`	목표 피치 각도를 설정합니다.
`incrementTargetPitch(pitchDelta:number)`	델타 각도의 대상 피치를 증가시킵니다.
`setTargetZoom(targetZoom:number)`	목표 확대/축소를 설정합니다(미터 단위).
`incrementTargetZoom(zoomDelta:number)`	목표 확대/축소를 증가시킵니다(미터 단위).
`setTargetPivot(targetPivotX:number, targetPivotY:number, targetPivotZ:number)`	목표 피봇을 설정합니다(미터 단위).
`setTargetLocalPan(targetLocalPanX:number, targetLocalPanY:number)`	목표 로컬 팬을 설정합니다(미터 단위).
`setMaterialColor(materialName:string, colorR:number, colorG:number, colorB:number)`	소재 색상을 설정합니다.
`playAnimation(animationName:string)`	애니메이션을 재생합니다.
`pauseAnimation(animationName:string)`	애니메이션을 일시중지합니다.
`setAnimationTime(animationName:string, animationTime:number)`	애니메이션 시간을 설정합니다(초 단위).
`lookAtHotspot(hotspotName:string)`	카메라를 이동하고 회전하여 핫스팟에 초점을 맞춥니다.

3D 모델 뷰어

`gwd-3d-model-viewer`

3D 모델 뷰어 구성요소를 래핑하는 구성요소입니다.

속성

이름	설명
`src:file`	3D 모델의 소스 파일입니다.
`gesture-cue-icon:file`	동작 큐 아이콘입니다.
`gesture-cue-text:string`	동작 큐 아이콘 아래에 표시되는 텍스트입니다.
`gesture-cue-duration:number`	동작 큐의 표시 시간(초)입니다. 값이 -1인 경우 시간 제한이 없습니다.
`skybox-image:file`	3D 모델 장면의 배경 이미지입니다.
`environment-image:file`	3D 모델의 환경 반사를 제어합니다.

이벤트

이름	설명
`scene-rendered`	3D 모델 장면이 처음 렌더링된 후 전송됩니다.
`camera-changed`	3D 카메라 속성이 변경되면 전송됩니다. event.detail 객체에는 카메라의 모든 현재 속성이 포함되어 있습니다.
`hotspot-clicked`	핫스팟을 클릭하면 전송됩니다. event.detail 객체에는 클릭된 핫스팟의 이름이 포함되어 있습니다.
`interaction-start`	사용자가 3D 모델과 상호작용을 시작할 때 전송됩니다.
`interaction-end`	사용자가 3D 모델과 상호작용을 중지하면 전송됩니다.

메서드

이름	설명
`setYaw(yaw:number)`	카메라 제한을 고려하여 애니메이션 없이 요 각도를 설정합니다.
`setTargetYaw(targetYaw:number)`	카메라 제한 또는 -360도에서 360도 사이의 바닥 회전을 기준으로 목표 요 각도를 설정합니다.
`setTargetPitch(targetPitch:number)`	목표 피치 각도를 설정합니다.
`incrementTargetPitch(pitchDelta:number)`	델타 각도의 대상 피치를 증가시킵니다.
`setTargetZoom(targetZoom:number)`	목표 확대/축소를 설정합니다(미터 단위).
`incrementTargetZoom(zoomDelta:number)`	목표 확대/축소를 증가시킵니다(미터 단위).
`setTargetPivot(targetPivotX:number, targetPivotY:number, targetPivotZ:number)`	목표 피봇을 설정합니다(미터 단위).
`setTargetLocalPan(targetLocalPanX:number, targetLocalPanY:number)`	목표 로컬 팬을 설정합니다(미터 단위).
`setMaterialColor(materialName:string, colorR:number, colorG:number, colorB:number)`	소재 색상을 설정합니다.
`playAnimation(animationName:string)`	애니메이션을 재생합니다.
`pauseAnimation(animationName:string)`	애니메이션을 일시중지합니다.
`setAnimationTime(animationName:string, animationTime:number)`	애니메이션 시간을 설정합니다(초 단위).

캘린더에 추가

`gwd-addtocalendar`

캘린더에 이벤트를 추가합니다.

속성

이름	설명
`event-title:string`	사용자의 캘린더에 표시되는 이벤트 이름입니다.
`start-date:string`	이벤트가 시작되는 날짜입니다.
`start-time:string`	이벤트가 시작되는 시간입니다(24시간 단위).
`end-date:string`	이벤트가 종료되는 날짜입니다.
`end-time:string`	이벤트가 종료되는 시간입니다(24시간 단위).
`timezone:string`	이벤트의 시간대입니다. 설정되면 사용자가 다른 시간대에 있을 때 이에 맞게 시간이 조정됩니다.
`location:string`	이벤트의 위치입니다.
`description:string`	이벤트에 대한 설명입니다.
`icalendar:boolean`	iCalendar 파일 사용 여부입니다.
`google:boolean`	Google 캘린더 사용 여부입니다.
`windows-live:boolean`	Windows Live Calendar 사용 여부입니다.
`yahoo:boolean`	Yahoo Calendar 사용 여부입니다.
`bg-color:string`	드롭다운 배경색의 16진수 값입니다.
`font-color:string`	드롭다운 글꼴 색상의 16진수 값입니다.
`font-family:string`	드롭다운 글꼴의 이름입니다.
`font-size:string`	드롭다운 글꼴의 크기입니다.
`font-weight:string`	드롭다운 글꼴의 두께입니다.
`highlight-color:string`	드롭다운 강조표시 색상의 16진수 값입니다.

오디오

`gwd-audio`

HTMLAudioElement를 래핑하는 구성요소입니다.

속성

이름	설명
`autoplay:boolean`	로드 시 오디오 자동재생 여부입니다.
`loop:boolean`	완료 시 오디오 반복 여부입니다.
`muted:boolean`	오디오 음소거 시작 여부입니다.
`controls:boolean`	기본 네이티브 플레이어 컨트롤 사용 설정 여부입니다.
`sources:file`	쉼표로 구분되어 있는 여러 형식으로 된 오디오 소스의 문자열입니다.

이벤트

이름	설명
`play`	이전 일시중지 이벤트 이후 미디어가 재생되기 시작할 때 전송됩니다.
`pause`	재생이 일시중지될 때 전송됩니다.
`playing`	미디어가 재생되기 시작할 때(최초 재생 시, 일시중지 이후 또는 종료 및 다시 시작 후) 전송됩니다.
`ended`	재생이 완료될 때 전송됩니다.
`volumechange`	오디오 볼륨을 변경할 때 전송됩니다(볼륨 설정 시 및 음소거 속성 변경 시).
`seeked`	찾기 작업이 완료될 때 전송됩니다.
`waiting`	다른 작업(예: 찾기)이 아직 완료되지 않아 요청된 작업(예: 재생)이 지연될 때 전송됩니다.

메서드

이름	설명
`mute()`	음소거/음소거 해제 간에 오디오를 전환합니다.
`pause()`	오디오를 일시중지합니다.
`play()`	오디오를 재생합니다.
`replay()`	오디오를 다시 재생합니다.
`seek(time:number)`	오디오에서 지정된 시간으로 건너뜁니다.

회전 갤러리

`gwd-carouselgallery`

회전 스타일 레이아웃에 프레임을 표시하는 갤러리 객체입니다.

속성

이름	설명
`images:string`	갤러리에서 사용되는 쉼표로 구분된 이미지 경로 문자열입니다.
`groups:string`	쉼표로 구분된 그룹 ID 문자열입니다.
`transition-duration:number`	갤러리 애니메이션 속도(밀리초)입니다.
`start-frame:number`	처음에 표시할 이미지의 수입니다.
`autoplay:boolean`	프레임에 대한 1회 자동 재생 여부입니다.
`has-navigation:boolean`	갤러리 내비게이션 컨트롤을 자동으로 포함할지 여부입니다.
`navigation-thumbnails:boolean`	내비게이션에 점 대신 썸네일 이미지를 사용할지 여부입니다.
`navigation-highlight:color`	내비게이션의 활성 프레임을 강조표시할 때 사용되는 CSS 색상입니다.
`scaling:string`	프레임에 맞게 이미지 콘텐츠 크기가 조절되는 방식입니다.
`frame-width:number`	콘텐츠 패널 하나의 너비입니다.
`frame-height:number`	콘텐츠 패널 하나의 높이입니다.
`neighbor-rotation-y:number`	현재 중앙에 위치한 패널의 주변 영역에 적용된 Y 축 회전입니다. 주변 패널을 기울일 때 사용됩니다.
`neighbor-translation-x:number`	현재 중앙에 위치한 패널의 주변 영역에 적용된 X 축 변환입니다. 주변 패널의 배치를 조정하는 데 사용됩니다.
`neighbor-translation-y:number`	현재 중앙에 위치한 패널의 주변 영역에 적용된 Y 축 변환입니다.
`neighbor-translation-z:number`	현재 중앙에 위치한 패널의 주변 영역에 적용된 Z축 변환입니다.
`exit-urls:string`	쉼표로 구분된 이탈 URL 문자열로, 갤러리의 이미지에 해당합니다.
`show-reflection:boolean`	CSS3에 기반한 반사 표시 여부입니다.
`pause-front-media:boolean`	현재 프레임이 변경될 때 이전 프레임의 미디어 요소(동영상 또는 오디오 등)를 일시중지할지 여부입니다.
`resume-next-media:boolean`	현재 프레임이 변경될 때 새로운 현재 프레임의 미디어 요소(동영상 또는 오디오 등)의 재생을 다시 시작할지 여부입니다.

이벤트

이름	설명
`firstinteraction`	사용자가 처음으로 갤러리와 상호작용할 때 전송됩니다.
`allframesviewed`	갤러리의 모든 프레임이 한 번 이상 표시되었을 때 전송됩니다.
`allframesloaded`	갤러리의 모든 프레임이 로드되었을 때 전송됩니다.
`autoplayended`	자동재생 종료 시 전송됩니다. `event.detail.completed`는 의도된 재생 시간을 경과하여 정상적으로 종료될 경우 true를, 그 외의 경우에는 false를 전달합니다.
`frameshown`	새 프레임이 표시되었을 때 전송됩니다.
`frameactivated`	새 프레임이 활성화되기 시작할 때(아직 보이지 않더라도) 전송됩니다.
`frameautoplayed`	프레임에 자동재생이 활성화되었을 때 전송됩니다. 한 번에 표시되는 여러 프레임에 대해 개별적으로 실행되므로 `frameshown`보다 더 자주 트리거될 수 있습니다.
`frametap`	사용자가 프레임을 탭할 때 전송됩니다.
`reachleftend`	갤러리가 왼쪽 끝에 도달했을 때 전송됩니다.
`reachrightend`	갤러리가 오른쪽 끝에 도달했을 때 전송됩니다.
`trackstart`	마우스 커서 또는 터치 드래그가 시작되면 전송됩니다.
`track`	구성요소가 마우스 커서 또는 터치 드래그와 연결된 X 및 Y 위치 데이터를 등록합니다.
`trackend`	마우스 커서 또는 터치 드래그가 종료되면 전송됩니다.

메서드

이름	설명
`goToFrame(index:number, opt_animate:string)`	지정된 프레임으로 이동합니다.
`goForwards(opt_animate:string)`	다음 프레임으로 이동합니다(있는 경우).
`goBackwards(opt_animate:string)`	이전 프레임으로 이동합니다.
`rotateOnce(opt_duration:number, opt_direction:string)`	갤러리의 모든 프레임을 한 번 표시합니다.
`stopRotation()`	현재의 애니메이션 회전을 중단합니다.

큐 포인트

`gwd-cuepoint`

Google Web Designer 동영상 구성요소에 연결되어 동영상이 특정 시간에 도달하면 이벤트를 실행하는 구성요소입니다.

속성

이름	설명
`time:number`	이벤트가 트리거되는 시간(초)입니다.

이벤트

이름	설명
`cuepoint`	미디어 재생이 큐 포인트에 정의된 시간에 도달하면 전송됩니다.

메서드

이름	설명
`seek()`	동영상 시간을 큐 포인트의 시간으로 설정합니다.
`setTime(time:number)`	큐 포인트의 시간을 설정합니다.

날짜 대체

`gwd-dateswap`

날짜 대체는 대상 기간과 비교해 현재 날짜가 어떤 시점인지에 따라, 요소의 공개 상태를 변경합니다.

속성

이름	설명
`from_date:string`	RFC2822 또는 ISO 8601 날짜를 나타내는 문자열입니다.
`to_date:string`	RFC2822 또는 ISO 8601 날짜를 나타내는 문자열입니다.

이벤트

이름	설명
`before`	현재 날짜가 `from_date`(제외)보다 이전이면 전송됩니다.
`during`	현재 날짜가 `from_date`~`to_date`(포함) 사이에 있으면 전송됩니다.
`after`	현재 날짜가 `to_date`(제외)보다 이후면 전송됩니다.

메서드

이름	설명
`checkDate()`	현재 날짜를 기간과 비교합니다.

갤러리 내비게이션

`gwd-gallerynavigation`

Google Web Designer 갤러리 구성요소의 탐색 컨트롤입니다.

속성

이름	설명
`for:string`	갤러리에서 사용되는 쉼표로 구분된 이미지 경로 문자열입니다.
`highlight:color`	내비게이션의 활성 프레임을 강조표시할 때 사용되는 CSS 색상입니다.
`use-thumbnails:boolean`	내비게이션에 점 대신 썸네일 이미지를 사용할지 여부입니다.

일반 광고

`gwd-genericad`

일반 광고 컨테이너를 구현합니다.

이벤트

이름	설명
`adinitialized`	일반 요소가 광고 콘텐츠를 렌더링하기 직전에 전송됩니다.

메서드

이름	설명
`initAd()`	인에이블러에서 적절한 이벤트를 수신하는 즉시 광고를 시작합니다.
`goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string)`	광고의 확장된 크기로 이동합니다. 페이지 ID가 지정되지 않은 경우 광고가 기본 페이지로 이동합니다.
`exit(url:string, opt_collapseOnExit:boolean, opt_pageId:string)`	광고를 종료하고 원하는 경우 광고를 접습니다.

동작

`gwd-gesture`

여러 동작 이벤트의 추상화입니다.

속성

이름	설명
`touch-action:string`	터치 액션이 해석되어야 하는 방식입니다. 유효한 값은 `auto`, `none`, `pan-x`, `pan-y`입니다. 기본 동작은 `none`으로 설정된 경우와 동일합니다.

이벤트

이름	설명
`hover`	마우스 커서 또는 터치 위치가 구성요소 경계에 들어가면 전송됩니다.
`hoverend`	마우스 또는 터치 위치가 구성요소 경계에서 벗어나면 전송됩니다.
`trackstart`	마우스 커서 또는 터치 드래그가 시작되면 전송됩니다.
`track`	구성요소가 마우스 커서 또는 터치 드래그와 연결된 X 및 Y 위치 데이터를 등록합니다.
`trackend`	마우스 커서 또는 터치 드래그가 종료되면 전송됩니다.
`tap`	탭 사용 또는 마우스 클릭이 등록되면 전송됩니다.
`swipeleft`	사용자가 왼쪽으로 스와이프하면 전송됩니다.
`swiperight`	사용자가 오른쪽으로 스와이프하면 전송됩니다.
`swipeup`	사용자가 위쪽으로 스와이프하면 전송됩니다.
`swipedown`	사용자가 아래쪽으로 스와이프하면 전송됩니다.

Google 광고

`gwd-google-ad`

Google 광고 컨테이너를 구현합니다.

속성

이름	설명
`polite-load:boolean`	광고가 폴라이트 로드 의미 해석을 따르는지 여부입니다.
`fullscreen:boolean`	이 광고가 전체화면 확장을 시도해야 하는지 여부입니다.

이벤트

이름	설명
`adinitialized`	요소가 광고 콘텐츠를 렌더링하기 직전에 전송됩니다.
`expandstart`	인에이블러가 확장 시작 이벤트를 실행할 때 전송됩니다.
`expandfinish`	인에이블러가 확장 종료 이벤트를 실행할 때 전송됩니다.
`collapsestart`	인에이블러가 축소 시작 이벤트를 실행할 때 전송됩니다.
`collapsefinish`	인에이블러가 축소 종료 이벤트를 실행할 때 전송됩니다.
`fullscreensupport`	전체 화면 확장이 지원되는 경우에 전송됩니다.
`dynamicelementsready`	동적 데이터가 광고 콘텐츠에 적용된 후에 전송됩니다.
`hostpagescroll`	인에이블러가 호스트페이지 스크롤 이벤트를 실행할 때 전송됩니다.

메서드

이름	설명
`initAd()`	인에이블러에서 적절한 이벤트를 수신하는 즉시 광고를 시작합니다.
`goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string)`	광고의 확장된 크기로 이동합니다. 페이지 ID가 지정되지 않은 경우 광고가 기본 페이지로 이동합니다.
`exit(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string)`	광고를 종료하고 원하는 경우 광고를 접습니다.
`exitOverride(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string)`	Studio에 정의된 값과 관계없이 광고를 종료하고 지정한 URL로 이동합니다. `opt_collapseOnExit`가 true인 경우 광고를 접습니다.
`incrementCounter(metric:string, opt_isCumulative:boolean)`	카운터 이벤트를 추적합니다.
`startTimer(timerId:string)`	이벤트 타이머를 시작합니다.
`stopTimer(timerId:string)`	이벤트 타이머를 정지합니다.
`reportManualClose()`	플로팅, 팝업, 확장, 인페이지 팝업 또는 인페이지 플로팅 광고가 수동으로 닫힌 경우를 기록합니다. 이 메서드는 `Enabler.reportManualClose`의 프록시입니다.

핫스팟

`gwd-hotspot`

동영상의 특정 시간에 핫스팟을 표시하거나 숨기는 구성요소입니다.

속성

이름	설명
`show-time:number`	핫스팟 표시가 시작되는 시간(초)입니다.
`hide-time:number`	핫스팟 표시가 중지하는 시간(초)입니다.
`left:string`	동영상 위에서 동영상 프레임 너비를 기준으로 한 핫스팟의 왼쪽 위치입니다(예: '5%').
`top:string`	동영상 위에서 동영상 프레임 높이를 기준으로 한 핫스팟의 상단 위치입니다(예: '5%').
`width:string`	동영상과 비례하여 동영상 프레임 너비를 기준으로 한 핫스팟의 너비입니다.
`height:string`	동영상과 비례하여 동영상 프레임 높이를 기준으로 한 핫스팟의 높이입니다.

이벤트

이름	설명
`hotspotshown`	핫스팟이 표시되면 전송됩니다.
`hotspothidden`	핫스팟이 숨겨지면 전송됩니다.

메서드

이름	설명
`show(showHide:boolean)`	핫스팟 표시 상태를 전환합니다.
`seek(showHide:boolean)`	동영상 시간을 핫스팟의 표시 시간 또는 숨기기 시간으로 설정합니다.
`setTimes(showTime:number, hideTime:number)`	핫스팟의 표시 시간과 숨기기 시간을 설정합니다.

iframe

`gwd-iframe`

HTMLIframeElement를 래핑하는 구성요소입니다.

속성

이름	설명
`source:string`	iframe의 소스이며, 네이티브 이미지 요소의 `src` 속성을 대체합니다.
`scrolling:string`	iframe의 스크롤바 표시 여부입니다.

이벤트

이름	설명
`iframeload`	iframe이 로드되면 전송됩니다.

메서드

이름	설명
`setUrl(url:string)`	iframe의 URL을 변경하여 즉시 로드합니다.

이미지

`gwd-image`

HTMLImageElement를 래핑하여 이미지 소스의 지연된 로드를 지원하는 구성요소입니다.

속성

이름	설명
`source:file`	이미지 소스이며, 네이티브 이미지 요소의 `src` 속성을 대체합니다.
`alt:string`	이미지의 대체 텍스트입니다.
`scaling:string`	프레임에 맞게 이미지 크기가 조절되는 방식을 정의합니다.
`alignment:string`	보기 영역 내에서 이미지가 정렬되는 방식입니다.
`focalpoint:string`	이미지 초점을 x/y 픽셀 좌표로 인코딩합니다.
`disablefocalpoint:boolean`	`focalpoint` 속성(Google Web Designer에서 내부적으로 사용됨)에 의해 설정된 초점을 사용 중지합니다.

이미지 버튼

`gwd-imagebutton`

위쪽/위/아래쪽 상태를 지원하는 이미지 버튼입니다.

속성

이름	설명
`up-image:file`	버튼을 누르지 않은 상태의 버튼 이미지 URL입니다.
`over-image:file`	마우스 오버 상태의 버튼 이미지 URL입니다.
`down-image:file`	버튼을 누른 상태의 버튼 이미지 URL입니다.
`bgcolor:string`	버튼의 배경색입니다.
`alignment:string`	보기 영역 내에서 이미지가 정렬되는 방식입니다.
`scaling:string`	상위 컨테이너에서 이미지 크기가 맞아야 하는 방식입니다.
`disabled:boolean`	버튼의 사용 중지 여부입니다.

이벤트

이름	설명
`imagebuttonloaded`	모든 이미지가 로드되면 전송됩니다.

메서드

이름	설명
`toggleEnable()`	사용 설정됨/사용 중지됨 간에 전환합니다.
`setImages(upSrc:string, opt_overSrc:string, opt_downSrc:string)`	모든 버튼 상태의 이미지 소스를 설정합니다.

이미지 효과

`gwd-image-effect`

이미지 효과 구성요소입니다.

속성

이름	설명
`scaling:string`	프레임에 맞게 이미지 크기가 조절되는 방식을 정의합니다.
`time-limit:number`	애니메이션 시간 제한을 설정합니다. 값이 -1인 경우 시간 제한이 없습니다.
`settings:string`	구성요소 설정 대화상자를 시작합니다.
`images:string`	이미지 효과에 사용되는 이미지 경로의 쉼표로 구분된 문자열입니다.

이벤트

이름	설명
`autoplayended`	제한 시간에 도달하면 자동재생이 종료될 때 전송됩니다.

메서드

이름	설명
`play()`	애니메이션을 재생합니다.
`pause()`	애니메이션을 일시중지합니다.

이미지 효과 전후

`gwd-before-and-after`

두 개의 유사한 이미지가 '전후' 비교로 합성되는 이미지 효과입니다.

숨쉬기 이미지 효과

`gwd-breathe`

이미지를 탄력적으로 확장하고 축소하는 애니메이션 효과입니다.

드러내기 이미지 효과

`gwd-reveal`

하나의 이미지를 타원형 초점 영역이 훑고 지나가면서 두 번째 이미지를 표시하는 이미지 효과입니다.

물결 이미지 효과

`gwd-wave`

애니메이션 물결 변환을 이미지에 적용하여 이미지가 물결 패턴을 따라 흔들리도록 하는 이미지 효과입니다.

지도

`gwd-map`

HTMLElement를 확장하여 Google 지도 API 호출을 래핑합니다.

속성

이름	설명
`api-key:string`	Google API 키입니다. https://developers.google.com/maps/documentation/javascript/get-api-key를 참조하세요.
`query:string`	Google Places API에서 위치를 반환할 검색어 이름입니다.
`start-latitude:decimal`	시작 시 중앙 지점의 위도 좌표입니다. 값은 -90~90(도)이어야 합니다.
`start-longitude:decimal`	시작 시 중앙 지점의 경도 좌표입니다. 값은 -180~180(도)이어야 합니다.
`request-user-location:boolean`	사용자 위치에 대한 요청 여부입니다. true로 설정할 경우 사용자에게 위치를 공유해 달라는 메시지가 표시됩니다.
`client-id:string`	Google 지도 프리미어 고객 ID입니다.
`search-radius:number`	위치 검색을 실행할 최소 반경(미터)입니다.
`result-limit:number`	단일 쿼리에서 반환할 최대 결과 수입니다.
`start-zoom:number`	Google Maps API에서 사용하는 시작 시 확대/축소 수준의 단위입니다. 기본값은 주변 수준과 동일한 16입니다.
`marker-src:string`	켜기, 끄기, 음영 구성요소를 포함한 스프라이트가 되는 위치표시 이미지 파일 이름입니다.
`gps-src:string`	GPS 위치 파란색 점 이미지 파일 이름입니다.
`msg-start-position-prompt:string`	시작 위치를 선택하라는 대화상자 메시지 텍스트의 현지화된 문자열입니다.
`msg-gps-button-label:string`	Geolocation API에서 사용자 위치를 가져오는 버튼 라벨의 현지화된 문자열입니다.
`msg-manual-position-button-label:string`	위치 검색창을 표시하는 버튼 라벨의 현지화된 문자열입니다.
`msg-manual-position-prompt:string`	시작 시 지도 위치를 검색하기 위한 대화상자 메시지 텍스트의 현지화된 문자열입니다.
`msg-manual-position-placeholder:string`	시작 시 지도 위치를 찾기 위한 검색창 자리표시자 텍스트의 현지화된 문자열입니다.
`msg-geocode-failure:string`	위치정보 API 사용에 대한 시도가 실패했을 때 표시되는 대화상자 메시지 텍스트의 현지화된 문자열입니다.
`msg-no-results-found:string`	선택한 위치에서 발견된 지도 결과가 없는 경우 표시되는 대화상자 메시지 텍스트의 현지화된 문자열입니다.

이벤트

이름	설명
`pinclick`	사용자가 지도의 핀을 선택한 경우입니다.

메서드

이름	설명
`setCenter(latitude:number, longitude:number, opt_accuracy:number)`	위도/경도로 지정된 위치로 지도 중심을 설정합니다.

페이지

`gwd-page`

페이지는 페이지 데크의 단일 카드를 나타냅니다.

속성

이름	설명
`expanded:boolean`	이 페이지를 확장 페이지로 간주해야 하는지 여부입니다(광고만 해당).
`centered:boolean`	이 페이지의 콘텐츠를 중앙에 정렬해야 하는지 여부입니다.
`alt-orientation-page:string`	다른 방향으로 이 콘텐츠를 더욱 잘 나타내는 페이지의 페이지 ID입니다.

이벤트

이름	설명
`attached`	페이지가 DOM에 연결된 직후에 전송됩니다.
`detached`	DOM에서 페이지가 제거된 직후에 전송됩니다.
`pageactivated`	페이지 표시 준비를 마치면 전송됩니다.
`pagedeactivated`	페이지가 더 이상 표시되지 않으면 전송됩니다.
`pageload`	페이지 콘텐츠가 성공적으로 로드된 이후에 전송됩니다.
`pagepresenting`	페이지에서 소개 애니메이션을 시작하기 직전에 전송됩니다.
`shake`	기기 흔들기 동작이 감지될 때 전송됩니다.
`tilt`	기기 기울이기가 감지될 때 전송됩니다.
`rotatetoportrait`	기기가 세로 방향으로 회전할 때 전송됩니다.
`rotatetolandscape`	기기가 가로 방향으로 회전할 때 전송됩니다.

페이지 데크

`gwd-pagedeck`

페이지 데크는 페이지의 컨테이너로, 한 번에 하나의 페이지를 표시합니다. 여러 페이지가 정해진 순서에 따라 가장 앞에 순환 표시될 수 있으며, 지원되는 모든 페이지 전환을 사용할 수 있습니다.

속성

이름	설명
`default-page:string`	기본 페이지 ID입니다.

이벤트

이름	설명
`pagetransitionstart`	페이지 전환이 발생하기 전에 전송됩니다.
`pagetransitionend`	페이지 전환이 완료된 후에 전송됩니다.

메서드

이름	설명
`goToNextPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string)`	페이지 데크에서 다음 페이지로 이동합니다.
`goToPreviousPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string)`	페이지 데크에서 이전 페이지로 이동합니다.
`goToPage(pageId:string, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string)`	페이지 데크에서 지정한 페이지로 이동합니다.
`getCurrentPage()`	페이지가 표시되지 않은 경우 현재 페이지 또는 null을 반환합니다.
`getDefaultPage()`	지정한 경우 기본 페이지로 돌아가며, 이외 경우에는 첫 번째 페이지로 돌아갑니다.
`getPage(pageId:string)`	지정한 ID가 포함된 페이지를 반환합니다.
`findPageIndexByAttributeValue(attributeName:string, value:string\|number\|boolean)`	지정한 값과 동일한 속성의 값이 있는 페이지 요소를 반환하거나 페이지를 찾을 수 없는 경우 -1을 반환합니다.
`getOrientationSpecificPage(orientation:string, pageId:string)`	지정한 방향에 해당하는 페이지를 반환합니다.
`getElementById(id:string)`	이 페이지 데크의 모든 페이지에서 지정한 ID가 있는 요소를 찾습니다. `gwd-pagedeck`는 DOM의 활성 페이지만 포함하고 있으므로, 표준 `document.getElementById(id)`는 비활성 페이지의 요소를 반환하지 않습니다. 비활성 페이지의 요소를 참조하는 것은 특히 동적 광고에서 일반적인 사용 방식입니다. 이러한 경우 ID로 요소를 역참조하는 데 이 메소드를 사용할 수 있습니다.

시차

`gwd-parallax`

시차 구성요소입니다.

속성

이름	설명
`settings:string`	구성요소 설정 대화상자를 시작합니다.
`yscroll:decimal`	스테이지에서 렌더링할 때 시차 애니메이션에 사용할 스크롤 요소입니다.

이벤트

이름	설명
`ready`	시차 구성요소의 모든 애셋이 로드되면 전송됩니다.

입자 효과

`gwd-particleeffects`

여러 입자 효과와 이미지를 합성하는 구성요소입니다.

속성

이름	설명
`autoplay:boolean`	구성요소 로드 시 애니메이션을 자동으로 재생할지 여부입니다.
`time-limit:number`	애니메이션 시간 제한을 설정합니다. 값이 -1인 경우 시간 제한이 없습니다.
`settings:string`	구성요소 설정 대화상자를 시작합니다.

이벤트

이름	설명
`timelimitreached`	애니메이션 재생이 지정된 시간 제한에 도달하면 전송됩니다.

메서드

이름	설명
`play()`	애니메이션을 재생합니다.
`pause()`	애니메이션을 일시중지합니다.
`stop()`	애니메이션을 중지합니다.

입자

`gwd-particles`

입자 시스템 구성요소입니다.

속성

이름	설명
`acceleration-x:number`	가속도의 x 구성요소입니다(px/프레임/프레임).
`acceleration-y:number`	가속도의 y 구성요소입니다(px/프레임/프레임).
`angle-max:number`	입자 속도 방향의 최대 각도입니다.
`angle-min:number`	입자 속도 방향의 최소 각도입니다.
`autoplay:boolean`	상위 gwd-particle 효과가 재생되기 시작할 때 애니메이션을 자동으로 재생할지 여부입니다.
`color1:color`	첫 번째 색상입니다.
`color2:color`	두 번째 색상입니다.
`color-rate:number`	색상이 [0, 1] 범위에서 추가로 프레임당 색상 1에서 색상 2로 변경되는 비율입니다.
`emit-interval:number`	다음 입자가 방출될 때까지의 프레임 수입니다.
`emit-x-max:string`	입자 방출 범위의 최대 x 좌표입니다.
`emit-x-min:string`	입자 방출 범위의 최소 x 좌표입니다.
`emit-y-max:string`	입자 방출 범위의 최대 y 좌표입니다.
`emit-y-min:string`	입자 방출 범위의 최소 y 좌표입니다.
`loop:boolean`	애니메이션 반복 여부입니다.
`number:number`	입자 수입니다.
`opacity-min:number`	입자의 최소 불투명도입니다.
`opacity-max:number`	입자의 최대 불투명도입니다.
`opacity-rate:number`	프레임당 불투명도가 변화하는 속도로, 입자의 현재 불투명도에 추가됩니다.
`random-colors:boolean`	입자에 색상 1과 색상 2 사이의 무작위 색상이 있는지 여부입니다. false인 경우 모든 입자가 색상 1로 초기화됩니다.
`shape:string`	스프라이트의 모양입니다.
`size-max:number`	입자의 최대 크기(px)입니다.
`size-min:number`	입자의 최소 크기(px)입니다.
`size-rate:number`	프레임당 크기가 변화하는 속도로, 입자의 현재 크기에 추가됩니다.
`skip-forward:number`	주어진 비율의 입자가 입자 시스템으로 방출된 시간으로 건너뜁니다.
`speed-max:number`	입자의 최대 속도입니다(px/프레임).
`speed-min:number`	입자의 최소 속도입니다(px/프레임).
`sprite-image-src:file`	스프라이트로 사용되는 이미지의 소스입니다.
`turbulence-frequency:number`	난기류 빈도입니다. 값이 클수록 동작 불규칙성이 더 자주 발생합니다. 양수여야 합니다.
`turbulence-rate:number`	시간 경과에 따른 강도 변화 속도입니다.
`turbulence-strength:number`	입자에 영향을 미치는 난기류의 강도입니다. 양수여야 합니다.
`turbulence-trail:number`	렌더링할 입자의 이전 및 현재 상태 수입니다.

메서드

이름	설명
`play()`	애니메이션을 재생합니다.
`pause()`	애니메이션을 일시중지합니다.
`stop()`	애니메이션을 중지합니다.

스프라이트 시트

`gwd-spritesheet`

스프라이트 시트의 단일 키프레임 또는 애니메이션을 표시합니다.

속성

이름	설명
`imagesource:file`	스프라이트 시트 이미지의 URL입니다.
`offsetx:number`	스프라이트 시트 왼쪽부터 다음까지의 오프셋입니다(픽셀). 스프라이트 시트에서 사용하려는 특정 이미지의 왼쪽 가장자리 애니메이션을 만드는 데 사용하는 첫 번째 스프라이트 이미지의 왼쪽 가장자리
`offsety:number`	스프라이트 시트 상단부터 다음까지의 오프셋입니다(픽셀). 스프라이트 시트에서 사용하려는 특정 이미지의 상단 가장자리 애니메이션을 만드는 데 사용하는 첫 번째 스프라이트 이미지의 상단 가장자리
`clipwidth:number`	다음 중 하나의 너비(픽셀)입니다. 스프라이트 시트에서 사용하려는 특정 이미지 애니메이션을 만드는 데 사용하는 첫 번째 스프라이트 이미지
`clipheight:number`	다음 중 하나의 높이(픽셀)입니다. 스프라이트 시트에서 사용하려는 특정 이미지 애니메이션을 만드는 데 사용하는 첫 번째 스프라이트 이미지
`alignment:string`	컨테이너 내에서 이미지 위치를 결정합니다.
`scaling:string`	구성요소 내에서 다양한 크기의 이미지가 표시되는 방식을 결정합니다.
`totalframecount:number`	애니메이션을 구성하는 프레임의 수입니다.
`duration:number`	각 프레임의 재생 시간(밀리초)입니다.
`loopcount:number`	애니메이션이 반복하는 횟수입니다. 0으로 설정하면 무제한으로 반복됩니다.
`autoplay:boolean`	애니메이션을 자동재생할지 여부입니다.
`endonstartframe:boolean`	애니메이션을 초기 프레임에 종료할지 여부입니다.
`reverseplay:boolean`	애니메이션을 역방향으로 재생할지 여부입니다.

이벤트

이름	설명
`animationend`	애니메이션이 종료되면 전송됩니다.
`animationpause`	애니메이션이 일시중지되면 전송됩니다.
`animationplay`	애니메이션 재생이 시작되면 전송됩니다.
`animationrestart`	애니메이션이 일시중지되었다가 다시 시작되면 전송됩니다.

메서드

이름	설명
`newAnimation(offsetx:number, offsety:number, clipwidth:number, clipheight:number, totalframecount:number, duration:number, loopcount:number, autoplay:boolean, reverseplay:boolean)`	새 애니메이션을 정의합니다.
`play()`	애니메이션을 재생합니다.
`pause()`	애니메이션을 일시중지합니다.
`togglePlay()`	재생 및 일시중지 간에 애니메이션을 전환합니다.
`restart()`	애니메이션을 다시 시작합니다.
`previousFrame()`	이전 프레임을 표시합니다.
`nextFrame()`	다음 프레임을 표시합니다.
`goToFrame(id:number)`	프레임 숫자를 기준으로 특정 프레임을 표시합니다.

별표 평점

`gwd-starratings`

평점을 나타내는 일련의 별표를 렌더링하기 위한 구성요소입니다.

속성

이름	설명
`ratingvalue:decimal`	평점 값입니다.
`iconsize:number`	별표 아이콘 크기입니다.
`isemptyshown:boolean`	빈 별표 아이콘을 표시할지 여부입니다.
`isemptycolored:boolean`	빈 별표 아이콘에 색상을 지정할지 여부입니다.
`colorprimary:color`	기본 채우기 색상입니다.
`colorsecondary:color`	보조 그래디언트 색상입니다.
`gradienttype:string`	그래디언트 유형입니다.
`ratingmax:number`	최대 별표 평점입니다.
`ratingmin:decimal`	최소 별표 평점입니다.

이벤트

이름	설명
`complete`	별표 평점 아이콘이 생성된 시간입니다.
`validationerror`	별표 평점 값이 최소 평점보다 적습니다.

스트리트 뷰

`gwd-streetview`

Google 스트리트 뷰 구성요소입니다.

속성

이름	설명
`key:string`	애플리케이션의 고유 키를 얻는 자세한 방법은 https://developers.google.com/maps/documentation/javascript/get-api-key를 참조하세요.
`latitude:decimal`	위치의 위도 값입니다.
`longitude:decimal`	위치의 경도 값입니다.
`interaction:boolean`	보기의 이동/회전 가능 여부입니다.
`heading:decimal`	카메라의 나침반 방향을 나타냅니다. 0에서 360 사이의 값이 허용됩니다. 0, 360은 북쪽, 90은 동쪽, 180은 남쪽을 나타냅니다. 방향을 지정하지 않는 경우, 가장 최근 사진이 촬영된 지점에서 지정한 위치로 카메라의 방향을 향하게 하는 방식으로 값이 계산됩니다.
`pitch:decimal`	스트리트 뷰 차량을 기준으로 한 카메라의 위 또는 아래 방향 각도입니다. 보통(항상은 아님) 지평선을 향하게 됩니다. 양수 값은 카메라를 위로 올리고(90도가 수직 위쪽을 나타냄), 음수 값은 카메라를 아래로 내립니다(-90도가 수직 아래쪽을 나타냄).
`zoom:number`	스트리트 뷰 차량을 기준으로 카메라 확대/축소 수준을 지정합니다.

스와이프할 수 있는 갤러리

`gwd-swipegallery`

스와이프할 수 있는 콘텐츠 스트립에 프레임을 표시하는 갤러리 개체입니다.

속성

이름	설명
`images:string`	갤러리에서 사용되는 쉼표로 구분된 이미지 경로 문자열입니다.
`groups:string`	쉼표로 구분된 그룹 ID 문자열입니다.
`transition-duration:number`	갤러리 애니메이션 속도(밀리초)입니다.
`start-frame:number`	시작 지점으로 사용할 기준이 되는 하나의 프레임입니다.
`num-frames-to-display:number`	한 번에 표시할 프레임 수입니다.
`frame-snap-interval:number`	스와이프 시 이동할 프레임 수입니다.
`autoplay:boolean`	자동으로 갤러리를 한 번 회전할지 여부입니다.
`has-navigation:boolean`	갤러리 탐색 컨트롤을 포함할지 여부입니다.
`navigation-thumbnails:boolean`	내비게이션에 점 대신 썸네일 이미지를 사용할지 여부입니다.
`navigation-highlight:color`	내비게이션의 활성 프레임을 강조표시할 때 사용되는 CSS 색상입니다.
`scaling:string`	프레임에 맞게 이미지 콘텐츠 크기가 조절되는 방식입니다.
`swipe-axis:string`	스와이프가 감지되는 축입니다.
`offset:number`	주변 콘텐츠 프레임 사이의 빈 공간 크기입니다.
`frame-width:number`	콘텐츠 프레임 하나의 너비입니다. `num-frames-to-display`를 재정의합니다.
`frame-height:number`	콘텐츠 프레임 하나의 높이입니다.
`autoplay-duration:number`	프레임을 자동재생할 총 재생 시간입니다.
`autoplay-step-interval:number`	자동재생이 진행되는 동안 각 프레임 단계 사이의 간격입니다.
`exit-urls:string`	쉼표로 구분된 이탈 URL 문자열로, 갤러리의 이미지에 해당합니다.
`disable-gesture:boolean`	갤러리에서 터치 이동을 가능하게 하는 동작 구성요소를 숨기거나 사용 중지합니다.
`pause-front-media:boolean`	현재 프레임이 변경될 때 이전 프레임의 미디어 요소(동영상 또는 오디오 등)를 일시중지할지 여부입니다.
`resume-next-media:boolean`	현재 프레임이 변경될 때 새로운 현재 프레임의 미디어 요소(동영상 또는 오디오 등)의 재생을 다시 시작할지 여부입니다.

이벤트

이름	설명
`firstinteraction`	사용자가 처음으로 갤러리와 상호작용할 때 전송됩니다.
`allframesviewed`	갤러리의 모든 프레임이 한 번 이상 표시되었을 때 전송됩니다.
`allframesloaded`	갤러리의 모든 프레임이 로드되었을 때 전송됩니다.
`autoplayended`	자동재생 종료 시 전송됩니다. `event.detail.completed`는 의도된 재생 시간을 경과하여 정상적으로 종료될 경우 true를, 그 외의 경우에는 false를 전달합니다.
`frameshown`	필요한 애니메이션이 완료된 후 새 프레임이 표시될 때 전송됩니다.
`frameactivated`	새 프레임이 활성화되기 시작할 때(아직 보이지 않더라도) 전송됩니다.
`frameautoplayed`	프레임에 자동재생이 활성화되었을 때 전송됩니다. 한 번에 표시되는 여러 프레임에 대해 개별적으로 실행되므로 `frameshown`보다 더 자주 트리거될 수 있습니다.
`frametap`	사용자가 프레임을 탭할 때 전송됩니다.
`reachleftend`	갤러리가 왼쪽 끝에 도달했을 때 전송됩니다.
`reachrightend`	갤러리가 오른쪽 끝에 도달했을 때 전송됩니다.
`framemouseover`	사용자가 프레임 위로 마우스 커서를 올릴 때 전송됩니다.
`framemouseout`	사용자가 프레임 밖으로 마우스 커서를 이동할 때 전송됩니다.
`trackstart`	마우스 커서 또는 터치 드래그가 시작되면 전송됩니다.
`track`	구성요소가 마우스 커서 또는 터치 드래그와 연결된 X 및 Y 위치 데이터를 등록합니다.
`trackend`	마우스 커서 또는 터치 드래그가 종료되면 전송됩니다.

메서드

이름	설명
`goToFrame(frame:number, opt_animate:string)`	지정한 프레임으로 이동합니다.
`rotateOnce(opt_duration:number, opt_direction:string)`	갤러리의 모든 프레임을 한 번 표시합니다.
`stopRotation()`	현재의 애니메이션 회전을 중단합니다.
`goForwards()`	갤러리를 한 프레임 앞으로 이동합니다.
`goBackwards()`	갤러리를 한 프레임 뒤로 이동합니다.

소용돌이

`gwd-swirl`

소용돌이 구성요소입니다.

속성

이름	설명
`yscroll:decimal`	스테이지에서 렌더링할 때 소용돌이 애니메이션에 사용할 스크롤 요소입니다.
`settings:string`	구성요소 설정 대화상자를 시작합니다.

이벤트

이름	설명
`ready`	모든 하위 애셋이 로드되면 전송됩니다.

탭 영역

`gwd-taparea`

클릭/탭 이벤트 추상화입니다.

속성

이름	설명
`exit-override-url:string`	탭 영역을 탭했을 때 이탈할 URL입니다.

이벤트

이름	설명
`action`	사용자가 버튼을 터치(모바일)하거나 클릭(데스크톱)할 때 전달됩니다.

탭하여 전화/문자

`gwd-taptocall`

클릭하거나 터치했을 때 전화번호로 전화하거나 SMS를 전송하는 구성요소입니다.

속성

이름	설명
`number:string`	전화하거나 메시지를 보낼 전화번호입니다.
`action:string`	SMS 메시지를 전송하거나 전화 통화를 시작합니다.

이벤트

이름	설명
`action`	사용자가 버튼을 터치(모바일)하거나 클릭(데스크톱)할 때 전달됩니다.
`taptocall`	통화 또는 SMS가 시작될 때 전송됩니다.

메서드

이름	설명
`dial()`	구성된 번호로 전화를 걸거나 SMS 메시지를 보냅니다.

전환 갤러리

`gwd-transitiongallery`

전환 갤러리 구성요소입니다.

속성

이름	설명
`settings:string`	구성요소 설정 대화상자를 시작합니다.
`images:string`	갤러리에서 사용되는 쉼표로 구분된 이미지 경로 문자열입니다.
`scaling:string`	프레임에 맞게 이미지 크기가 조절되는 방식을 정의합니다.
`exit-urls:string`	쉼표로 구분된 이탈 URL 문자열로, 갤러리의 이미지에 해당합니다.

이벤트

이름	설명
`autoplayended`	자동재생 종료 시 전송됩니다. `event.detail.completed`는 의도된 루프 수에 도달하여 정상적으로 종료되면 true를, 그 외의 경우에는 false를 전달합니다.
`frameactivated`	새 프레임이 활성화되기 시작할 때(아직 보이지 않더라도) 전송됩니다.
`frameshown`	새 프레임이 표시되었을 때 전송됩니다.
`frametap`	사용자가 프레임을 탭할 때 전송됩니다.
`rotateonceended`	회전 종료 시 전송됩니다. `event.detail.completed`가 정상적으로 종료되면 true를, 그렇지 않으면 false를 전달합니다.
`reachleftend`	갤러리가 왼쪽 끝에 도달했을 때 전송됩니다.
`reachrightend`	갤러리가 오른쪽 끝에 도달했을 때 전송됩니다.

메서드

이름	설명
`goToFrame(frame:number, with_animation:boolean)`	지정한 프레임으로 이동합니다.
`rotateOnce(startFromCurrentFrame:boolean)`	startFromCurrentFrame이 false이거나 지정되지 않은 경우 시작 프레임부터 갤러리에 프레임을 표시하고, 그렇지 않으면 현재 프레임부터 표시합니다. 시작 프레임에 도달하기 전에 회전은 중지됩니다.
`startAutoplay(startFromCurrentFrame:boolean)`	startFromCurrentFrame이 false이거나 지정되지 않은 경우 시작 프레임부터 갤러리에서 자동재생을 시작하고, 그렇지 않으면 현재 프레임부터 시작합니다. 반복 횟수에 도달하면 자동재생이 중지됩니다.
`stop()`	진행 중인 애니메이션을 취소합니다.
`goForwards()`	갤러리를 한 프레임 앞으로 이동합니다.
`goBackwards()`	갤러리를 한 프레임 뒤로 이동합니다.

블라인드 전환

`gwd-blinds`

블라인드 효과 구성요소입니다. 한쪽 가장자리에서 시작하여 반대쪽 가장자리로 진행되면서 하나씩 열리는 슬랫이 있는 창 블라인드처럼 새 이미지를 표시합니다.

속성

이름	설명
`direction:dropdown`	효과의 방향입니다.
`blinds:number`	블라인드의 수입니다.
`transparentbackground:boolean`	새 이미지의 블라인드를 렌더링하기 전에 투명한 배경을 표시할지 여부입니다. false인 경우 블라인드가 기존 이미지에 오버레이됩니다.

도어 와이프 전환

`gwd-door-wipe`

도어 와이프 효과 구성요소는 와이프 효과의 변형으로, 와이프의 방향에 따라 두 가지 유형이 있습니다. 열린 도어 와이프는 쌍여닫이문이 열리는 것처럼 이전 이미지의 중앙부터 새 이미지를 표시됩니다. 닫힌 도어 와이프는 쌍여닫이문이 닫히는 것처럼 이전 이미지의 가장자리에서 중앙으로 새 이미지를 표시합니다.

속성

이름	설명
`orientation:dropdown`	애니메이션의 방향입니다.
`direction:dropdown`	도어 와이프 효과의 방향입니다.

페이드 전환

`gwd-fade`

전환 페이드 구성요소입니다.

아이리스 와이프 전환

`gwd-iris-wipe`

기본적으로 프레임의 중심에서 점점 커지는 원으로 새 이미지를 표시하는 아이리스 와이프 효과 구성요소입니다.

속성

이름	설명
`originpercentx:number`	프레임 너비를 기준으로 x축에서 커지는 원의 첫 위치입니다.
`originpercenty:number`	프레임 높이를 기준으로 y축에서 커지는 원의 첫 위치입니다.

푸시 전환

`gwd-push`

푸시 효과 유형 구성요소입니다. 새 이미지가 이전 이미지를 보기 밖으로 밀어내며 대체됩니다.

속성

이름	설명
`direction:dropdown`	푸시 효과의 방향입니다.

방사형 와이프 전환

`gwd-radial-wipe`

방사형 와이프 효과 구성요소는 와이프 효과가 변형된 형태입니다. 마치 시곗바늘이 돌아가듯이 새 이미지가 지정된 지점 주변의 반경을 훑으면서 표시됩니다.

속성

이름	설명
`direction:dropdown`	효과의 방향입니다.
`originpercentx:number`	프레임 너비 기준 x축의 첫 위치로, 반경을 훑으면서 새 이미지를 표시합니다.
`originpercenty:number`	프레임 높이 기준 y축의 첫 위치로, 반경을 훑으면서 새 이미지를 표시합니다.

회전 전환

`gwd-rotate`

회전 효과 구성요소입니다. 이전 이미지가 회전하면서 확대되고, 다시 축소되면서 회전이 종료되면 새 이미지가 나타납니다.

속성

이름	설명
`direction:dropdown`	효과의 방향입니다.

슬라이스 전환

`gwd-slice`

슬라이스 효과 구성요소입니다. 새 이미지가 슬라이스 또는 막대 형식으로 순차적으로 표시됩니다.

속성

이름	설명
`direction:dropdown`	슬라이스 효과의 방향입니다.
`slices:number`	화면을 분할하는 슬라이스 또는 막대의 수입니다.
`transparentbackground:boolean`	새 이미지가 슬라이스가 슬라이드되기 전에 투명한 배경을 표시할지 여부입니다. false인 경우 슬라이스가 기존 이미지에 오버레이됩니다.

스플릿 푸시 전환

`gwd-split-push`

스플릿 푸시 효과 구성요소는 푸시 효과가 변형된 형태입니다. 기존 이미지가 2개의 수직 또는 수평 부분으로 분할됩니다. 새 이미지의 해당하는 분할 부분이 기존 이미지의 각 부분을 반대 방향에서 보이지 않게 밀어냅니다.

속성

이름	설명
`orientation:dropdown`	애니메이션의 방향입니다.

스트라이프 와이프 전환

`gwd-stripe-wipe`

스트라이프 와이프 전환 구성요소는 와이프 효과가 변형된 형태입니다. 색상이 교차하는 단색 스트라이프가 동시에 화면에서 확장되며 기존 이미지를 덮습니다. 그런 다음 스트라이프가 축소되며 새 이미지가 표시됩니다.

속성

이름	설명
`direction:dropdown`	효과의 방향입니다.
`stripes:number`	각 색상의 스트라이프 수입니다.
`color1:color`	두 가지 교차 스트라이프 색상 중 하나의 16진수 값입니다.
`color2:color`	나머지 교차 스트라이프 색상의 16진수 값입니다.

베니션 블라인드 전환

`gwd-venetian-blinds`

베니션 블라인드 효과 구성요소입니다. 동시에 또는 차례로 열리는 슬랫이 있는 베니션 블라인드처럼 새 이미지를 표시합니다.

속성

이름	설명
`orientation:dropdown`	애니메이션의 방향입니다.
`blinds:number`	블라인드의 수입니다.
`staggered:boolean`	슬랫이 지연으로 전환되는지의 여부입니다. false인 경우 모든 슬랫 전환이 동시에 이루어집니다.

와이프 전환

`gwd-wipe`

전환 와이프 구성요소입니다. 일반 와이프 효과에서는 한쪽 가장자리에서 반대편 가장자리로 와이핑되는 라인 뒤의 기존 이미지를 새 이미지가 조금씩 대체합니다.

속성

이름	설명
`direction:dropdown`	효과의 방향입니다.
`angle:number`	이전 이미지를 새 이미지로 대체하는 선을 기울이는 각도입니다.

지그재그 전환

`gwd-zigzag`

지그재그 효과 구성요소입니다. 새 이미지가 구불구불한 그리드 패턴으로 표시됩니다. 수평 지그재그 효과에서는 새 이미지의 타일을 왼쪽에서 오른쪽으로, 그리고 오른쪽에서 왼쪽으로 번갈아가며 연속적인 행으로 표시합니다. 수직 지그재그 효과에서는 새 이미지의 타일을 위에서 아래로, 그리고 아래에서 위로를 번갈아가며 연속적인 열로 표시합니다.

속성

이름	설명
`orientation:dropdown`	애니메이션의 방향입니다.
`rows:number`	지그재그 효과의 행 개수입니다.
`columns:number`	지그재그 효과의 열 개수입니다.

동영상

`gwd-video`

HTMLVideoElement를 래핑하는 구성요소입니다.

속성

이름	설명
`autoplay:boolean`	로드될 때 동영상의 자동재생 여부입니다.
`loop:boolean`	완료될 때 동영상의 반복 여부입니다.
`muted:boolean`	동영상의 음소거 시작 여부입니다.
`controls:boolean`	기본 네이티브 플레이어 컨트롤 사용 설정 여부입니다.
`sources:file`	쉼표로 구분되어 있는 다양한 형식으로 된 동영상의 문자열입니다.
`poster:string`	사용자가 재생하거나 찾을 때까지 표시할 포스터 프레임을 나타내는 URL입니다.

이벤트

이름	설명
`play`	미디어 재생이 일시중지되었다가 다시 재생되기 시작할 때 전송됩니다. 즉, 이전 일시중지 이벤트 이후에 재생이 다시 시작되었을 때 전송됩니다.
`pause`	재생이 일시중지될 때 전송됩니다.
`playing`	미디어가 재생되기 시작할 때 전송됩니다(최초 재생 시, 일시중지 이후 또는 종료 및 다시 시작 후).
`ended`	재생이 완료될 때 전송됩니다.
`volumechange`	오디오 볼륨을 변경할 때 전송됩니다(볼륨 설정 시 및 음소거 속성 변경 시).
`seeked`	찾기 작업이 완료될 때 전송됩니다.
`waiting`	다른 작업(예: 찾기)이 아직 완료되지 않아 요청된 작업(예: 재생)이 지연될 때 전송됩니다.

메서드

이름	설명
`mute()`	음소거/음소거 해제 간에 동영상을 전환합니다.
`pause()`	동영상을 일시중지합니다.
`play()`	동영상을 재생합니다.
`replay()`	동영상을 재생합니다.
`seek(time:number)`	동영상에서 지정된 시간으로 건너뜁니다.
`setVolume(volume:number)`	동영상의 볼륨을 설정합니다.
`setSources(sources:string)`	동영상의 소스를 설정합니다.

YouTube

`gwd-youtube`

HTMLElement를 확장하여 YouTube API 호출을 래핑합니다.

속성

이름	설명
`video-url:string`	동영상의 YouTube URL입니다.
`autoplay:string`	지원되는 환경의 경우 로드 시 YouTube 동영상이 자동재생됩니다.
`preview-duration:number`	미리보기의 재생 시간을 설정합니다. 자동재생 속성이 `preview`로 설정된 경우에만 사용됩니다.
`controls:string`	동영상 컨트롤(`none`, `autohide`)을 표시합니다.
`color:string`	플레이어 진행 표시줄의 색상 테마입니다(빨간색 또는 흰색).
`muted:boolean`	동영상의 음소거 시작 여부입니다.
`loop:boolean`	완료될 때 동영상의 반복 여부입니다.
`pause-on-end:boolean`	남은 시간이 1초일 때 동영상을 일시중지합니다.
`start-position:number`	특정 시간(초)부터 동영상을 시작합니다.
`allowfullscreen:boolean`	데스크톱에서 전체화면을 허용합니다.
`extra-player-args:string`	https://developers.google.com/youtube/player_parameters?playerVersion=HTML5#Parameters에 설명된 것과 같은 추가 YouTube 플레이어 매개변수입니다.

이벤트

이름	설명
`buffering`	YouTube 플레이어가 버퍼링 중입니다.
`ended`	YouTube 동영상이 끝까지 재생되었습니다.
`paused`	YouTube 동영상이 일시중지되었습니다.
`playing`	YouTube 동영상이 재생되기 시작했습니다.
`replayed`	YouTube 동영상애 다시 재생되었습니다.
`viewed0percent`	동영상을 0% 시청하면 전송됩니다.
`viewed25percent`	동영상을 25% 시청하면 전송됩니다.
`viewed50percent`	동영상을 50% 시청하면 전송됩니다.
`viewed75percent`	동영상을 75% 시청하면 전송됩니다.
`viewed100percent`	동영상을 100% 시청하면 전송됩니다.
`previewed0percent`	미리보기를 0% 시청하면 전송됩니다.
`previewed25percent`	미리보기를 25% 시청하면 전송됩니다.
`previewed50percent`	미리보기를 50% 시청하면 전송됩니다.
`previewed75percent`	미리보기를 75% 시청하면 전송됩니다.
`previewed100percent`	미리보기를 100% 시청하면 전송됩니다.

메서드

이름	설명
`toggleMute()`	음소거/음소거 해제 간에 동영상을 전환합니다.
`pause()`	동영상을 일시중지합니다.
`play()`	동영상을 재생합니다.
`replay()`	동영상을 재생합니다.
`seek(time:number)`	동영상에서 지정된 시간으로 건너뜁니다.
`setYouTubeId(id:string, cueOnly:boolean)`	YouTube 동영상 소스를 지정된 ID로 변경합니다.

도움이 되었나요?

어떻게 하면 개선할 수 있을까요?