CSS 클래스 커스터마이징

테마 설정으로 조정되지 않는 여백·폰트·숨김을 공개 클래스명으로 덮어쓰는 방법과, 다른 모듈에 영향을 주지 않는 오버라이드 원칙입니다.

CSS 클래스 커스터마이징 — 쇼룸 WEB

⏱ 예상 소요 시간: 15분

📋 사전 조건: 콘텐츠 모듈 표시

공개 클래스명의 범위

스타일 오버라이드가 보장되는 대상은 공개 클래스명 레퍼런스의 138개입니다. 목록에 없는 클래스는 내부 구현이라 예고 없이 바뀝니다.

💡 테마 설정으로 조정되는 항목은 어드민에서 바뀝니다. 조정 수단 비교는 고급·문제해결에 있습니다.

루트 클래스 아래로만 덮어쓰기

전역으로 덮어쓰면 같은 클래스를 쓰는 다른 모듈까지 함께 바뀝니다. 기능별 루트 클래스와 함께 지정합니다.

css

/* 권장 — 최근 라이브의 제목만 */
.sauce-showroom-recent-live.sauce-showroom-recent-live-title {
  color: #111;
}

/* 권장 — 헤더의 검색 입력창만 */
.sauce-showroom-header.sauce-showroom-search-text-input {
  border-radius: 8px;
}

/* 비권장 — 검색 입력창 전체 */
.sauce-showroom-search-text-input {
  border-radius: 8px;
}

{index} 클래스 규칙

{index} 는 렌더된 순서이고 0부터 시작합니다.

클래스	가리키는 것
`sauce-showroom-recent-live-card-0`	첫 번째 카드
`sauce-showroom-banner-slide-2`	세 번째 슬라이드

⚠️ 정렬이나 데이터가 바뀌면 같은 인덱스가 다른 콘텐츠를 가리킵니다. 특정 콘텐츠를 지정하는 용도로는 쓰지 않습니다. n번째만 다르게 보이는 스타일에만 씁니다.

예제

css

/* 여백 */
.sauce-showroom-scheduled-live {
  padding: 16px;
}

/* 폰트 크기 */
.sauce-showroom-vod-curation.sauce-showroom-vod-curation-title {
  font-size: 18px;
}

/* 폰트 굵기 */
.sauce-showroom-clip-curation.sauce-showroom-clip-curation-title {
  font-weight: 700;
}

/* 숨기기 */
.sauce-showroom-clip-curation.sauce-showroom-clip-curation-title {
  display: none;
}

주의사항

항목	내용
목록에 없는 클래스	내부 구현이므로 예고 없이 바뀝니다
DOM 구조	클래스명은 유지되지만 요소의 중첩 구조는 바뀔 수 있습니다. 자식 선택자(`>`)보다 클래스 지정을 씁니다
`!important`	테마 설정으로 주입되는 색상을 덮어쓸 때만 씁니다
`{index}`	콘텐츠를 지정하는 용도로 쓰지 않습니다

다음 단계

공개 클래스명 레퍼런스 — 클래스 138개

→

Updated about 4 hours ago

Did this page help you?