사용자 정의 CSS를 사용하여 번역 스타일을 원하는 대로 지정하세요.

원하는 방식으로 번역 스타일을 지정하세요 🎨

귀하의 번역이 귀하의 독서 분위기와 일치할 수 있기를 바랐던 적이 있습니까? 취침 시간 독서를 위한 부드러운 파스텔을 원하시나요, 아니면 공부 세션을 위한 대담한 하이라이트를 원하시나요?

이제 귀하가 제어할 수 있습니다. Read Frog의 사용자 정의 CSS 기능을 사용하면 번역이 모든 웹 사이트에 표시되는 방식을 정확하게 디자인할 수 있습니다.

맞춤 스타일이 중요한 이유 💡

기본 번역 스타일은 제대로 작동합니다... 작동하지 않을 때까지는요. 콘텐츠마다 다른 시각적 처리가 필요합니다.

새로운 CSS 편집자를 만나보세요 ⚡

우리는 단지 텍스트 상자를 추가하고 그것을 하루라고 부르지 않았습니다. Read Frog의 CSS 편집기는 합법적으로 강력합니다:

모두를 위해 만들어졌습니다

초보자의 경우:

• 🎨 색상 선택기 - 시각적 선택기를 열려면 색상 값을 클릭하세요.
• ✅ 실시간 유효성 검사 - 구문 오류에 대한 즉각적인 피드백
• 💡 스마트 제안 - 입력 시 자동 완성
• 📝 샘플 템플릿 - 작업 예제에서 시작

고급 사용자의 경우:

• ⚡ 완전한 CSS 지원 - 그라데이션, 그림자, 애니메이션, 변수 사용
• 🔧 구문 강조 - CodeMirror 기반 편집기
• 📏 줄 번호 및 접기 - 큰 스타일시트를 쉽게 탐색
• 🎯 린트 거터 - 오류를 한 눈에 확인

색상 선택기 마법 🌈

여기서 일이 재미있어집니다. CSS 색상을 작성하면 다음을 의미합니다.

❌ 구글링 "색상 선택기" ❌ 16진수 코드 복사하기 ❌ 탭 간 전환 ❌ 그것이 맞기를 바랍니다.

지금? CSS에서 원하는 색상을 클릭하세요.

1. 색상 형식(#FF5733, rgb(255, 87, 51), hsl(9, 100%, 60%))을 입력하거나 붙여넣습니다.
2. 클릭 - 색상 선택 도구가 즉시 나타납니다.
3. 시각적으로 조정 - 드래그, 슬라이드 또는 새 값 입력
4. 완료 - 실시간 색상 업데이트

선택기는 모든 CSS 색상 형식을 이해합니다.

• 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 디바운스)
• 🔴 빨간색 "구문 오류" - 유용한 오류 메시지와 함께 뭔가 잘못되었습니다.

첫 번째 맞춤 스타일을 만드는 방법 🎯

2분 미만 소요:

1. Read Frog 설정 열기 → 번역 → 번역 표시 스타일
2. **"사용자 정의 스타일 사용"**을 ON으로 전환하세요.
3. CSS 편집기가 유용한 템플릿과 함께 표시됩니다.

/* Example: Custom style with color and background */
[data-read-frog-custom-translation-style='custom'] {
  color: #414535;
  background-color: light-dark(#F2E3BC, #C19875);
  padding: 2px 4px;
  border-radius: 4px;
}

4. 사용자 정의하세요! 색상 값을 클릭하여 선택기를 열고, 패딩을 조정하고, 테두리를 추가하세요.
5. 확인이 녹색으로 표시되면 "저장"을 클릭하세요
6. 웹사이트를 방문하고 번역하세요. 귀하의 스타일이 즉시 적용됩니다!

[data-read-frog-custom-translation-style='custom'] {
  background-color: rgba(255, 247, 153, 0.3);
  border-left: 3px solid #FFD700;
  padding-left: 8px;
}

시도해 볼 수 있는 스타일 아이디어 ✌

이러한 스타일이 실제로 작동하는 모습을 확인하세요! 각 예는 CSS이 실제 번역된 텍스트에 어떤 영향을 미치는지 보여줍니다.

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

1. 소프트 파스텔 하이라이트

최적의 용도: 장시간 독서 세션, 소설, 블로그

[data-read-frog-custom-translation-style='custom'] {
  color: #414535;
  background-color: light-dark(#F2E3BC, #C19875);
  padding: 2px 4px;
  border-radius: 4px;
}

2. 대담한 학습 모드

최적의 용도: 교과서, 연구 논문, 암기

[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;
}

3. 호버 반응형 애니메이션

최적의 용도: 번역이 생생하게 느껴지는 대화형 디자인

[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);
}

4. 멋진 그라데이션 애니메이션

최적의 용도: 친구에게 자랑하기

[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;
  color: transparent;
  animation: gradient-shift 2s ease-in-out infinite;
}

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

고급 트릭 🚀

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;
}

기술 세부정보 🔧

내부 내용을 알고 싶은 분들을 위해:

최상의 결과를 위한 팁 💡

피해야 할 일반적인 함정:

❌ 하지 마세요: color: #FF(불완전한 16진수 코드) ✅ 해야 할 일: color: #FF5733 (전체 6자리 16진수)

❌ 하지 마세요: padding: 10 (누락된 장치) ✅ 해야 할 일: padding: 10px (단위 포함)

❌ 하지 마세요: CSS 200줄을 작성하세요 ✅ 해야 할 일: 필수 속성(색상, 배경, 패딩, 테두리)에 집중하세요.

다음은 무엇입니까? 🔮

우리는 이미 흥미로운 추가 사항을 계획하고 있습니다.

• 🎨 스타일 라이브러리 - 커뮤니티에서 만든 스타일을 검색하고 가져옵니다.
• 📤 내보내기/Import - 좋아하는 스타일을 친구들과 공유하세요
• 🎯 사이트별 스타일 - 웹사이트마다 다른 스타일
• 📊 스타일 미리보기 패널 - 저장하기 전에 변경사항 확인