4️⃣ DEV TIP/Bubble.io

🎨 Rich Text Input의 Callout에 호버 효과 적용하기

IFINITY 2025. 1. 23. 05:53

🚀 Bubble.io Rich-Text-Input TIP #2: 코드 블록(Callout)에 호버 효과 추가

🎨 Rich Text Input의 Callout에 호버 효과 적용하기

안녕하세요! IF-DEV입니다.
오늘은 **Bubble.io의 Rich Text Input에서 코드 블록(Callout)**에 **호버 효과(Hover Effect)**를 추가하는 방법을 알려드릴게요.

이 간단한 팁을 적용하면 UI/UX를 한층 더 세련되게 업그레이드할 수 있습니다.
✅ 코드 블록을 강조하고 싶을 때
✅ 코드 복사 기능을 추가할 때
✅ 사용자 경험을 개선할 때
아주 유용합니다!

🧐 호버 효과(Hover Effect)란?

호버 효과는 사용자가 마우스를 특정 요소 위로 가져갔을 때 시각적인 변화가 일어나는 효과입니다.
인터페이스가 직관적이고 반응성이 좋아 보이도록 만들어주는 작은 디테일이죠!

예시:
🚀 마우스를 코드 블록에 올리면:

  • 배경색 변경
  • 테두리 강조
  • 그림자 효과 추가

이제 실제 적용할 CSS 코드를 살펴볼까요?

💡 CSS 코드 적용하기 (Callout Hover 효과)

아래 CSS를 Bubble.io의 HTML 요소에 추가하면 코드 블록(Callout)에 호버 효과를 적용할 수 있습니다.

<html>
<body>
<style>
/* Callout 호버 효과 */
#richtexteditor .ql-editor pre.ql-syntax:hover {
    background: #f0f3ff !important; /* 배경색 변경 */
    border-color: rgba(136, 153, 255, 0.25) !important; /* 테두리 색상 변경 */
    box-shadow: 0 3px 6px rgba(136, 153, 255, 0.15) !important; /* 그림자 추가 */
    transition: all 250ms ease-in-out !important; /* 부드러운 전환 효과 */
}
</style>
</body>
</html>

📌 코드 속성 설명

이 코드가 어떤 효과를 주는지 하나씩 알아볼까요?

✅ 1️⃣ background: #f0f3ff;

  • 마우스를 올리면 배경색이 밝은 파란색(#f0f3ff)으로 변경됩니다.
  • 사용자가 해당 블록이 활성화되었음을 직관적으로 인식할 수 있습니다.

✅ 2️⃣ border-color: rgba(136, 153, 255, 0.25);

  • 테두리 색상을 은은한 반투명 파란색으로 변경하여 세련된 느낌을 줍니다.

✅ 3️⃣ box-shadow: 0 3px 6px rgba(136, 153, 255, 0.15);

  • 그림자를 추가하여 요소가 살짝 떠 있는 듯한 입체적인 효과를 줍니다.
  • 사용자가 클릭 가능성을 직관적으로 이해할 수 있도록 돕습니다.

✅ 4️⃣ transition: all 250ms ease-in-out;

  • 색상과 그림자 변화가 부드럽게 전환되도록 설정합니다.
  • 자연스러운 애니메이션 효과로 UI가 더욱 깔끔해집니다.

🛠️ 적용 방법

아래 3단계만 따라 하면 바로 적용할 수 있습니다!

1️⃣ Bubble.io에서 HTML 요소 추가하기

  • Rich Text Input이 포함된 페이지에 HTML 요소를 추가하세요.
  • 위에 제공한 CSS 코드를 복사 & 붙여넣기 하세요.

2️⃣ Element ID 설정하기

  • Rich Text Input의 Element ID를 richtexteditor로 설정하세요.
  • 이렇게 해야 CSS가 올바르게 적용됩니다!

3️⃣ 적용 확인하기

  • 이제 Bubble.io 에디터에서 **미리보기(Preview)**를 실행해 보세요!
  • 마우스를 코드 블록 위로 가져가면 배경색, 테두리, 그림자 효과가 적용될 겁니다.

🎯 왜 이 기능을 적용해야 할까요?

✔ 사용자 경험(UX)이 한 단계 업그레이드됩니다.
✔ 코드 블록이 강조되어 가독성이 좋아집니다.
✔ 기술 블로그, 튜토리얼, 개발 관련 Bubble.io 앱에서 필수적인 기능입니다.
✔ 작은 디테일 하나가 서비스의 완성도를 높여줍니다!

 

이피니티 - if to infinite
프로젝트의 시작부터 유지, 확장까지 함께하는 외주 개발 파트너

노코드 Bubble.io 전문 에이전시
📱 앱 · 🌐 웹 · 🛠️ 소프트웨어 · 🔌 플러그인 개발

편하게 문의 주세요!
이메일 문의: support@if-inity.io
사이트: if-inity.io 
카카오톡 문의: 톡으로 문의하기