CSS는 웹사이트의 모양과 느낌을 사용자 지정할 수 있도록 스타일을 추가하는 코딩 언어입니다. 코드에 능숙한 팀원이 있다면 테마 편집기 의 사이드바에 있는 커스텀 스타일 섹션에서 Vimeo OTT 웹사이트에 CSS를 추가하여 Vimeo OTT 사이트의 모양과 느낌을 사용자 정의할 수 있습니다.
커스텀 CSS는 당사의 지원 범위를 벗어난다는 점을 유념하는 것이 중요합니다. 이는 설정 또는 문제 해결에 대해 더 이상 도움을 드릴 수 없으며, 귀하가 코드를 구현할 경우 전체 기능을 보장할 수 없음을 의미합니다. 이것은 웹사이트 테마와의 작동 방식, 특히 모바일 기기에서의 표시 방식을 포함합니다. 향후 우리 플랫폼의 업데이트로 인해 CSS가 영향을 받을 경우, CSS를 유지 관리하는 것은 귀하의 책임입니다.
Enterprise 고객을 위한 지원 옵션에 대한 질문이 있으시면 당사 영업팀에 문의하십시오. 이미 Enterprise 고객이신 경우 계정 관리자에게 연락하십시오.
이 도움말에 포함된 내용:
CSS는 어떻게 사용해야 하나요?
CSS를 처음 접하셨지만, OTT 사이트를 시각적으로 사용자 지정하기 위해 CSS를 사용하고자 하신다면, 학습에 도움이 될 몇 가지 유용한 자료를 준비해 두었습니다.
CSS 선택자는 귀하의 CSS 규칙이 적용되는 요소를 정의합니다. Vimeo OTT 사이트를 사용자 정의하려면 CSS 선택기를 식별해야 합니다.
CSS에서 사용 가능한 선택기의 전체 목록을 보시려면 이 W3School 리소스를확인하십시오.
Vimeo OTT 웹사이트에 CSS를 적용하려면 로그인한 후, 설정 메뉴에서 "Site"를 선택하여 테마 편집기로 이동하십시오. 그곳에 도착하면, 왼쪽 사이드바에서 "테마"를 클릭한 후 "테마 선택"을 클릭하고 "테마 편집"을 클릭하십시오.
편집 모드에 들어가면 왼쪽 사이드바의 커스텀 스타일 섹션으로 스크롤하여 CSS를 추가하십시오. 작업을 저장하는 것을 잊지 마세요.
⚠️참고: 웹사이트 테마를 새 템플릿으로 변경하시면 CSS가 저장되지 않습니다.
Vimeo OTT에서 요소를 식별하고 특정 CSS를 적용하는 방법을 보려면 이 동영상을 시청하십시오:
일반적인 사용자 정의
각 규칙의 선택기를 귀하의 사이트의 선택기로 교체해야 함을 유의하십시오.
크기 조정 버튼
요소의 크기를 조정하려면 "width" 규칙을 사용해 보십시오.
예고편 버튼 크기 업데이트하기:
이것이 CSS입니다:
.secondary-actions a.btn-transparent {
너비: 150%;
}
폰트 크기 조정
글꼴 크기를 조정하려면 글꼴별 "font-size" 규칙을 사용하십시오. font-size 규칙은 다양한 단위를 허용합니다. 각각의 목적에 대해 여기에서 읽을 수 있습니다.
제목의 글꼴 크기를 늘리기:
이것이 CSS입니다:
h1.gigantic.uppercase {
폰트 크기: 5em;
}
요소에 색상을 추가하기
요소에 색상을 추가하려면 "색상" 규칙을 사용하십시오. 값에 대해 몇 가지 다른 형식을 사용할 수 있으며, 이에 대한 자세한 내용은 여기에서 읽을 수 있습니다.
‘시청 시작’ 버튼의 텍스트를 파란색으로 변경하기:
이것이 CSS입니다:
.primary-actions a.btn-brandon {
color: blue;
}
배경색 추가
배경색을 추가하려면 "background-color" 규칙을 사용하십시오.
버튼의 배경색을 빨간색으로 만듭니다:
이것이 CSS입니다:
.primary-actions a.btn-brandon {
color: blue;
}
요소 숨기기
기본적으로 추가된 항목을 숨기려면 '디스플레이' 규칙을 사용하십시오.
히어로 버튼 두 개를 모두 제거합니다:
이것이 CSS입니다:
.row-actions {
display: none;
}
커스텀 폰트
귀하는 테마 편집기 에서 커스텀 폰트 목록(가장 인기 있는 Google 폰트 100개 포함) 중에서 사이트 전체에 적용할 폰트를 선택할 수 있습니다. 사용하고자 하는 폰트가 목록에 없는 경우, Google Fonts에서 사용 가능한 다른 폰트를 선택하는 것이 좋습니다. 먼저 폰트와 스타일을 선택하면 Google에서 사이트에 추가하는 방법에 대한 지침을 제공합니다. import 를 클릭하여 페이지에 폰트 스타일을 추가하기 위한 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
}