목차

자막 스타일

프리셋이나 직접 쓴 CSS로 번역 자막을 꾸밉니다. 예를 들어 마우스를 올릴 때까지 번역을 흐리게 할 수 있습니다.

설정에서 비디오 자막 → 자막 스타일을 엽니다. 바꾸는 대로 미리보기가 업데이트됩니다.

기본 설정

  • 표시 모드: 이중 언어, 원문만, 번역만.
  • 번역 위치: 원문 위 또는 아래.
  • 메인 자막과 번역 자막: 줄마다 글꼴, 글자 배율, 색, 굵기.
  • 배경 투명도: 자막 뒤 상자가 얼마나 어두운지.

기본값으로 재설정으로 모두 되돌립니다.

프리셋 템플릿

사용자 지정 CSS → 프리셋 템플릿에서:

템플릿 하는 일
번역문 흐리게 마우스를 올릴 때까지 번역을 흐리게 해서 먼저 귀로 듣게 함
번역문 점선 번역에 점선 밑줄
원문 연하게 원문 줄을 연하게 해서 번역을 돋보이게 함

직접 쓰는 CSS

직접 쓴 CSS는 위 설정 위에 적용됩니다. 쓸 수 있는 선택자는 다음과 같습니다.

선택자 대상
.read-frog-subtitles-box 두 줄을 담은 상자
.subtitles-main 원문 줄
.subtitles-translation 번역 줄

번역을 흐리게 하고 마우스를 올리면 보이기:

.subtitles-translation {
  filter: blur(6px);
}

.subtitles-translation:hover {
  filter: none;
}

상자 대신 그림자를 넣은 노란 번역:

.read-frog-subtitles-box {
  background: transparent;
}

.subtitles-translation {
  color: #ffd84d;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.9);
}

편집기는 입력하는 동안 CSS를 검사합니다. 저장을 클릭하면 적용됩니다.