공개 클래스명 레퍼런스
쇼룸이 스타일 오버라이드용으로 공개하는 클래스명 138개를 모듈별로 정리한 목록입니다. 목록에 없는 클래스는 내부 구현이라 예고 없이 바뀝니다.
읽는 방법
각 표의 첫 항목이 그 모듈의 루트 클래스입니다. 오버라이드 원칙과 예제는 CSS 클래스 커스터마이징에 있습니다.
| 표기 | 의미 |
|---|---|
{index} | 렌더된 순서. 0부터 시작합니다 |
| 루트 클래스 | 각 표의 첫 항목. 오버라이드 시 함께 지정합니다 |
공개 클래스명
레이아웃 (2)
| 클래스명 | 대상 |
|---|---|
sauce-showroom-page | 페이지(전체) 루트 컨테이너 |
sauce-showroom-module | 모듈(섹션) 단위 컨테이너 |
헤더·검색 (20)
| 클래스명 | 대상 |
|---|---|
sauce-showroom-header | 헤더 루트 |
sauce-showroom-partner-logo | 파트너 로고 영역 |
sauce-showroom-search-icon | 검색 아이콘 |
sauce-showroom-search-close-icon | 검색 닫기 아이콘 |
sauce-showroom-search-text-input | 검색 입력창 |
sauce-showroom-search-dimmed-overlay | 검색 팝오버 뒤 딤 처리 영역 |
sauce-showroom-search-content-no-data | 검색 결과 없음 영역 |
sauce-showroom-search-content-recent-keyword-area | 최근 검색어 영역 |
sauce-showroom-search-content-recent-keyword-delete-button | 최근 검색어 삭제 버튼 |
sauce-showroom-search-content-recent-keyword-{index} | 최근 검색어 n번째 |
sauce-showroom-search-content-recent-keyword-no-data | 최근 검색어 없음 |
sauce-showroom-search-content-live | 검색: 라이브 섹션 |
sauce-showroom-search-content-live-title | 검색: 라이브 타이틀 |
sauce-showroom-search-content-live-card-{index} | 검색: 라이브 카드 n번째 |
sauce-showroom-search-content-clip | 검색: 클립 섹션 |
sauce-showroom-search-content-clip-title | 검색: 클립 타이틀 |
sauce-showroom-search-content-clip-card-{index} | 검색: 클립 카드 n번째 |
sauce-showroom-search-content-vod | 검색: VOD 섹션 |
sauce-showroom-search-content-vod-title | 검색: VOD 타이틀 |
sauce-showroom-search-content-vod-card-{index} | 검색: VOD 카드 n번째 |
배너 (29)
| 클래스명 | 대상 |
|---|---|
sauce-showroom-banner | 배너 루트 |
sauce-showroom-banner-image-type | 이미지형 배너 영역 |
sauce-showroom-banner-strip-type | 스트립형 배너 영역 |
sauce-showroom-banner-live-type | 라이브 배너 타입 루트 |
sauce-showroom-banner-slide-{index} | n번째 슬라이드 |
sauce-showroom-banner-play-button | 재생 버튼 |
sauce-showroom-banner-pause-button | 일시정지 버튼 |
sauce-showroom-banner-order | 현재 순서 표시 |
sauce-showroom-banner-total-count | 전체 개수 표시 |
sauce-showroom-banner-prev-button | 이전 배너 버튼 |
sauce-showroom-banner-next-button | 다음 배너 버튼 |
sauce-showroom-banner-indicator-container | 인디케이터 전체 영역 |
sauce-showroom-banner-indicator | 인디케이터 항목 |
sauce-showroom-banner-indicator-active | 현재 배너의 인디케이터 항목 |
sauce-showroom-banner-indicator-text | 인디케이터 안 텍스트 |
sauce-showroom-banner-indicator-gauge | 자동 롤링 게이지 영역 |
sauce-showroom-banner-indicator-gauge-bar | 자동 롤링 게이지 바 |
sauce-showroom-banner-type-badge | 배너 영상 유형 배지 |
sauce-showroom-banner-pv-badge | 배너 조회수 배지 |
sauce-showroom-banner-notification-button | 라이브 배너 알림 버튼 |
sauce-showroom-banner-live-content-area | 라이브 배너 정보 영역 |
sauce-showroom-banner-live-link-notifier | 라이브 배너 링크 안내 요소 |
sauce-showroom-banner-live-video-control | 라이브 배너 영상 컨트롤 |
sauce-showroom-banner-live-date | 라이브 배너 방송 일시 |
sauce-showroom-banner-live-name | 라이브 배너 방송명 |
sauce-showroom-banner-live-description | 라이브 배너 설명 |
sauce-showroom-banner-live-button-list | 라이브 배너 버튼 목록 영역 |
sauce-showroom-banner-live-fill-button | 라이브 배너 채움형 버튼 |
sauce-showroom-banner-live-text-button | 라이브 배너 텍스트형 버튼 |
모두보기 모달 (11)
| 클래스명 | 대상 |
|---|---|
sauce-showroom-all-view-modal | 모두보기 모달 루트 |
sauce-showroom-all-view-modal-title | 모달 타이틀 |
sauce-showroom-all-view-modal-description | 설명 |
sauce-showroom-all-view-modal-filter-checkbox | 모두보기 모달 필터 체크박스 |
sauce-showroom-all-view-modal-close-button | 닫기 버튼 |
sauce-showroom-all-view-modal-total-count | 총 개수 |
sauce-showroom-all-view-modal-card-{index} | 카드 n번째 |
sauce-showroom-all-view-modal-no-data | 데이터 없음 |
sauce-showroom-all-view-modal-group-tab-container | 모두보기 모달 그룹 탭 영역 |
sauce-showroom-all-view-modal-group-tab-{index} | 모두보기 모달 그룹 탭 항목 |
sauce-showroom-all-view-modal-group-tab-active | 모두보기 모달 선택된 그룹 탭 |
최근 라이브 (4)
| 클래스명 | 대상 |
|---|---|
sauce-showroom-recent-live | 섹션 루트 |
sauce-showroom-recent-live-title | 섹션 타이틀 |
sauce-showroom-recent-live-all-view-button | 전체보기 버튼 |
sauce-showroom-recent-live-card-{index} | 카드 n번째 |
예정 라이브 (8)
| 클래스명 | 대상 |
|---|---|
sauce-showroom-scheduled-live | 섹션 루트 |
sauce-showroom-scheduled-live-title | 섹션 타이틀 |
sauce-showroom-scheduled-live-all-view-button | 전체보기 버튼 |
sauce-showroom-scheduled-live-card-{index} | 카드 n번째 |
sauce-showroom-scheduled-live-current-page | 현재 페이지 |
sauce-showroom-scheduled-live-total-page | 전체 페이지 |
sauce-showroom-scheduled-live-next-page-button | 다음 버튼 |
sauce-showroom-scheduled-live-prev-page-button | 이전 버튼 |
라이브 캘린더 (8)
| 클래스명 | 대상 |
|---|---|
sauce-showroom-live-calendar | 섹션 루트 |
sauce-showroom-live-calendar-title | 섹션 타이틀 |
sauce-showroom-live-calendar-date-{index} | 날짜 n번째 |
sauce-showroom-live-calendar-date-active | 선택된 날짜 |
sauce-showroom-live-calendar-card-{index} | 카드 n번째 |
sauce-showroom-live-calendar-no-data | 데이터 없음 |
sauce-showroom-live-calendar-prev-view-button | 이전 보기 |
sauce-showroom-live-calendar-next-view-button | 다음 보기 |
VOD 큐레이션 (15)
| 클래스명 | 대상 |
|---|---|
sauce-showroom-vod-curation | 섹션 루트 |
sauce-showroom-vod-curation-title | 섹션 타이틀 |
sauce-showroom-vod-curation-filter-checkbox | VOD 큐레이션 필터 체크박스 |
sauce-showroom-vod-curation-card-{index} | 카드 n번째 |
sauce-showroom-vod-curation-no-data | VOD 큐레이션 콘텐츠 없음 영역 |
sauce-showroom-vod-curation-group-tab-container | VOD 큐레이션 그룹 탭 영역 |
sauce-showroom-vod-curation-group-tab-{index} | VOD 큐레이션 그룹 탭 항목 |
sauce-showroom-vod-curation-group-tab-active | VOD 큐레이션 선택된 그룹 탭 |
sauce-showroom-vod-curation-indicator-container | VOD 큐레이션 인디케이터 영역 |
sauce-showroom-vod-curation-indicator | VOD 큐레이션 인디케이터 항목 |
sauce-showroom-vod-curation-indicator-active | VOD 큐레이션 현재 인디케이터 항목 |
sauce-showroom-vod-curation-indicator-gauge | VOD 큐레이션 게이지 영역 |
sauce-showroom-vod-curation-indicator-gauge-bar | VOD 큐레이션 게이지 바 |
sauce-showroom-vod-curation-prev-button | VOD 큐레이션 이전 버튼 |
sauce-showroom-vod-curation-next-button | VOD 큐레이션 다음 버튼 |
CLIP 큐레이션 (14)
| 클래스명 | 대상 |
|---|---|
sauce-showroom-clip-curation | 섹션 루트 |
sauce-showroom-clip-curation-title | 섹션 타이틀 |
sauce-showroom-clip-curation-card-{index} | 카드 n번째 |
sauce-showroom-clip-curation-no-data | CLIP 큐레이션 콘텐츠 없음 영역 |
sauce-showroom-clip-curation-group-tab-container | CLIP 큐레이션 그룹 탭 영역 |
sauce-showroom-clip-curation-group-tab-{index} | CLIP 큐레이션 그룹 탭 항목 |
sauce-showroom-clip-curation-group-tab-active | CLIP 큐레이션 선택된 그룹 탭 |
sauce-showroom-clip-curation-indicator-container | CLIP 큐레이션 인디케이터 영역 |
sauce-showroom-clip-curation-indicator | CLIP 큐레이션 인디케이터 항목 |
sauce-showroom-clip-curation-indicator-active | CLIP 큐레이션 현재 인디케이터 항목 |
sauce-showroom-clip-curation-indicator-gauge | CLIP 큐레이션 게이지 영역 |
sauce-showroom-clip-curation-indicator-gauge-bar | CLIP 큐레이션 게이지 바 |
sauce-showroom-clip-curation-prev-button | CLIP 큐레이션 이전 버튼 |
sauce-showroom-clip-curation-next-button | CLIP 큐레이션 다음 버튼 |
라이브·VOD 카드 (12)
| 클래스명 | 대상 |
|---|---|
sauce-showroom-broadcast-card-thumbnail-area | 썸네일 영역 컨테이너 |
sauce-showroom-broadcast-card-thumbnail | 썸네일 이미지 |
sauce-showroom-broadcast-card-video | 비디오 영역 |
sauce-showroom-broadcast-card-date | 날짜 텍스트 |
sauce-showroom-broadcast-card-name | 제목/이름 |
sauce-showroom-broadcast-card-shop-info | 샵 정보 |
sauce-showroom-broadcast-card-curation-filter-badge | 카드의 큐레이션 필터 배지 |
sauce-showroom-broadcast-card-pv-badge | PV 뱃지 |
sauce-showroom-broadcast-card-type-badge | 타입 뱃지 |
sauce-showroom-broadcast-card-purchase-auth-badge | 구매인증 뱃지 |
sauce-showroom-broadcast-card-play-icon | 재생 아이콘 |
sauce-showroom-broadcast-card-notification-button | 알림 버튼 |
클립 카드 (9)
| 클래스명 | 대상 |
|---|---|
sauce-showroom-clip-card-thumbnail-area | 썸네일 영역 |
sauce-showroom-clip-card-thumbnail | 썸네일 |
sauce-showroom-clip-card-video | 비디오 |
sauce-showroom-clip-card-name | 클립 제목 |
sauce-showroom-clip-card-shop-info | 채널/샵 정보 |
sauce-showroom-clip-card-pv-badge | PV 뱃지 |
sauce-showroom-clip-card-type-badge | 타입 뱃지 |
sauce-showroom-clip-card-play-icon | 재생 아이콘 |
sauce-showroom-clip-card-tag-list | 태그 리스트 |
상품 (6)
| 클래스명 | 대상 |
|---|---|
sauce-showroom-product | 상품 영역 루트 |
sauce-showroom-product-thumbnail | 상품 썸네일 |
sauce-showroom-product-name | 상품명 |
sauce-showroom-product-price | 가격 |
sauce-showroom-product-price-discount-rate | 상품 할인율 |
sauce-showroom-product-price-selling-price | 상품 판매가 |
Updated about 4 hours ago
Did this page help you?