대화형 견본

마지막 업데이트: 2024년 7월 22일
  • 주제:

작성 대상:

  • 개발자
  • 사용자

대화형 데이터가 구성에서 뷰어에 전달된 경우 비디오 콘텐츠 옆에 대화형 견본 패널이 표시됩니다. 맨 위에 "클릭하여 보기" 등의 텍스트를 렌더링하는 배너, 하나 이상의 대화형 견본 열 및 두 개의 스크롤 단추(데스크탑 시스템에서만 사용 가능)로 구성됩니다.

데스크탑 시스템과 터치 디바이스에서 가로 방향으로 대화형 견본이 비디오 컨텐츠의 오른쪽에 세로로 렌더링됩니다. 터치 장치에서 세로 방향으로 표시된다면 뷰어 하단에 가로 색상 견본 행으로 표시됩니다.

다음 CSS 클래스 선택기는 대화형 견본 패널의 위치 및 방향을 제어합니다.

.s7interactivevideoviewer .s7interactiveswatches

대화형 견본의 CSS 속성

너비대화형 견본 패널의 폭
높이대화형 견본 패널의 높이입니다.
상위대화형 견본 패널의 위쪽 위치입니다.
하단대화형 견본 패널의 하단 위치입니다.
남음대화형 견본 패널의 왼쪽 위치입니다.
오른쪽대화형 견본 패널의 오른쪽 위치입니다.

대화형 견본 패널의 런타임 위치 및 방향은 다음과 같이 위의 CSS 속성의 조합으로 정의됩니다.

  • 뷰어 하단에 대화형 견본을 가로로 렌더링하려면 높이를 절대 픽셀 값으로, 왼쪽 및 아래를 0px로, 너비, 오른쪽 및 위쪽을 auto로 설정합니다.
  • 대화형 견본을 비디오 컨텐츠의 오른쪽에 세로로 렌더링하려면 너비를 절대 픽셀로, 오른쪽과 위쪽을 0픽셀로, 높이, 왼쪽 및 아래쪽을 auto로 설정합니다.

이 스타일에 CSS 마커를 사용하여 대화형 색상 견본 패널의 적응형 배치를 수행할 수 있습니다.

예

터치 디바이스에서 가로 방향으로 뷰어 하단에 가로로 렌더링하도록 대화형 견본 패널을 설정하려면. 또한 다른 모든 경우에 비디오 컨텐츠의 오른쪽에 세로로 표시하려면 다음을 수행하십시오.

.s7interactivevideoviewer.s7touchinput.s7device_landscape .s7interactiveswatches,
.s7interactivevideoviewer.s7mouseinput .s7interactiveswatches {
 width:120px;
 height:auto;
 right:0px;
 top:0px;
 left:auto;
 bottom:auto;
}
.s7interactivevideoviewer.s7touchinput.s7device_portrait .s7interactiveswatches {
 width:auto;
 height:136px;
 right:auto;
 top:auto;
 left:0px;
 bottom:0px;
}

배너의 크기 및 위치는 CSS를 사용하여 적용된 다른 스타일을 기반으로 대화형 견본 구성 요소에서 관리하며 명시적으로 설정할 수 없습니다.

다음 CSS 클래스 선택기는 배너 패널의 모양을 제어합니다.

.s7interactivevideoviewer .s7interactiveswatches .s7banner

배너 패널의 CSS 속성

배경색배너 패널의 배경색입니다.
색배너 패널 내의 텍스트 색입니다.
테두리배너 패널 주변의 테두리.
font-weight배너 패널 내의 텍스트에 사용할 글꼴 두께입니다.
font-size배너 패널 내의 텍스트에 사용할 글꼴 크기입니다.
font-family배너 패널 내의 텍스트에 사용할 글꼴 모음
font-align배너 패널 내의 텍스트에 사용할 글꼴 맞춤입니다.

배너 도구 팁은 현지화할 수 있습니다. 자세한 내용은 사용자 인터페이스 요소의 지역화를 참조하십시오.

예

어두운 회색 배경과 밝은 회색 2픽셀 테두리 및 흰색 텍스트가 가로 가운데에 있는 배너를 설정하려면 다음을 수행합니다.

.s7interactivevideoviewer .s7interactiveswatches .s7banner {
    background-color: #222222;
    border-bottom: 2px solid #444444;
    color: #ffffff;
    text-align: center;
}

다음 CSS 클래스 선택기는 색상 견본의 모양을 제어합니다.

.s7interactivevideoviewer .s7interactiveswatches .s7swatches

견본 영역의 CSS 속성

배경색견본 영역의 배경색입니다.

예

어두운 회색 배경의 색상 견본 영역을 설정하려면 다음을 수행합니다.

.s7interactivevideoviewer .s7interactiveswatches .s7swatches {
    background-color: #222222;
}

다음 CSS 클래스 선택기는 견본 썸네일 간의 간격을 제어합니다.

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell