2023년 8월 16일 수요일

CSS 마우스로 텍스트 드래그시 배경색, 글색자 변경하기

CSS | 마우스로 텍스트 드래그시 배경색, 글색자 변경하기

웹브라우저에서 텍스트를 마우스로 드래그하면 선택된 글자는 파란색 배경에 흰색을 바뀝니다.

이색은 CSS 설정으로 변경할 수 있습니다.

다음은 텍스트를 선택했을 때 배경은 검은색 글자는 초록색으로 만드는 예제입니다.

<!doctype html>
<html lang="ko">
	<head>
	    <meta charset="utf-8">
	    <title>CSS</title>
	    <style>
	        ::selection {
		    background-color: black;    // 검은색
		    color: #3cc091;             // 초록색
		}
	    </style>
	</head>
	<body>
	    <h1>Pep Guardiola says Kevin De Bruyne will be sidelined for months with a "serious injury".</h1>
            Pep Guardiola says Kevin De Bruyne will be sidelined for months with a "serious injury".
	</body>
</html>

요소별로 다르게 설정할 수도 있습니다. 다음은 h1요소에 대해서는 선택했을 때 배경은 오랜지색, 글자는 초록색으로 만드는 예제입니다.

<style>
    ::selection {
    	background-color: black;    // 검은색
        color: #3cc091;             // 초록색
    }
    h1::selection {
    	background-color: orange;   // 오렌지색
        color: #3cc091;             // 초록색
    }
</style>