색상 견본

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

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

.s7mixedmediaviewer .s7colorswatches .s7swatches

색상 견본의 CSS 속성

width

색상 견본의 폭입니다.

height

색상 견본의 높이입니다.

하단

뷰어 컨테이너를 기준으로 하는 세로 색상 견본 오프셋입니다.

예 - 높이가 100픽셀인 색상 견본을 설정합니다.

.s7mixedmediviewer .s7colorswatches .s7swatches { 
 height: 100px;  
}

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

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumbcell

CSS 속성

설명

margin

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

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

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumbcell { 
 margin: 5px; 
}

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

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumb

CSS 속성

설명

너비

축소판의 폭입니다.

높이

축소판의 높이입니다.

경계

축소판의 테두리입니다.

노트

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

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

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

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

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollleftbutton

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollrightbutton

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

CSS 속성

설명

너비

스크롤 단추의 폭입니다.

높이

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

배경 이미지

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

배경 위치

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

CSS Sprite 를 참조하십시오.

노트

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

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

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

이 페이지에서는