드래그 색상 바꾸기

웹 사이트를 둘러보면 드래그 했을때 파란배경 흰색상 이 아닌 지정 색상을 이용하기도 합니다.

 

어떻게 설정할 수 있는지 알아보고 설정하는데 도움이 되도록 글을 작성합니다.

 

 

---

페이지 미리보기

---

 

 

아래 예시코드는 배경색 : 검정, 글자색  : 흰색으로 이렇게 나타납니다.

::selection {/*예시코드*/
  background-color: #000;
  color: #fff;
}

 

원하는 색상으로 조합해서 코드를 만들어 볼 수 있을것입니다.

 

꾸며진 페이지에 맞게 깔끔해 보이는 색상으로 선택하면 될것입니다.

 

예시 색상

깔끔히 배경만 하늘색으로 설정 배경 #b3d4fc

::selection {
  background-color: #b3d4fc;
}

코드는 이와 같습니다.

 

강조가 필요할 때! 배경 orange, 글자색은 검정

::selection {
  background-color: orange;
  color: #000;
}

 

여기중에 맘에 드는것도 있을수 있고 맘에 안들을수도 있을것입니다.

 

여기있는 코드만 사용할게 아닌 색상조절은 마음대로 할 수 있으므로 알아서 조절해보시면 좋을것 같습니다.

 

 

CSS에 적용한 모습

저는 이 웹 페이지에 깔끔해보이는 하늘색으로 설정해놓았습니다.

 

 

지원 브라우저

• IE9 이상

 

 

간편 설정 툴

https://hi098123.tistory.com/324

CSS 드래그 설정 툴

간편하게 클릭 몇번으로 코드를 생성할 수 있습니다.