목차 table-of-contents

목차는 기본 컨트롤 막대에 있는 단추입니다. 활성화되면 페이지 인덱스 및 레이블 목록이 포함된 드롭다운 패널이 표시됩니다.

구성에 따라 목록에는 카탈로그에 있는 모든 페이지나 명시적 레이블이 정의된 페이지만 포함될 수 있습니다. 데스크탑 시스템에서는 목록이 사용 가능한 화면 부동산보다 긴 경우 오른쪽에 스크롤 막대가 표시됩니다.

뷰어 사용자 인터페이스에서 목차 버튼의 위치와 크기는 다음 CSS 클래스 선택기로 제어합니다.

.s7ecatalogviewer .s7tableofcontents

목차의 CSS 속성

여백-상단
컨트롤 막대의 위쪽에 있는 오프셋입니다.
여백-왼쪽
왼쪽에 있는 다음 단추까지의 거리 또는 한 행에 있는 첫 번째 단추인 경우 컨트롤 막대의 왼쪽입니다.
너비
목차 버튼의 폭.
높이
목차 버튼의 높이입니다.
배경 이미지
지정된 단추 상태에 대해 표시되는 이미지입니다.
백그라운드 위치

CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 배치합니다.

CSS 스프라이트도 참조하십시오.

NOTE
이 단추는 state 특성 선택기를 지원하며, 이 선택기는 다른 단추 상태에 다른 스킨을 적용하는 데 사용할 수 있습니다.

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

예 - 기본 컨트롤 막대의 맨 아래에서 4픽셀, 왼쪽에서 43픽셀로 배치된 목차 단추를 설정합니다. 크기는 28 x 28픽셀이며 네 개의 서로 다른 버튼 상태에 대해 각각 다른 이미지가 표시됩니다.

.s7ecatalogviewer .s7tableofcontents {
margin-top: 4px;
margin-left: 10px; width: 28px;
 height: 28px;
}
.s7ecatalogviewer .s7tableofcontents[state='up'] {
background-image:url(images/v2/TableOfContents_dark_up.png);
}
.s7ecatalogviewer .s7tableofcontents[state='over'] {
background-image:url(images/v2/TableOfContents_dark_over.png);
}
.s7ecatalogviewer .s7tableofcontents[state='down'] {
background-image:url(images/v2/TableOfContents_dark_down.png);
}
.s7ecatalogviewer .s7tableofcontents[state='disabled'] {
background-image:url(images/v2/TableOfContents_dark_disabled.png);
}

드롭다운 패널의 모양은 다음 CSS 클래스 선택기로 제어됩니다.

 .s7ecatalogviewer .s7tableofcontents .s7panel

드롭다운 패널의 CSS 속성

배경색
드롭다운 패널의 배경색입니다.
여백
패널 경계와 컨텐츠 간의 내부 오프셋입니다.
상자-그림자
패널 주위에 그림자를 그립니다.
NOTE
CSS에서 드롭다운 패널의 크기나 위치를 제어할 수 없습니다. 구성 요소는 레이아웃을 프로그래밍 방식으로 관리합니다.

예 - 반투명 검은색 배경, 콘텐츠 주위의 5픽셀 여백 및 그림자 효과가 있는 드롭다운 패널을 설정합니다.

.s7ecatalogviewer .s7tableofcontents .s7panel {
 background-color: rgba(0, 0, 0, 0.5);
 margin: 5px;
 box-shadow: 2px 2px 3px #c0c0c0;
}

개별 항목의 모양과 느낌은 다음 CSS 클래스 선택기로 제어합니다.

 .s7ecatalogviewer .s7tableofcontents .s7panel .s7item

항목의 CSS 속성

font-family
글꼴 이름.
font-size
글꼴 크기입니다.
높이
항목의 높이입니다.
패딩
내부 패딩.
NOTE
드롭다운 목록 항목은 state 특성 선택기를 지원하며, 이 선택기는 마우스로 가리키거나 선택한 항목 상태에 다른 스킨을 적용하는 데 사용할 수 있습니다.

예 - Helvetica® 14픽셀 글꼴과 19픽셀 높이의 드롭다운 항목을 설정합니다. 항목을 선택하면 마우스로 가리키고 밝은 회색 배경이 있는 어두운 회색 배경이 있습니다.

.s7ecatalogviewer .s7tableofcontents .s7panel .s7item {
font-family: Helvetica,sans-serif;
font-size: 14px;
height: 19px;
}
.s7ecatalogviewer .s7tableofcontents .s7panel .s7item[state="over"] {
background-color: rgb(102, 102, 102);
}
.s7ecatalogviewer .s7tableofcontents .s7panel .s7item[state="selected"] {
background-color: rgb(178, 178, 178);
}

페이지 인덱스를 표시하는 요소는 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogviewer .s7tableofcontents .s7panel .s7index

페이지 인덱스의 CSS 속성

분 너비
최소 요소 너비입니다.
최대 너비
최대 요소 너비입니다.
패딩 오른쪽
페이지 색인과 페이지 레이블 간의 거리입니다.
NOTE
s7index CSS 클래스에 대해 display:none을(를) 설정하여 페이지 인덱스를 완전히 숨길 수 있습니다.

예제 1 - 오른쪽에서 최소 너비가 40픽셀이고 최대 너비가 70픽셀이며 5픽셀 여백이 있는 페이지 인덱스를 설정합니다.

.s7ecatalogviewer .s7tableofcontents .s7panel .s7index {
max-width: 70px;
min-width: 40px;
padding-right: 5px;
}

예제 2 - 페이지 인덱스 숨기기:

.s7ecatalogviewer .s7tableofcontents .s7panel .s7index {
display: none;
}

페이지 레이블은 다음 CSS 클래스 선택기로 제어됩니다.

 .s7ecatalogviewer .s7tableofcontents .s7panel .s7label

페이지 레이블의 CSS 속성

분 너비
최소 요소 너비입니다.
최대 너비
최대 요소 너비입니다.

예 - 최소 너비는 40픽셀이고 최대 너비는 240픽셀인 페이지 인덱스를 설정합니다.

.s7ecatalogviewer .s7tableofcontents .s7panel .s7label {
min-width: 40px;
max-width: 240px;
}

드롭다운 패널 내에서 세로로 맞출 수 있는 것보다 많은 항목이 있고 시스템이 데스크탑인 경우 구성 요소는 패널의 오른쪽에 세로 스크롤 막대를 렌더링합니다. 스크롤 막대 영역의 모양은 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogviewer .s7tableofcontents .s7scrollbar

스크롤 막대의 CSS 속성

너비
스크롤 막대 폭입니다.
상위
패널 영역의 위쪽에서 오프셋된 세로 스크롤 막대입니다.
하단
패널 영역 아래쪽에서 오프셋된 세로 스크롤 막대입니다.
오른쪽
패널 영역의 오른쪽 가장자리에서 오프셋된 가로 스크롤 막대입니다.

예 - 패널의 위쪽, 오른쪽 또는 아래쪽 영역에 여백이 없는 28픽셀 너비의 스크롤 막대를 설정합니다.

.s7ecatalogviewer .s7tableofcontents .s7scrollbar {
 top:0px;
 bottom:0px;
 right:0px;
 width:28px;
}

스크롤 막대 트랙은 위쪽 및 아래쪽 스크롤 단추 사이의 영역입니다. 이 구성 요소는 트랙의 위치와 높이를 자동으로 설정합니다. 트랙은 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolltrack

스크롤 트랙의 CSS 속성

너비
트랙 폭입니다.
배경색
트랙 배경색입니다.

예 - 폭이 28픽셀이고 배경이 반투명한 스크롤바 트랙을 설정합니다.

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolltrack {
 width:28px;
 background-color:rgba(102, 102, 102, 0.5);
}

스크롤 막대 썸네일이 스크롤 트랙 영역 내에서 세로로 이동합니다. 수직 위치는 구성 요소 논리에 의해 제어됩니다. 그러나 썸네일 높이는 컨텐츠의 양에 따라 동적으로 변경되지 않습니다. 다음 CSS 클래스 선택기를 사용하여 썸네일 높이 및 기타 측면을 구성할 수 있습니다.

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb

스크롤 막대 썸네일의 CSS 속성

너비
썸네일 너비.
높이
엄지 높이입니다.
패딩 상단
트랙 상단 사이의 수직 패딩입니다.
패딩-하단
트랙 하단 사이의 수직 패딩입니다.
배경 이미지
지정된 썸네일 상태에 대해 표시되는 이미지입니다.
백그라운드 위치

CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 배치합니다.

CSS 스프라이트도 참조하십시오.

NOTE
Thumb은 up, down, overdisabled Thumb 상태에 다른 스킨을 적용하는 데 사용할 수 있는 state 특성 선택기를 지원합니다.

예 - 28 x 45픽셀이고 위쪽과 아래쪽에 10픽셀 여백이 있으며 각 상태에 대해 서로 다른 아트워크가 있는 스크롤 막대 썸을 설정합니다.

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb {
 width:28px;
 background-repeat:no-repeat;
 background-position:center;
 height:45px;
 padding-top:10px;
 padding-bottom:10px;
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='up'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='down'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_down.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='over'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_over.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}

다음 CSS 클래스 선택기를 사용하여 위쪽 및 아래쪽 스크롤 단추의 모양이 제어됩니다.

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton

CSS top, left, bottomright 속성을 사용하여 스크롤 단추를 배치할 수 없습니다. 대신 뷰어 논리에서 자동으로 배치합니다.

위로 스크롤 및 아래로 스크롤 단추의 CSS 속성

너비
단추 너비입니다.
높이
단추 높이.
배경 이미지
지정된 단추 상태에 대해 표시되는 이미지입니다.
백그라운드 위치

CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 배치합니다.

CSS 스프라이트도 참조하십시오.

NOTE
단추는 up, down, overdisabled 단추 상태에 다른 스킨을 적용하는 데 사용할 수 있는 state 특성 선택기를 지원합니다.

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

예 - 28 x 32픽셀이며 각 상태에 대해 다른 아트웍이 있는 스크롤 단추를 설정합니다.

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton {
 width:28px;
 height:32px;
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='up'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='over'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_over.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='down'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_down.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton {
 width:28px;
 height:32px;
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='up'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='over'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_over.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='down'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_down.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8