본문 바로가기
Computer Programming/web Program with PHP

웹 페이지에서 복사한 내용에 출처 표시하기

by 로봇과나무 2023. 10. 2.

웹 페이지에서 텍스트를 복사하고 붙여 넣을 때, 해당 내용에 출처를 함께 표시하는 것은 중요한 윤리적 요소입니다. 사용자들이 정보를 공유할 때 출처를 알려주면, 원 저작자에 대한 예의를 지키고 정보의 신뢰성을 높일 수 있습니다. 이 글에서는 간단한 자바스크립트 코드를 사용하여 웹 페이지에서 복사한 내용에 출처를 추가하는 방법을 설명하겠습니다.

단계 1: 스크립트 포함하기

먼저, 웹 페이지의 <head> 섹션 또는 <body> 섹션 안에 다음 스크립트를 포함하세요.

<script>
    document.addEventListener('copy', function (e) {
        // 복사 이벤트 발생 시 실행
        var selectedText = window.getSelection().toString();
        var pageURL = window.location.href;
        var copiedText = selectedText + '\n\n출처: ' + pageURL;

        // 클립보드에 선택한 텍스트와 출처 정보를 복사
        e.clipboardData.setData('text/plain', copiedText);
        e.preventDefault(); // 기본 복사 동작 방지
    });
</script>

html code를 포함한 전체 테스트 코드는 다음과 같습니다. 

<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>내용 복사 및 출처 표시 예제</title>
</head>
<body>

<p>이것은 웹 페이지에서 복사되어 출처 정보와 함께 붙여 넣기될 텍스트입니다.</p>

<!-- 스크립트 추가 -->
<script>
    document.addEventListener('copy', function (e) {
        // 복사 이벤트 발생 시 실행
        var selectedText = window.getSelection().toString();
        var pageURL = window.location.href;
        var copiedText = selectedText + '\n\n출처 - '+ pageURL ;

        // 클립보드에 선택한 텍스트와 출처 정보를 복사
        e.clipboardData.setData('text/plain', copiedText);
        e.preventDefault(); // 기본 복사 동작 방지
    });
</script>
</body>
</html>

단계 2: 사용 방법

이제 웹 페이지에서 텍스트를 선택하고 복사 (Ctrl+C 또는 Command+C) 할 때마다, 클립보드에 선택한 텍스트와 웹 페이지의 출처 정보가 함께 복사됩니다.

단계 3: 확인

텍스트를 붙여 넣을 때 (Ctrl+V 또는 Command+V), 출처 정보가 함께 나타납니다.

이제 복사한 내용에 출처가 함께 표시되어 사용자들이 정보를 공유할 때 출처를 유지할 수 있습니다. 이것은 웹 페이지의 윤리적 측면과 정보의 신뢰성을 높이는 데 도움이 됩니다.

위의 단계를 따라 하면 간단한 자바스크립트 코드를 사용하여 웹 페이지에서 복사한 내용에 출처를 표시하는 것이 얼마나 간단한지 알 수 있습니다. 이제 웹 페이지의 방문자들이 정보를 복사하고 붙여 넣을 때 출처를 쉽게 유지할 수 있게 되었습니다.

요약: 웹 페이지에서 텍스트를 복사하고 붙여 넣을 때, 해당 내용에 출처를 함께 표시하고자 합니다. 이 글에서는 간단한 자바스크립트 코드를 사용하여 이를 실현하는 방법을 안내합니다.