사용자 정의 번역 스타일

번역 모양을 개인화하기 위해 사용자 정의 CSS을 구성하십시오.

개요

Read Frog을 사용하면 자신만의 CSS 스타일을 사용하여 웹페이지에 번역이 표시되는 방식을 맞춤설정할 수 있습니다. 이를 통해 색상, 배경, 테두리, 애니메이션 등을 완벽하게 제어할 수 있습니다.

모든 번역에 전체적으로 스타일을 적용하거나 특정 언어 및 텍스트 방향을 대상으로 지정할 수 있습니다. 예를 들어 중국어, 일본어, 한국어 번역에 서로 다른 글꼴을 사용하거나 아랍어, 히브리어와 같이 오른쪽에서 왼쪽으로 쓰는 언어의 레이아웃을 조정할 수 있습니다.

사용자 정의 CSS 활성화

Read Frog 설정 열기
번역 → 번역 표시 스타일로 이동합니다.
**"사용자 정의 스타일 사용"**을 ON으로 전환하세요.
CSS 편집기가 기본 템플릿과 함께 나타납니다.

CSS 선택자

기본 선택기

모든 사용자 정의 스타일은 특정 선택기를 대상으로 해야 합니다.

[data-read-frog-custom-translation-style='custom'] {
  /* Your styles here */
}

이 선택기는 페이지의 모든 번역된 텍스트 요소에 적용됩니다.

래퍼 선택기

번역된 콘텐츠는 언어 및 방향 속성이 포함된 컨테이너에 래핑됩니다.

<span class="read-frog-translated-content-wrapper" lang="zh" dir="ltr">
  <span data-read-frog-custom-translation-style="custom">神谷先生...</span>
</span>

특정 언어나 방향을 타겟팅할 수 있습니다.

/* Target Chinese translations */
.read-frog-translated-content-wrapper[lang='zh'] [data-read-frog-custom-translation-style='custom'] {
  /* Styles for Chinese */
}

/* Target RTL languages */
.read-frog-translated-content-wrapper[dir='rtl'] [data-read-frog-custom-translation-style='custom'] {
  /* Styles for right-to-left text */
}

편집기 기능

구문 강조

편집기는 CodeMirror 6을 사용하여 다음을 제공합니다.

색상으로 구분된 CSS 구문
줄 번호
대형 스타일시트의 코드 접기
자동 들여쓰기

색상 선택기

대화형 색상 선택기를 열려면 편집기에서 색상 값을 클릭하세요.

#FF5733, rgb(255, 87, 51) 또는 hsl(9, 100%, 60%)와 같은 색상 값을 클릭합니다.
시각적 선택 도구가 즉시 나타납니다.
슬라이더 또는 입력 필드를 사용하여 조정
변경사항은 실시간으로 업데이트됩니다.

지원되는 색상 형식:

16진수: #FF5733
RGB/RGBA: rgba(255, 87, 51, 0.8)
HSL/HSLA: hsla(9, 100%, 60%, 0.8)
명명된 색상: tomato, skyblue, gold
CSS 변수: var(--my-color)

실시간 검증

편집자는 저장하기 전에 CSS의 유효성을 검사합니다.

유효함(녹색): CSS은 구문상 정확하며 저장할 준비가 되었습니다.
검증 중(회색): 변경 사항 확인 중(500ms 디바운스)
오류(빨간색): 오류 메시지와 함께 구문 오류가 감지되었습니다.

유효성 검사:

구문 오류(오타, 괄호 누락)
속성 이름 유효성
선택기 정확성
크기 제한(최대 8KB)

기본 CSS 예

'@/components/css-style-preview'에서 가져오기

단순 글꼴 색상

[data-read-frog-custom-translation-style='custom'] {
  color: blue;
}

테두리 포함

[data-read-frog-custom-translation-style='custom'] {
  color: #414535;
  background-color: #F2E3BC;
  padding: 2px 4px;
  border-radius: 4px;
  border-left: 3px solid #FFD700;
}

대담한 학습 모드

[data-read-frog-custom-translation-style='custom'] {
  background-color: #FFF59D;
  color: #000;
  font-weight: 600;
  border: 2px solid #FFD54F;
  padding: 6px 10px;
  border-radius: 4px;
}

고급 기술

사용자 정의 글꼴

모든 번역의 글꼴을 변경합니다.

[data-read-frog-custom-translation-style='custom'] {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 16px;
  color: #2c3e50;
}

언어별 스타일 지정

래퍼의 lang 속성을 사용하여 특정 언어로 번역을 타겟팅합니다.

/* Chinese translations with traditional serif font */
.read-frog-translated-content-wrapper[lang='zh'] [data-read-frog-custom-translation-style='custom'] {
  font-family: "Kaiti SC", "STKaiti", "KaiTi", "华文楷体", serif;
  color: #8B4513;
}

/* Japanese translations */
.read-frog-translated-content-wrapper[lang='ja'] [data-read-frog-custom-translation-style='custom'] {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
}

/* Korean translations */
.read-frog-translated-content-wrapper[lang='ko'] [data-read-frog-custom-translation-style='custom'] {
  font-family: "Nanum Myeongjo", "Batang", serif;
}

방향별 스타일링

텍스트 방향에 따른 스타일 번역(아랍어, 히브리어와 같은 RTL 언어에 유용함):

/* Right-to-left languages */
.read-frog-translated-content-wrapper[dir='rtl'] [data-read-frog-custom-translation-style='custom'] {
  border-right: 3px solid #9C27B0;
  border-left: none;
  padding-right: 10px;
  font-family: "Traditional Arabic", "Arial", sans-serif;
  font-size: 15px;
}

/* Left-to-right languages */
.read-frog-translated-content-wrapper[dir='ltr'] [data-read-frog-custom-translation-style='custom'] {
  border-left: 3px solid #2196F3;
  padding-left: 10px;
}

CSS 변수

재사용 가능한 값을 정의합니다.

[data-read-frog-custom-translation-style='custom'] {
  --highlight-color: #FFE082;
  --border-color: #FFA726;

  background-color: var(--highlight-color);
  border-left: 4px solid var(--border-color);
  padding: 4px 10px;
}

Light/Dark 모드 지원

자동 테마 적용을 위해 light-dark() 기능을 사용하세요:

[data-read-frog-custom-translation-style='custom'] {
  background-color: light-dark(#FFF9C4, #4A4A2A);
  color: light-dark(#333, #E0E0E0);
  border: 1px solid light-dark(#FFD54F, #8D7B3A);
  padding: 5px 10px;
  border-radius: 4px;
}

호버 효과

[data-read-frog-custom-translation-style='custom'] {
  color: #0277BD;
  transition: color 0.2s ease-out, transform 0.2s ease-out;
}
[data-read-frog-custom-translation-style='custom']:hover {
  color: #01579B;
  transform: translateX(2px);
}

애니메이션

[data-read-frog-custom-translation-style="custom"] {
  background: linear-gradient(90deg, #1fe5e1 0%, #a855f7 50%, #0ad6ff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 2s ease-in-out infinite;
}

@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

모범 사례

해야 할 일 ✅

단순한 스타일로 시작하여 점진적으로 복잡성을 추가하세요.
여러 웹사이트에서 테스트
가독성을 유지하려면 불투명도가 낮은 배경을 사용하세요.
길이 값의 단위 포함: padding: 10이 아닌 padding: 10px
완전한 16진수 코드를 사용하세요: #FF이 아닌 #FF5733

하지 말아야 할 일 ❌

!important을 피하세요(선택기 특이도가 이미 높음).
지나치게 복잡한 스타일을 작성하지 마세요(필수 속성에 집중)
8KB 크기 제한을 초과하지 마세요.
누락된 단위나 불완전한 색상 코드를 방지하세요.

공통 속성

재산	목적	예
`color`	텍스트 색상	`color: #333;`
`background-color`	배경색	`background-color: #FFF59D;`
`padding`	내부 간격	`padding: 4px 8px;`
`border`	테두리 스타일	`border: 1px solid #FFD54F;`
`border-radius`	둥근 모서리	`border-radius: 4px;`
`font-weight`	텍스트의 굵기	`font-weight: 600;`
`font-size`	텍스트 크기	`font-size: 14px;`
`text-decoration`	밑줄 등	`text-decoration: underline;`
`opacity`	투명성	`opacity: 0.8;`
`transition`	애니메이션 타이밍	`transition: color 0.2s ease-out;`

기술적 한계

최대 크기: 8KB(8,192자)
편집자: CodeMirror 6
검증: CSS 트리 파서
선택기: [data-read-frog-custom-translation-style='custom']을 사용해야 합니다.
래퍼 클래스: 번역은 lang 및 dir 속성을 사용하여 .read-frog-translated-content-wrapper에 래핑됩니다.
사용 가능한 속성: lang(ISO 639-1 언어 코드) 및 dir(ltr/rtl))