표시기 설정

세트 표시기는 터치 장치에서 뷰어를 사용할 때 색상 견본 위에 렌더링되는 일련의 점입니다. 스크롤 단추를 사용할 수 없을 때 축소판 페이지를 탐색하는 데 점이 도움이 됩니다.

설정된 표시기의 CSS 속성

설정된 표시기 컨테이너의 모양은 다음 CSS 클래스 선택기로 제어됩니다.

.s7zoomviewer .s7setindicator

CSS 속성

설명

배경색

배경색(설정 표시기의 16진수 형식)입니다.

예 - 흰색 배경을 사용하여 세트 표시기를 만들려면

.s7zoomviewer .s7setindicator {
 background-color: #FFFFFF;
}

개별 세트 표시기 점의 모양은 CSS 클래스 선택기로 제어됩니다.

.s7zoomviewer .s7setindicator .s7dot

CSS 속성

설명

width

설정된 표시기 점의 너비입니다.

height

설정된 표시기 점의 높이입니다.

왼쪽 여백

왼쪽 여백(픽셀 단위)입니다.

여백 상단

위쪽 여백(픽셀 단위)입니다.

순익

오른쪽 여백(픽셀 단위)입니다.

여백 하단

아래쪽 여백(픽셀 단위)입니다.

테두리 반경

테두리 반경(픽셀 단위).

배경색

16진수 형식의 배경색입니다.

노트

표시기 점은 state 속성 선택기. 다른 스킨을 다른 축소판 상태에 적용하는 데 사용할 수 있습니다. 특히, state="selected" 축소판의 현재 페이지에 해당합니다. state="unselected" 는 기본 점 상태에 해당합니다.

예 - 세트 표시기 점을 15 x 15픽셀로 만들려면 두 픽셀 가로 여백, 5픽셀 위쪽 여백, 1픽셀 아래쪽 여백, 12픽셀 반경, #D5D3D3 기본 색상 및 #939393 활성 색상을 사용합니다.

.s7zoomviewer .s7setindicator .s7dot {
 width:15px;
 height:15px;
 margin-left:2px;
 margin-top:5px;
 margin-right:2px;
 margin-bottom:1px;
 border-radius:12px;
 background-color:#D5D3D3;
}
.s7zoomviewer .s7setindicator .s7dot[state="selected"] {
 background-color:#939393;
}

이 페이지에서는