본문 바로가기
▶ Special/○ 블로그(Blog)

마우스 드래그 텍스트 배경 색상 내맘대로 바꾸기

by 빨간꿈 2013. 10. 31.


마우스 드래그 텍스트 배경 색상 내맘대로 바꾸기



TEXT SELECTION



오늘은 아주 간단하면서도 티스토리 블로그를 충분히 느낌있게 바꿀 수 있는 팁을 공유해드릴까합니다. 바로 마우스 드래그 색상 바꾸기 인데요. 99%의 경우 블로그 또는 일반 웹페이지에서 마우스를 드래그하면 선택된 영역은 파란색의 배경이 적용됩니다. 물론, 이 파란색이라는 것은 보통 흰색 폰트와 파란색 배경이라는 조건으로 눈을 피로하지 않게 하고 텍스트도 잘 보일 수 있게 함인데, 나름 색상을 강조하거나 특별함을 강조하고자 할때 이 색상을 바꾸는 것도 나름대로의 사이트 관리의 묘미라 할 수 있겠습니다.



대부분의 블로그, 웹페이지에서 텍스트를 드래그하면 전부 아래와 같이선택영역 중 배경은 파란색, 폰트는 하얀색으로 변경됩니다.

CSS 하이라이트



하지만, 아주 간단한 CSS 스크립트 추가만으로 아래와 같이 내가 원하는 색상으로 바꿀 수 있습니다.



티스토리 블로그 본문 드래그시 배경색을 바꾸는 것은 아래와 같습니다. STYLE.CSS 제일 아래 칸에 아래의 소스를 넣어주시기만 하면 끝납니다. CSS3가 무엇인지 알 필요도 없습니다. 아래에서 빨간색 친 부분을 원하는 색상코드로 변경해주시면 됩니다. 참 쉽죠? 


# 아래 명령어 중 *:: -moz 에서  }  까지 위에 3줄은 파이어폭스용 css 코드이므로 익플과 크롬에서만 적용하시고자 한다면 삭제하셔도 무방합니다. 


*::-moz-selection {

    background-color: #2396d9; color: #f4f5f6;;

}

*::selection {

    background-color: #FE7F85; color: #f4f5f6;;


CSS3



실제 적용을 완료하였습니다. 위 소스를 그냥 style.css 젤 하단에 붙여넣기만 했으며 배경색은 제 블로그에 맞게 조금은 빨간색으로 적용해보았습니다. 나만의 멋진 블로그 꾸미시기 바랍니다!  




반응형


댓글