설명서Dynamic Media 뷰어 참조 안내서

즐겨찾기 보기 favorites-view

Last update: Mon Jul 22 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 주제:

작성 대상:

  • 개발자
  • 사용자

즐겨찾기 보기는 썸네일 이미지 열로 구성됩니다.

다음 CSS 클래스 선택기를 사용하여 즐겨찾기 보기 컨테이너의 모양이 제어됩니다.

.s7ecatalogsearchviewer .s7favoritesview

즐겨찾기 보기의 위치 및 높이는 보기에서 관리됩니다. CSS에서는 너비만 정의할 수 있습니다.

즐겨찾기 보기의 CSS 속성

배경색
즐겨찾기 보기의 배경색입니다.
너비
보기의 폭입니다.

예 - 반투명 회색 배경이 있는 100픽셀 너비의 즐겨찾기 보기를 설정합니다.

.s7ecatalogsearchviewer .s7favoritesview {
 width: 100px;
 background-color: rgba(221, 221, 221, 0.5);
}

즐겨찾기 썸네일 간의 간격은 다음 CSS 클래스 선택기를 사용하여 제어됩니다.

.s7ecatalogsearchviewer .s7favoritesview .s7thumbcell

즐겨찾기 썸네일의 CSS 속성

여백
각 썸네일 주변의 세로 여백 크기입니다. 실제 썸네일 간격은 .s7thumbcell 에 대해 설정된 위쪽 여백과 아래쪽 여백의 합과 같습니다.

예 - 10개의 픽셀 간격을 설정합니다.

.s7ecatalogsearchviewer .s7favoritesview .s7thumbcell {
 margin: 5px;
}

개별 썸네일의 모양은 다음 CSS 클래스 선택기로 제어합니다.

.s7ecatalogsearchviewer .s7favoritesview .s7thumb

즐겨찾기 썸네일의 CSS 속성

너비
썸네일의 폭.
높이
썸네일의 높이입니다.
테두리
썸네일의 테두리.
NOTE
썸네일은 state 특성 선택기를 지원하며, 이 선택기를 사용하여 다른 썸네일 상태에 다른 스킨을 적용할 수 있습니다. 특히 state="selected"은(는) 사용자가 최근에 선택한 썸네일에 해당합니다. state="default"은(는) 나머지 썸네일에 해당합니다. state="over"은(는) 마우스를 가리킬 때 사용됩니다.

예 - 75 x 75픽셀인 썸네일을 설정하려면 밝은 회색의 기본 테두리와 어두운 회색의 선택된 테두리를 사용합니다.

.s7ecatalogsearchviewer .s7favoritesview .s7thumb {
 width: 75px;
 height: 75px;
}
.s7ecatalogsearchviewer .s7favoritesview .s7thumb[state="default"] {
 border: 1px solid #dddddd;
}
.s7ecatalogsearchviewer .s7favoritesview .s7thumb[state="selected"] {
 border: 1px solid #666666;
}

썸네일 레이블의 모양은 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogsearchviewer .s7favoritesview .s7label

즐겨찾기 레이블의 CSS 속성

글꼴 모음
글꼴 이름.
font-size
글꼴 크기입니다.

예 - 14픽셀 Helvetica® 글꼴로 레이블을 설정합니다.

.s7ecatalogsearchviewer .s7favoritesview .s7label {
 font-family: Helvetica,sans-serif;
 font-size: 14px;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8