가끔 좋은 정보를 발견하여 퍼 가려고 시도했을 때 드래그 방지 기능을 적용해 놓아 불편을 겪으신 분들 많을 겁니다. 기본적으로 자기 글을 복사 붙여넣기 하기를 원하지 않아서 그렇게 해 놓았을 텐데요. 그래도 퍼 갈 사람들은 다 퍼 갑니다. 사람들의 양심에 맡길 수 밖에 없는 일이죠.
저는 이렇게 악의적인(?) 목적으로 사용하길 바라는 마음으로 알려 드리는 건 당연히 아니구요. 가끔 코딩 관련 게시물을 올려 놓으신 분들도 복사 붙여넣기를 막아 놓으신 분들이 있더라구요. 그 긴 소스 코드를 일일이 따라 치라고 일부러 그렇게 해 놓은 건 아닐텐데 말입니다. 그런 경우 조금이나마 도움이 되었으면 하는 마음에서 말씀 드리겠습니다.
드래그 방지 글 발견
예를 들어 이런 글이 있는데 이 소스 코드를 복사하고 싶은데 드래그 방지 기능이 먹여져 있다고 상상해 보세요. 대부분의 사람들은 다른 방법을 생각 못하고 일일이 타이핑 해야 할 겁니다. 정말 짜증나겠죠?
![](https://kisscuseme.com/wp-content/uploads/2022/07/image-56.png)
개발자 모드 열기
그럼 어떻게 저 코드를 복사할 수 있을까요? 크롬 기준으로 설명을 하겠습니다. F12를 누릅니다. 간혹 가다가 개발자 모드 단축키까지 막아 놓는 사람도 있더라구요. 그럴 경우 직접 메뉴를 찾아 가서 오픈 하시면 됩니다.
![](https://kisscuseme.com/wp-content/uploads/2022/07/image-57.png)
엘리먼트 선택 아이콘 활성화
그리고 개발자 모드 좌측 상단에 보시면 다음과 같은 선택 아이콘이 있습니다. 이 아이콘을 활성화 하시구요.
![](https://kisscuseme.com/wp-content/uploads/2022/07/image-58.png)
원하는 위치에 마우스 커서를 갖다 대시면 다음과 같이 그 부분이 강조가 되고 클릭을 하면 선택이 됩니다.
![](https://kisscuseme.com/wp-content/uploads/2022/07/image-59-1024x266.png)
그러면 개발자 모드의 Elements 탭에 원하는 위치의 블록으로 자동 이동이 됩니다.
![](https://kisscuseme.com/wp-content/uploads/2022/07/image-60.png)
Selector 복사 및 활용
여기서 마우스 오른쪽을 클릭하면 메뉴가 뜨는데 Copy > Copy selector를 선택합니다.
![](https://kisscuseme.com/wp-content/uploads/2022/07/image-61.png)
그럼 다음과 같은 값이 복사가 되는데 이상한 외계어 같다고 해서 당황하지 않으셔도 됩니다. 이 값의 의미를 정확히 모르셔도 아무 지장이 없거든요.
// Values copied with the Copy selector
#code_1611322355434 > code
이 값을 활용하여 Console 창에 다음과 같이 입력을 할 겁니다. 이것도 어려우실 수 있으므로 코드를 그대로 제공해 드리겠습니다.
![](https://kisscuseme.com/wp-content/uploads/2022/07/image-63.png)
이 부분을 그대로 복사해서 쓰시면 됩니다.
console.log(document.querySelector('Values copied').textContent)
// ex) console.log(document.querySelector('#code_1611322355434 > code').textContent)
그리고 엔터를 치면 우리가 원하던 부분의 값이 다음과 같이 출력이 됩니다.
![](https://kisscuseme.com/wp-content/uploads/2022/07/image-62.png)
당연히 복사도 되구요.
![](https://kisscuseme.com/wp-content/uploads/2022/07/image-64.png)
이렇게 손쉽게 복사를 하였습니다.
var test = new Vue({
el: '#test',
mounted: function() {
$('#intro').show();
$('#main').hide();
$('#result').hide();
},
methods: {}
});
유용하게 사용하시길 바라며 저작권이 있거나 민감한 글을 복사하여 퍼뜨리는 행위는 웬만하면 안 하시는게 좋다는 당부의 말씀 드립니다. 저는 양심에 맡기도록 할게요.
감사합니다 🙂