텍스트를 드래그했을 때의 색상을 커스텀 해보자

 

 

안녕하세요 :) 무택입니다🧔

오늘 알아볼 기능은 바로 '::selection' 입니다. 딱 봤을 때는 뭔지 잘 모를 수 있는데 어느 사이트에서 텍스트를 복사해오고 싶을때 텍스트에 드래그를 해본 경험은 누구나 한번쯤 있을 것 같습니다. 바로 드래그했을 때 색상을 설정할 수 있는 기능입니다. 텍스트를 드래그하면 색상을 지정해야 할 곳은 두 곳이 있습니다. 한 가지는 드래그한 텍스트의 컬러, 다른 한 가지는 텍스트의 배경 컬러. 오늘 알아볼 기능은 이 두 가지를 설정할 수 있는 CSS 기능입니다.

처음에 저는 이 기능을 보고 복잡한 코드일줄 알았는데 1초, 아니 0.5초면 알만한 코드여서 놀랄 정도로 간단한 코드이니 한번 훑어보시면 좋을 것 같습니다.

 

# CSS코드

::selection{
  background: #3333ff;
  color: white;
}

바로 위 코드처럼 '::selection' 태그를 사용하면 됩니다. 문서 전체에 효과를 주고 싶으면 위처럼 만들면 되고 만약에 어떤 div 내에서만 적용하고 싶다 하면 아래처럼 코드를 작성하면 됩니다.

div::selection{
  background: #3333ff;
  color: white;
}

 

# codepen 예제

See the Pen [CSS]::selection by TytanLee (@TytanLee) on CodePen.

 

제가 생각했을때 이 태그가 좋은 점은 두가지인 것 같습니다.

1. 웹 환경에 대해 잘 모르는 사람이 봤을 때 퀄리티 있어 보인다.

2. 자사 브랜드 컬러를 사용하면 브랜딩을 잘할 수 있다.

 

하지만 잘못 사용하게 되면 오히려 난잡한 느낌을 줄 수 있어서 적재적소에 사용하는 게 좋을 것 같습니다🤗

어떤 식으로 사용되는지 예시 링크도 첨부해 드리니 살펴보고 가시면 이해하는데 도움이 될 것 같습니다.

1.https://studio-jt.co.kr/projects/men-noblesse/

맨노블레스 - 웹진 - 워드프레스 제작 사례 | 스튜디오 제이티

2. http://b-lot.co.kr/works/refresh/

비롯 - 온오프라인 통합 마케팅 & 디지털 에이전시