주 콘텐츠로 건너뛰기

Vimeo OTT 사용자 정의

이 자료는 AI를 사용하여 번역되었으므로 부정확하거나 제품 인터페이스가 그대로 반영되지 않았을 수 있습니다. 문제가 계속되면 고객 지원팀에 문의하세요.

CSS는 웹사이트의 모양과 디자인을 사용자 지정할 수 있도록 스타일을 추가하는 코딩 언어입니다. 코드에 능숙한 팀원이 있다면 테마 편집기의 사이드바에 있는 커스텀 스타일 섹션에서 Vimeo OTT 웹사이트에 CSS를 추가하여 Vimeo OTT 사이트의 모양과 디자인을 커스텀할 수 있습니다.  

사용자 지정 CSS는 Vimeo 지원 범위를 벗어난다는 점에 유의하시기 바랍니다. 즉, 설정 또는 문제 해결에 있어 Vimeo가 더 이상의 도움을 드릴 수 없으며, 코드를 구현하는 경우 완전한 기능을 보장할 수 없습니다. 여기에는 Vimeo의 웹 사이트 테마와 함께 작동하는 방식, 특히 모바일 기기에서 나타나는 방식이 포함됩니다. CSS가 향후 Vimeo 플랫폼 업데이트로 영향을 받을 경우 CSS를 유지 관리하는 것은 판매자의 책임입니다. 

Enterprise 고객을 위한 지원 옵션에 대한 질문이 있으시면 당사 영업팀에 문의하세요. 이미 Enterprise 고객이신 경우 계정 관리자에게 연락하시기 바랍니다.

이 도움말에 포함된 내용:

CSS는 어떻게 사용해야 하나요?

CSS를 처음 사용하지만 CSS를 사용하여 OTT 사이트를 시각적으로 커스텀하고 싶다면 몇 가지 유용한 리소스를 살펴볼 수 있습니다.

CSS 선택자는 CSS 규칙이 적용되는 요소를 정의합니다. Vimeo OTT 사이트를 커스텀하려면 CSS 선택기를 식별해야 합니다. 

CSS에서 사용 가능한 선택기의 전체 목록을 보려면 이 W3School 리소스를 참조하세요.

Vimeo OTT 웹사이트에 CSS를 적용하려면 로그인한 후, 설정 메뉴에서 '사이트'를 선택하여 테마 편집기로 이동합니다. 그런 다음 왼쪽 사이드바에서 '테마'를 클릭하고, 이어서 '테마 선택' - '테마 편집'을 클릭합니다.

편집 모드에 들어가면 왼쪽 사이드바의 커스텀 스타일 섹션으로 스크롤하여 CSS를 추가합니다. 작업을 반드시 저장하세요. 

⚠️참고: 웹사이트 테마를 새 템플릿으로 변경하면 CSS가 저장되지 않습니다.

Vimeo OTT에서 요소를 식별하고 특정 CSS를 적용하는 방법을 보려면 이 동영상을 시청하세요.

 

일반적인 사용자 정의

이러한 각 규칙의 선택기를 사이트의 선택기로 교체해야 합니다.

크기 조정 버튼

요소의 크기를 조정하려면 '너비' 규칙을 사용하세요.

예고편 버튼 크기 업데이트:

basic.png

trailerbuttonsize.png

CSS는 다음과 같습니다.

.secondary-actions a.btn-transparent {
  width: 150%;
}

폰트 크기 조정

폰트별 '글꼴 크기' 규칙을 사용해 폰트 크기를 조정합니다. 폰트 크기 규칙은 다양한 단위를 허용합니다. 각각의 목적은 여기에서 확인할 수 있습니다.

제목의 폰트 크기 늘리기:

basic__1_.png

increasetitle.png

CSS는 다음과 같습니다.

h1.gigantic.uppercase {
  font-size: 5em;
}

요소에 색상 추가하기

요소에 색상을 추가하려면 '색상; 규칙을 사용합니다. 값에 대해 몇 가지 다른 형식을 사용할 수 있으며, 이에 대해서는 여기에서 알아볼 수 있습니다.

‘시청 시작’ 버튼의 텍스트를 파란색으로 변경:

basic__2_.png

bluebuttontext.png

CSS는 다음과 같습니다.

.primary-actions a.btn-brandon {
  color: blue;
}


배경색 추가

배경색을 추가하려면 '배경색' 규칙을 사용합니다.

버튼의 배경색을 빨간색으로 변경:

basic__3_.png

redbutton.png

 

CSS는 다음과 같습니다.

.primary-actions a.btn-brandon {
  color: blue;
}

요소 숨기기

기본적으로 추가된 항목을 숨기려면 '디스플레이' 규칙을 사용합니다.

히어로 버튼 두 개를 모두 제거:

basic__4_.png

removebuttons.png

CSS는 다음과 같습니다.

.row-actions {
  display: none;
}


커스텀 폰트

테마 편집기의 커스텀 폰트 목록(가장 인기 있는 Google 폰트 100개 포함)에서 사이트 전체에 적용할 폰트를 선택할 수 있습니다. 사용하려는 폰트가 목록에 없는 경우 Google 폰트에서 사용 가능한 다른 폰트를 선택하는 것이 좋습니다. 먼저 폰트와 스타일을 선택하면 Google에서 사이트에 추가하는 방법에 대한 지침을 제공합니다. 폰트와 스타일을 페이지에 추가하기 위한 CSS 규칙을 확인하려면 가져오기를 클릭합니다. 다음에서 예시를 확인하세요.

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

가져온 후, CSS 규칙을 추가하여 페이지 폰트에 추가합니다. 다음에서 예시를 확인하세요.

h1,h2,h3,h4,h5,h6,p,span,div,a,strong, .site-font-primary-color {
 font-family: 'Roboto', sans-serif !important;
}
⚠️주의: 범용 선택자(*) 사용은 피해야 합니다. 최상의 결과를 얻으려면 각 선택자를 나열하는 것이 좋습니다. 

페이지별 스타일

OTT 사이트 페이지는 동일한 기본 템플릿을 사용하지만, 특정 페이지 유형에 대한 스타일을 추가할 수도 있습니다. 예를 들어, 선택기에 상위 선택자를 추가하여 규칙을 컬렉션 페이지에만 한정할 수 있습니다. 

OTT 페이지에서 <body> 요소에는 해당 페이지에 특정한 클래스가 있습니다. 컬렉션 페이지는 '.collections'입니다. 특정 컬렉션 페이지로 제한하기 위해 규칙을 작성할 때 선택자 앞에 'body.collections'을 추가합니다. 다음은 예시입니다:

body.collections .custom-btn-action-share {
  display: none;
}

다양한 브라우저 크기에 따른 커스텀

코드를 구현하는 경우 브라우저 측에서 전체 기능을 보장할 수 없습니다. 그러나 여러 브라우저에서 스타일을 조정하는 방법에 대한 제안은 제공할 수 있습니다. CSS 규칙을 미디어 쿼리에 래핑할 수 있습니다. 다음은 그 예입니다.

@media only screen and (max-width: 640px) {
  .hero-short-desc {
    display: none;
  }
}

변경할 수 없는 항목

CSS는 훌륭한 스타일링 도구이지만 모든 구성 요소를 수정할 수 있는 것은 아닙니다. 결제 페이지 및 동영상 플레이어와 같은 웹사이트의 일부 구성 요소는 CSS로 스타일을 지정할 수 없습니다.

범용 선택자 사용 피하기

범용 선택자는 사이트 전반에 걸쳐 사용되는 특정 양식 및 페이지에 문제를 일으킬 수 있습니다. * 기호로 표시됩니다. 사용하고자 하는 각 선택자를 나열하는 것이 좋습니다.
다음 예는 피하세요.
* {
  key: value
}
대신 다음을 사용하세요.
h1,h2,h3 {
  key: value
}
 

관련 문서