드래그 방지 글 복사하는 방법

가끔 좋은 정보를 발견하여 퍼 가려고 시도했을 때 드래그 방지 기능을 적용해 놓아 불편을 겪으신 분들 많을 겁니다. 기본적으로 자기 글을 복사 붙여넣기 하기를 원하지 않아서 그렇게 해 놓았을 텐데요. 그래도 퍼 갈 사람들은 다 퍼 갑니다. 사람들의 양심에 맡길 수 밖에 없는 일이죠.

저는 이렇게 악의적인(?) 목적으로 사용하길 바라는 마음으로 알려 드리는 건 당연히 아니구요. 가끔 코딩 관련 게시물을 올려 놓으신 분들도 복사 붙여넣기를 막아 놓으신 분들이 있더라구요. 그 긴 소스 코드를 일일이 따라 치라고 일부러 그렇게 해 놓은 건 아닐텐데 말입니다. 그런 경우 조금이나마 도움이 되었으면 하는 마음에서 말씀 드리겠습니다.

드래그 방지 글 발견

예를 들어 이런 글이 있는데 이 소스 코드를 복사하고 싶은데 드래그 방지 기능이 먹여져 있다고 상상해 보세요. 대부분의 사람들은 다른 방법을 생각 못하고 일일이 타이핑 해야 할 겁니다. 정말 짜증나겠죠?

개발자 모드 열기

그럼 어떻게 저 코드를 복사할 수 있을까요? 크롬 기준으로 설명을 하겠습니다. F12를 누릅니다. 간혹 가다가 개발자 모드 단축키까지 막아 놓는 사람도 있더라구요. 그럴 경우 직접 메뉴를 찾아 가서 오픈 하시면 됩니다.

엘리먼트 선택 아이콘 활성화

그리고 개발자 모드 좌측 상단에 보시면 다음과 같은 선택 아이콘이 있습니다. 이 아이콘을 활성화 하시구요.

원하는 위치에 마우스 커서를 갖다 대시면 다음과 같이 그 부분이 강조가 되고 클릭을 하면 선택이 됩니다.

그러면 개발자 모드의 Elements 탭에 원하는 위치의 블록으로 자동 이동이 됩니다.

Selector 복사 및 활용

여기서 마우스 오른쪽을 클릭하면 메뉴가 뜨는데 Copy > Copy selector를 선택합니다.

그럼 다음과 같은 값이 복사가 되는데 이상한 외계어 같다고 해서 당황하지 않으셔도 됩니다. 이 값의 의미를 정확히 모르셔도 아무 지장이 없거든요.

// Values ​​copied with the Copy selector
#code_1611322355434 > code

이 값을 활용하여 Console 창에 다음과 같이 입력을 할 겁니다. 이것도 어려우실 수 있으므로 코드를 그대로 제공해 드리겠습니다.

이 부분을 그대로 복사해서 쓰시면 됩니다.

console.log(document.querySelector('Values ​​copied').textContent)
// ex) console.log(document.querySelector('#code_1611322355434 > code').textContent)

그리고 엔터를 치면 우리가 원하던 부분의 값이 다음과 같이 출력이 됩니다.

당연히 복사도 되구요.

이렇게 손쉽게 복사를 하였습니다.

var test = new Vue({
    el: '#test',
    mounted: function() {
        $('#intro').show();
        $('#main').hide();
        $('#result').hide();
    },
    methods: {}
});

유용하게 사용하시길 바라며 저작권이 있거나 민감한 글을 복사하여 퍼뜨리는 행위는 웬만하면 안 하시는게 좋다는 당부의 말씀 드립니다. 저는 양심에 맡기도록 할게요.

감사합니다 🙂