워드프레스를 사용하는 경우 WP Content Copy Protection & No Right Click과 같은 플러그인을 사용하여 텍스트 복사를 방지하고 우클릭을 금지할 수 있습니다. 또한, 이미지 등을 불펌할 수 있도록 할 수 있습니다. 하지만 플러그인을 사용할 경우 간혹 다른 플러그인과 충돌을 일으켜 예상치 못한 문제를 일으키기도 합니다. 그리고 모든 불펌 방법은 쉽게 무력화될 수 있으므로 실질적으로 큰 효과가 없을 수도 있습니다. 아래 방법은 워드프레스뿐만 아니라 티스토리 등에서도 활용이 가능합니다. body 태그에 코드를 추가하여 우클릭과 텍스트 복사 금지하기 대안으로 [****] 태그에 코드를 추가하여 우클릭과 이미지/텍스트 선택/복사를 방지할 수 있습니다. 위의 코드에서... oncontex..

예를 들어, 모달 팝업창을 구현하는 경우 팝업이 표시될 때 브라우저 창이 스크롤되는 것을 일시적으로 비활성화하고 싶은 경우가 있습니다. 이런 상황에서 다음과 같은 자바스크립트 함수를 활용할 수 있습니다. 자바스크립트를 사용하여 스크롤 비활성화하기 다음과 같은 JavaScript를 사용하여 브라우저 창이 스크롤되지 않도록 일시적으로 비활성화할 수 있습니다. function disableScroll() { // Get the current page scroll position // 현재 페이지 스크롤 위치 가져오기 scrollTop = window.pageYOffset || document.documentElement.scrollTop; scrollLeft = window.pageXOffset || docu..

더 읽기(Read More) 버튼을 클릭하면 전체 텍스트가 표시되면서 닫기(Less) 버튼이 표시되도록 하는 jQuery 예시입니다. jQuery 더 읽기/닫기(Read More/Less) 토글 HTML 코드: 청춘 하여도 노래하며 할지니, 피어나기 가슴에 피가 운다. 수 같이, 원대하고, 피다. 귀는 생생하며, 용감하고 인간에 풀밭에 이상, 봄바람이다. 거친 이 없으면 석가는 노년에게서 싸인 그러므로 지혜는 부패뿐이다. 피가 석가는 있는 뭇 자신과 것이다. 가치를 인간에 타오르고 사라지지 이성은 풀이 충분히 찾아 피다. 있는 천지는 같지 끓는 소금이라 사막이다.모래뿐일 얼음이 끝에 있는가? 거친 천고에 위하여서, 피가 예가 품에 그들의 몸이 작고 있는가? 구하기 전인 가는 사랑의 싸인 그러므로 것은 끓..

텍스트 입력 상자에 숫자만 입력 가능하도록 하거나 숫자와 하이픈만 입력을 허용하고 싶은 경우가 있습니다. 이 경우 text input 필드의 타입을 number나 tel로 변경하는 것을 고려해볼 수 있습니다. input 타입을 nubmer로 변경하면 숫자만 입력 가능하고 tel로 설정하면 숫자와 하이픈(-)과 더하기 기호, 괄호 등 전화번호 입력에 필요한 숫자와 문자만 입력할 수 있습니다. text 타입을 그대로 두고 숫자만 입력 가능하도록 하거나 숫자와 하이픈(-)만 입력하도록 허용하려는 경우 아래의 자바스크립트나 jQuery 스크립트를 활용할 수 있습니다. 텍스트 입력 상자에 숫자와 하이픈만 입력 허용하기 다음 자바스크립트를 적용하면 숫자와 대시(-)만 입력이 가능하게 됩니다. var userName..

이 티스토리 블로그의 하단에는 배너가 표시되고 있습니다. 닫기 기능이 있는 배너의 경우 보통 Javascript를 사용하지만 이 블로그에 사용된 배너는 HTML/CSS만으로 구현되었습니다. Javascript를 이용하면 닫기를 누르면 하루 동안 표시되지 않도록 하는 것도 가능합니다. 하단 배너 만들기(Close 버튼 포함) 워드프레스의 경우 다양한 배너 플러그인이 있습니다. 예를 들어, Brave 플러그인을 사용하면 다양한 형식으로 팝업이나 배너를 표시하는 것이 가능합니다. 워드프레스 Brave 팝업 플러그인 설정 살펴보기 워드프레스 Brave 플러그인은 팝업 플러그인으로 개발되었지만 컨택트 폼, 이메일 주소 수집 등 다양한 기능을 제공하는 플러그인으로 진화하고 있습니다. 이 플러그인을 사용하여 배너를 ..

사이트 방문자들이 텍스트를 복사하지 못하거나 이미지를 다운로드하지 못하도록 마우스 우클릭을 금지하는 코드를 넣거나 오른쪽 마우스 방지 플러그인을 설치하는 경우 사용자 경험(UX)에 부정적인 영향을 미치고 SEO에도 좋지 않습니다. 특히, 코드를 공유하는 사이트에서 마우스 우클릭 금지 조치를 취하게 되면 방문자들의 원성을 사게 됩니다. 또한, 우클릭 금지는 쉽게 무력화될 수 있으므로 효과도 없습니다. 즉, 마우스 우클릭 금지는 방문자들의 불편을 야기하여 SEO에 부정적인 영향을 미치고 쉽게 무력화될 수 있어 효용성도 없습니다. 대안으로 이메일 주소를 입력하거나 회원으로 가입하는 경우에 코드를 복사할 수 있도록 허용하는 것을 생각해볼 수 있습니다. 해외 블로그에서 이 방법으로 뉴스레터 구독자나 회원을 늘리는..

예를 들어, document.querySelectorAll(".class1")을 사용하면 class1 클래스로 된 모든 요소에 적용됩니다. class1 클래스 또는 class2 클래스로 된 모든 요소를 선택하고 싶은 경우가 있을 수 있습니다. 이런 경우 개별적으로 만들어도 되겠지만 비효율적일 것입니다. 복수 클래스로 된 요소 선택 방법 How to get elements with multiple classes라는 제목의 Stackoverflow 글에서 class1 클래스와 class2 클래스가 모두 있는 요소를 선택하는 방법에 대하여 다루고 있습니다. 이 경우 다음과 같은 코드를 사용할 수 있습니다. var list = document.getElementsByClassName("class1 class2"..

이미지 파일이나 PDF 파일에 링크를 거는 경우 링크를 클릭하면 이미지 파일이나 PDF 파일이 브라우저에서 실행됩니다. 미디어 파일이 다운로드되도록 하고 싶은 경우 download 속성을 추가하면 됩니다. 예시: 자바스크립트를 사용하여 특정 CSS 클래스에 download 속성 추가하기 특정 CSS 클래스에 download 속성을 추가하고 싶은 경우 간단하게는 jQuery를 사용할 수 있습니다. $("a").attr("download", true); 자바스크립트를 사용하려는 경우 "How can we add a download attribute to all the tags present inside tag (using JavaScript)?" 문서에 제시된 다음과 같은 코드를 적절히 응용할 수 있습니다...

이전 글에서 내부 링크를 새 창으로 여는 것과 현재 창에서 여는 것이 애드센스 수익에 미치는 영향에 대해 살펴본 적이 있습니다. 애드센스 수익: '새창으로 열기' vs. '현재 창으로 열기' (링크 태그 target 속성) 티스토리 블로그에서 링크를 삽입할 때 기본적으로 '새창으로 열기'가 선택되어 있습니다. 저는 워드프레스 블로그와 티스토리 블로그에서 대부분의 링크를 '새창으로 열기'로 설정하고 있습니 avada.tistory.com 경험자들에 의하면 내부 링크는 현재 창으로 여는 것이 전면 광고가 표시될 가능성을 높여서 애드센스 수익 증대에 긍정적인 역할을 할 수 있습니다. 외부 링크는 새 창에서 열리도록 하는 것이 방문자들이 사이트 이탈하는 것을 방지하여 SEO에 긍정적인 영향을 줄 수 있습니다. ..

셀렉트(Select) 박스의 옵션을 재설정하고 싶은 경우 자바스크립트나 jQuery를 사용하여 옵션값을 변경할 수 있습니다. 이 글에서는 자바스크립트와 jQuery를 사용하여 Select 옵션값을 변경하는 방법에 대해 살펴보고, 예시를 통해 이를 워드프레스에 응용하는 방법에 대해서도 간단히 살펴봅니다. 자바스크립트로 Select 옵션 재설정/변경하기 Javascript로 셀렉트 박스의 옵션을 비우고 다른 값으로 교체하려는 경우 다음과 같은 코드를 사용할 수 있습니다. var list = ["AB", "BC", "MB", "NB", "NL", "NT", "NS", "NU", "ON", "PE", "QC", "SK", "YT"]; populateCombo(emptyCombo(document.querySele..