[HTML/CSS] :: selection 글자 선택 했을 때 효과 주기

[HTML/CSS] :: selection 글자 선택 했을 때 효과 주기

1. :: selection

:: selection은 텍스트 클릭이나 드래그 처럼 사용자가 하이라이팅을 할때 스타일을 적용하는 CSS 의사요소이다.

관련 이전글
[CSS] 의사 요소 pseudo-element

코드

<style>
p::selection {
    color: red;
    background-color: yellow;
}
</style>
<p>이 문장을 드래그 해보시면 빨간 글자에 노란 바탕이 보입니다.</p>

결과

이 문장을 드래그 해보시면 빨간 글자에 노란 바탕이 보입니다.

2. 허용된 properties

• color
• background-color
• text-decoration와 이것과 연관된 properties
• text-shadow
• stroke-color, fill-color and stroke-width

* 근데 난 text-decoration에서 underline 적용해보니까 안보였음

3. 또 다른 예시

코드

<style>
  .deco{
    color:palevioletred;
    font-weight: bold;
    font-style: italic;
  }
  .deco::selection{
    color: rgb(238, 253, 255);
    text-shadow: 1px 1px 2px deepskyblue, 0 0 .5em palevioletred, 0 0 0.2em palevioletred;
  }
</style>

<div class="deco">이 문장을 드래그 해보세요</div>

결과

이 문장을 드래그 해보세요

👆👆👆 요런 식으로도 적용이 가능하다

참고

• mdn web docs - ::selection