표시기 설정

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

주제:

작성 대상:

개발자
사용자

세트 표시기는 뷰어 하단에 렌더링된 일련의 점입니다. 세트 내의 현재 위치를 표시합니다.

집합 표시기의 CSS 속성

다음 CSS 클래스 선택기를 사용하여 설정된 표시기 컨테이너의 모양이 제어됩니다.

.s7carouselviewer .s7setindicator

CSS 속성	설명
배경색	설정 표시기의 16진수 형식 배경색입니다.

노트

세트 표시기는 모드 속성 선택기를 지원하며, 이 선택기를 사용하여 점선 및 숫자 작업 모드에 대해 다양한 스타일을 적용할 수 있습니다. 특히 mode="numeric"은(는) 숫자 작업 모드에 해당하고 mode="dotted"은(는) 기본 점 상태에 해당합니다.

예를 들어 흰색 배경의 세트 표시기를 설정한다고 가정해 보겠습니다.

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

개별 세트 표시기 점의 모양은 CSS 클래스 선택기로 제어됩니다. 점선의 작업 모드와 숫자 작업 모드의 항목에 모두 적용됩니다.

.s7carouselviewer .s7setindicator .s7dot

CSS 속성	설명
너비	설정된 표시기 점의 폭입니다.
높이	설정된 표시점의 높이입니다.
여백-왼쪽	왼쪽 여백(픽셀).
여백-상단	상단 여백(픽셀).
여백-오른쪽	오른쪽 여백(픽셀 단위).
여백-하단	아래 여백(픽셀).
border-radius	테두리 반경(픽셀).
배경색	16진수 형식의 배경색입니다.
font-family	글꼴 이름.
font-size	글꼴 크기입니다.
색	글꼴 색입니다.
수직 맞춤	배너 색인의 세로 정렬.
줄 높이	배너 색인의 텍스트 높이입니다.

노트

지표 설정 항목은 state 특성 선택기를 지원하며, 이 선택기는 다른 썸네일 상태에 다른 스킨을 적용하는 데 사용할 수 있습니다. 특히 state="selected"은(는) 집합의 현재 요소에 해당하고 state="unselected"은(는) 기본 항목 상태에 해당합니다.

예를 들어 데스크탑 시스템에 대해 세트 표시기를 점선 모드로 설정한다고 가정합니다. 뷰어 아래쪽에서 20픽셀 떨어진 위치에 배치하려고 합니다. 또한 선택하지 않은 점을 50%의 투명도와 15 x 15픽셀의 검정색으로 하고 7개의 픽셀은 둥근 모서리로 만듭니다. 선택한 점은 90% 투명도의 검정색이며, 18 x 18 픽셀이고 9개의 픽셀이 둥근 모서리입니다. 점 사이의 간격은 5픽셀입니다.

.s7carouselviewer.s7mouseinput .s7setindicator {
 bottom: 20px;
}
.s7carouselviewer.s7mouseinput .s7setindicator[mode='dotted'] .s7dot{
 width:15px;
 height:15px;
 margin-left:2.5px;
 margin-right:2.5px;
 margin-top:2.5px;
 margin-bottom:2.5px;
}
.s7carouselviewer.s7mouseinput .s7setindicator[mode='dotted'] .s7dot[state='selected'] {
 width:18px;
 height:18px;
 background-color: #000000;
 opacity: 0.9;
 border-radius:9px;
}
.s7carouselviewer.s7mouseinput .s7setindicator[mode='dotted'] .s7dot[state='unselected'] {
 width:15px;
 height:15px;
 background-color: #000000;
 opacity: 0.5;
 border-radius:7px;
}

recommendation-more-help