티스토리 꾸미기 팁 - 텍스트 블록(드래그) 색상 변경하기

우리가 웹 서핑을 하면서 텍스트 블록 설정(마우스 드래그)을 하면 대부분의 웹 페이지는

파란색 바탕에 흰 텍스트로 변하는데,일부 웹 페이지나 티스토리 블로그에서 독특한 색상으로

드래그되는 것을 보셨을 겁니다.

                                                            변경 전

                                                             변경 후

이렇듯 티스토리 블로그는 간단한 소스 코드 삽입으로 자신만의 독특한 블록 설정 색상으로 바꿀 수 있는데요.

그 팁을 알아 봅니다.먼저 색상 코드표가 필요할 겁니다.

색상 코드를 알기 위한 쉬운 방법은 네이버 홈 걱색창에 rgb 입력하시고 색상표를 불러 와 마음에 드는 색상을 

선택하면 코드 번호가 자동 추출되니 참고하시고..아래 링크를 누르면 네이버 색상표로 바로 가실 수 있습니다.

네이버 RGB 색상표

선택한 색상 코드를 가지고 블로그 관리자 모드 -> HTML/CSS 편집 -> style.css 부분 맨 하단에 

아래의 소스 코드를 삽입하고 저장하면 바로 적용됩니다.

예제 소스 코드

/!-- 드래그 색상 start--/

::-moz-selection{

          background: #ff00dd;

          color: #fff;

          text-shadow: 1px 1px 1px rgba(0,0,0,0.5);

}

::selection{

          background: #ff00dd;

          color: #fff;

          text-shadow: 1px 1px 1px rgba(0,0,0,0.5);

}

/!-- 드래그 색상 end--/

설명

/!-- 드래그 색상 start--/

::-moz-selection{

          background: 드래그 배경 색상 코드;

          color: 텍스트(글자)색;

          text-shadow: 텍스트 그림자 옵션;

}

::selection{

          background: 드래그 배경 색상 코드;

          color: 텍스트(글자)색;

          text-shadow: 텍스트 그림자 옵션;

}

/!-- 드래그 색상 end--/

                                               

                                                            블록 설정 소스 코드.txt

예제 소스 코드에서 붉은색은 파이어 폭스에서도 적용되는 코드이고,녹색은 크롬과 익스플로러에서만 적용되는

소스 코드입니다.

저는 위 코드를 모두 적용했는데요. 익스플로러와 크롬에만 적용하고 그림자 효과도 없애려면,소스 코드는...

::selection{

          background: 드래그 배경 색상 코드;

          color: 텍스트(글자)색;

}

이렇게 됩니다.

이상 내 블로그에 드래그 색상 변경하는 간단한 팁을 알아 보았습니다.

자신만의 독특한 블로그 꾸미시길 바라며...

방문해 주셔서 감사합니다.