반응형
인터넷으로 기사나 각종 블로그의 글들을 볼 때 우리는 무의식적으로 글씨들을 드래그 하면서 읽습니다. 무의식적으로 좀 더 글씨를 잘보기 위해 하는 행동이죠. 이 때 대부분의 사이트는 아래 처럼 푸른색 바탕에 흰색글씨로 나타나기 마련입니다.
하지만 지금 보시는 제 블로그는 글씨들을 드래그 해 보시면 노란색 바탕에 검정글씨로 나타나고 있습니다.
이는 간단한 CSS 언어를 적용시켰기 때문입니다. 누구나 쉽게 따라하실 수 있으시니, 이 기능을 찾던 분들은 한 번 보시고 바로 적용해보세요!
HTML과 CSS로 직접 블로그를 입맛대로 수정할 수 있는 티스토리를 기준으로 설명드리겠습니다.
1. 일단 소스는 아래와 같습니다. CSS를 아시는 분들은 아래 소스를 붙여 넣으시면 됩니다.
::selection { color:black; background:#FFFF5A; }
2. 먼저 블로그관리 - 스킨편집 메뉴로 들어갑니다.
3. 오른쪽 상단에 스킨편집 - html편집으로 들어갑니다.
4. 상단에 HTML, CSS, 파일업로드 중 CSS를 선택하시고, 아래 붉은 상자와 같이 적당한 곳에 아래의 소스를 붙여넣습니다.
::selection { color:black; background:#FFFF5A; }
저는 드래그 했을때의 글자 color는 black으로 설정하였고, 드래그 했을때의 음영색(background)은 #FFFF5A 색으로 선택했습니다. 색상코드는 네이버 색상코드표에서 원하시는 색상을 선택하시면 됩니다.
5. 적용을 누르시고 확인해보시면 마우스 드래그 했을 때 드래그한 부분의 색상이 변경된 것을 확인하실 수 있습니다.
웹사이트에서 마우스 드래그 했을 때 색상을 바꾸는 간단한 CSS기능을 알아보았습니다.^^
반응형
'Etc2' 카테고리의 다른 글
[CSS] 선택자(Selector) 우선순위 (0) | 2020.02.24 |
---|---|
[CSS] 선택자(Selector) - 의사요소선택자, 구조선택자, 부정선택자 (0) | 2020.02.24 |
[CSS] 선택자(Selector) - 속성선택자, 가상선택자 (0) | 2020.02.23 |
[CSS] 선택자(Selector) - 자손, 자식, 인접형제선택자 / 그룹화 (0) | 2020.02.23 |
[CSS] 선택자(Selector) - 태그, 전체, class, id선택자 (0) | 2020.02.23 |
[CSS] 단위 - vm, vh, vmin, vmax (0) | 2020.02.23 |
[CSS] 단위 - px, %, em, rem (0) | 2020.02.23 |
티스토리 마우스 드래그 금지, 마우스 우클릭 금지 소스 (4) | 2019.10.12 |