[CSS] 글 드래그 시 나오는 색상 바꾸기 '::selection'

iOS 스터디를 하는 도중 SQLite 포스팅을 봤다. 그 포스팅에서 글을 드래그하면 배경색상이랑 글자색이 다르길래, 티스토리 블로그에 적용해봤다.

< 'This SQLite' 를 드래그 했을 때 나오는 모습 >

::selection 가상 요소로 스타일을 지정해줄 수 있다.

소스 코드

/* 본문 */
.area_view p::selection { background-color: #ff7b7b; color: white; }

/* 영역 */
.area_view div::selection { background-color: #ff7b7b; color: white; }

/* 헤더 */
.area_view h1::selection,
.area_view h2::selection,
.area_view h3::selection,
.area_view h4::selection {
    background-color: #ff7b7b; color: white;
}

적용 모습

< 적용된 모습 >

배경색과 글자색을 스타일링 해줬다. 폰트를 바꾼다거나 글자 크기를 조정한다든지 마음껏 스타일링이 가능하다.