견본

색상 견본은 왼쪽 및 오른쪽에 선택 가능한 스크롤 버튼이 있는 축소판 이미지 행으로 구성됩니다. 모든 축소판이 컨테이너 너비에 맞지 않는 경우에만 바탕 화면에 스크롤 단추가 표시됩니다. 모바일 장치에서는 축소판이 컨테이너 너비에 맞을 수 있는 경우 스크롤 버튼이 표시되지 않습니다.

.s7zoomviewer .s7swatches

기본 뷰어 영역의 CSS 속성

색상 견본 컨테이너의 모양은 다음 CSS 클래스 선택기로 제어됩니다.

.s7zoomviewer .s7zoomresetbutton

CSS 속성

설명

width

색상 견본의 폭입니다.

height

색상 견본의 높이입니다.

하단

뷰어 컨테이너에 대해 세로 색상 견본 오프셋입니다.

예 - 색상 견본을 460 x 100픽셀로 설정합니다.

.s7zoomviewer .s7swatches { 
 width: 460px; 
 height: 100px;  
}

견본 축소판 간의 간격은 다음 CSS 클래스 선택기로 제어됩니다.

.s7zoomviewer .s7swatches .s7thumbcell

CSS 속성

설명

margin

각 축소판 주위의 가로 및 세로 여백의 크기입니다. 실제 축소판 간격은 .s7thumbcell 에 대해 설정된 왼쪽 및 오른쪽 여백의 합계와 같습니다.

간격을 세로 및 가로 모두 10픽셀로 설정하려면 다음을 수행합니다.

.s7zoomviewer .s7swatches .s7thumbcell { 
 margin: 5px; 
}

개별 축소판의 모양은 다음 CSS 클래스 선택기로 제어됩니다.

.s7zoomviewer .s7swatches .s7thumb

CSS 속성

설명

너비

축소판의 폭입니다.

높이

축소판의 높이입니다.

경계

축소판의 테두리입니다.

노트

섬네일은 state 속성 선택기를 지원합니다. 이 선택기는 다른 스킨(thumbnail states)을 적용하는 데 사용할 수 있습니다. 특히 state="selected"은 현재 기본 보기에 표시된 이미지의 축소판에 해당하고, state="default"은 나머지 축소판에 해당하며, 마우스 가리키기에 state="over"가 사용됩니다.

예 - 56 x 56픽셀로 축소판을 설정하려면 밝은 회색의 기본 테두리와 어두운 회색으로 선택한 테두리를 사용합니다.

.s7zoomviewer .s7swatches .s7thumb { 
 width: 56px; 
 height: 56px;  
} 
.s7zoomviewer .s7swatches .s7thumb[state="default"] { 
 border: 1px solid #dddddd; 
} 
.s7zoomviewer .s7swatches .s7thumb[state="selected"] { 
 border: 1px solid #666666; 
}

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

.s7zoomviewer .s7swatches .s7scrollleftbutton

.s7zoomviewer .s7swatches .s7scrollrightbutton

CSS 위쪽, 왼쪽, 아래쪽 및 오른쪽 속성을 사용하여 스크롤 단추를 배치할 수 없습니다. 대신 뷰어 논리에서 자동으로 위치를 지정합니다.

CSS 속성

설명

너비

스크롤 단추의 폭입니다.

높이

스크롤 단추의 높이입니다.

배경 이미지

지정된 단추 상태에 대해 표시되는 이미지입니다.

배경 위치

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

CSS Sprite 를 참조하십시오.

노트

이 버튼은 state 속성 선택기를 지원하며, 이 선택기는 다른 단추 상태에 다른 스킨을 적용하는 데 사용할 수 있습니다. up, down, overdisabled.

단추 도구 설명은 현지화할 수 있습니다. 사용자 인터페이스 요소의 로컬라이제이션을 참조하십시오.

예 - 56 x 56픽셀이고 각 상태에 대해 서로 다른 아트웍을 갖는 스크롤 단추를 설정하려면 다음을 수행합니다.

.s7zoomviewer .s7swatches .s7scrollleftbutton { 
 background-size: auto; 
 width: 56px; 
 height: 56px; 
} 
.s7zoomviewer .s7swatches .s7scrollleftbutton[state="up"]{ 
background-image:url(images/v2/ScrollLeftButton_up.png); 
} 
.s7zoomviewer .s7swatches .s7scrollleftbutton[state="over"]{ 
 background-image:url(images/v2/ScrollLeftButton_over.png); 
} 
.s7zoomviewer .s7swatches .s7scrollleftbutton[state="down"]{ 
 background-image:url(images/v2/ScrollLeftButton_down.png); 
} 
.s7zoomviewer .s7swatches .s7scrollleftbutton[state="disabled"]{ 
 background-image:url(images/v2/ScrollLeftButton_disabled.png); 
} 
.s7zoomviewer .s7swatches .s7scrollrightbutton { 
 background-size: auto; 
 width: 56px; 
 height: 56px; 
} 
.s7zoomviewer .s7swatches .s7scrollrightbutton[state="up"]{ 
background-image:url(images/v2/ScrollRightButton_up.png); 
} 
.s7zoomviewer .s7swatches .s7scrollrightbutton[state="over"]{ 
 background-image:url(images/v2/ScrollRightButton_over.png); 
} 
.s7zoomviewer .s7swatches .s7scrollrightbutton[state="down"]{ 
 background-image:url(images/v2/ScrollRightButton_down.png); 
} 
.s7zoomviewer .s7swatches .s7scrollrightbutton[state="disabled"]{ 
 background-image:url(images/v2/ScrollRightButton_disabled.png); 
}

이 페이지에서는