블로그글 드래그시 선택영역 색상 변경하는 방법

블로그를 사용하다보면 글을 긁어가는 경우가 종종 있습니다. 이전 포스팅에서 다루었던 Syntax HighLighter도 기본적으로 소스코드를 보기 좋게 꾸미기 위해서 사용을 하지만, 긁어가기 편하게 사용하기도 합니다. 그런데 블로그나 웹페이지에서 글을 선택했을 때 선택영역의 색상이 조금 특이했던 경험한 적이 있으신가요? 대부분은 파란색 블록배경에 글자는 하얀색으로 블록설정(영역선택)이 됩니다. 그런데 이 색상을 변경할 수 있는 기능이 CSS에 있었네요. (모든 브라우저에서 적용가능한 것은 아닙니다.)

저도 FastBoot를 설치한 후에 입맛대로 변경하기 위해 오랜시간 씨름(?)하다가 문제가 발견되어 해결하려다 보니 알게 된 기능입니다. 스킨의 정확한 구조를 파악하지 못한 채, 여러가지 CSS를 적용하다보니까 발생한 문제죠. SyntaxHighLighter을 설치하고 나서 코드를 긁으려다보니 SystaxHighLighter에 적용된 테마색상과 드래그 선택영역 색상이 비슷해서 어떤 코드가 선택되었는지 육안으로 잘 분간이 안되더라구요. 그래서 원인을 찾던 중에 결국 한줄의 코드가 문제였다는 것을 알게된 것입니다. 해결책은 늘 그렇듯이 생각보다 간단합니다.

위의 모습이 보통의 모습입니다. 이 색상을 바꾸시려면 아래의 CSS 태그(Tag)를 이용하면 됩니다. 

(참고로 FastBoot CSS에는 아래 태그가 기본적으로 설정되어 있지 않습니다.)

::selection 태그

 ::selection { color: red; background: yellow; }

 ::-moz-selection { color: red; background: yellow; }

::selection 태그에는 적용되는 브라우저에 따른 3가지 방식이 있지만, 일반적으로 위의 2가지만 적어주시면 됩니다. 

color는 글자색상

background는 배경색상

을 각각 의미합니다.

::selection { color: #FEFEFF; background: #676363 }

::selection 태그를 활용해서 색상을 변경해 본 모습입니다. 약간 모던한 느낌이네요. 색상 찾기만 해도 참 시간이 잘 흘러갑니다. 세상에는 참 시간 잡아먹는 것들이 많은 것 같네요. 

좀 더 자세히

::selection 태그는 3가지 속성만 가지는데, 위에서 언급한 두 가지 속성(color, background) 외에도 text-shadow라는 속성이 있습니다. text-shadow는 블록으로 글자를 선택하는 것이 아니라, 글자 외곽을 특정한 색으로 그림자 처리 하듯이 선택하는 방식입니다. 백문이 불여일견!! 아래 샘플작업을 좀 해두었으니 직접 여러가지 차이점을 느껴보시고 본인의 취향에 따라 활용하시기 바랍니다. ^^

아래에 있는 글을 한 줄씩 또는 마음대로 드래그 해보세요.

1. 아무것도 적용하지 않은 경우

2. 글자색상만 적용한 경우

3. 배경색상만 적용한 경우

4. 글자+배경색상 모두 적용한 경우

5. 그림자효과를 준 경우

6. 3가지 속성을 모두 혼합해서 사용할 수도 있습니다.

# 티스토리 반응형 스킨 FastBoot 설치하는 방법

# 깔끔한 코드의 대명사 SyntaxHighLighter 최신버전설치 및 사용방법