::selection 색상을 부분부분 다르게 할 수 있을까?

일단 ::selection이 뭐냐면

 

이거다. 이게 뭐냐고? 마우스로 긁었을 때의 색깔을 ::selection을 통해 줄 수 있다. 기본은 파란 배경에 흰색 글씨인데, 가끔 코딩 좀 하시는 분들 블로그 가 보면 텍스트를 마우스로 긁었을 때 배경색이 다른 것을 볼 수 있다.

 

티스토리 블로그(여기)

이것도 보면 위랑 색깔이 다르죠? 

 

괴담수사대

괴담수사대는 일부러 빨간색+어두운색 기반으로 색깔을 정해서 ::selection 배경이 빨간색이다. 이런 효과를 줄 때 배경색은 걍 CSS 백그라운드 주면 되고 글자색은 color 주면 된다.

 

::selection {
    background-color: #cc0000;
    color: #ffffff;
}

이렇게 말이지. CSS는 저렇게 ::붙어있는 게 있는데 다른건 나중에 또 알아봅시다.

 

참고로 괴담수사대에 적용된 ::selection은 배경색이 #ff0000이 아닌데, #ff0000으로 하면 블록 긁다가 여러분들 눈뽕 옵니다.

---

어제 꼭두새벽에 뜬금없이 생각난 게 하나 있는데, 바로 ::selection을 글의 특정 비율(50% 이런 식으로 기준을 정해서)을 정해서 색을 나눌수 있을까였다. 그러니까 그 아수라백작처럼 말이다.

 

일단 결론부터 말하자면 특정 부분'부터' 블록을 씌웠을 때 색을 다르게 하는건 자바스크립트를 이용한 동적제어를 통해 가능하지만, 아예 블록을 씌웠을때 반반무마니가 되게 하는 건 자바스크립트로도 불가능하다. 아니, 사실 가능은 한데 약간 O(n)이 n!일때마냥 존내 비효율적이라 걍 CSS단에서 클래스 주는 게 낫단다. 이거 채찍피티한테 물어봄.

 

See the Pen 반반 selection by koreanraichu (@koreanraichu) on CodePen.

일단 모바일로 씌웠을때는 안보이고 PC에서 마우스로 긁어야 되긴 한데, 문단에 따라 마우스로 긁었을 때 색깔이 다르게 적용된 것을 볼 수 있다. 클래스를 다르게 주고 CSS단에서 색깔만 다르게 준 것이다. 이를 응용하면 특정 문장이나 문단을 블록 씌운 상태에서도 강조할 수 있다. 굳이 이렇게까지 할 필요가 있을지는 모르겠지만.