자막 스타일
프리셋이나 직접 쓴 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를 검사합니다. 저장을 클릭하면 적용됩니다.