fix(cafe24): 블록 선택 시 글자가 안 보이던 문제 — 선택 배경 반투명

편집기는 투명한 textarea 를 색칠된 <pre> 위에 겹쳐 놓은 구조다. textarea 의 글자는
투명이고 실제 글자는 아래 <pre> 가 그린다. 선택 배경은 위층인 textarea 가 칠하므로
불투명(#b3d4fc)이면 아래 글자를 완전히 덮는다 — 드래그로 블록을 잡으면 파란 칸만
남고 글자가 사라졌다.

::selection 배경을 rgba(51,122,226,0.28) 로 바꿔 색칠된 글자가 비쳐 보이게 했다.
Firefox 용 ::-moz-selection 도 함께 넣었다.

검증: 브라우저에서 규칙 적용 확인(rgba 0.28), 선택 상태에서도 색칠 층이 글자를 그대로
그리고 있음 확인. 유닛테스트 51개 통과.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-14 15:53:01 +09:00
parent 8e3e2d1f76
commit b2a70ad0ab
5 changed files with 13 additions and 6 deletions
+9 -2
View File
@@ -370,9 +370,16 @@
border-color: var(--color-rich-black, #0a0a0a);
}
/* 선택 영역이 보이게 (글자는 투명이므로 배경만 남는다) */
/* 선택 영역은 **반투명**이어야 한다.
textarea 의 글자는 투명이고 실제 글자는 아래 <pre> 가 그린다. 선택 배경은
textarea(위층)가 칠하므로 불투명하면 아래 글자를 덮어 "선택하면 글자가 사라지는"
현상이 생긴다. 알파를 줘서 색칠된 글자가 비쳐 보이게 한다. */
.cf24-code-input::selection {
background: #b3d4fc;
background: rgba(51, 122, 226, 0.28);
}
.cf24-code-input::-moz-selection {
background: rgba(51, 122, 226, 0.28);
}
/* 토큰 색 — GitHub 라이트 계열 */