'Programming' 카테고리의 글 목록

thumbnail 리디렉션(리다이렉션) 하는 자바스크립트 코드 (도메인 변경 또는 이벤트 페이지 이동) 리디렉션(리다이렉션) 자바스크립트 코드입니다. 저처럼 도메인을 변경하거나, 특정 페이지에서 다른 페이지로 이동을 시켜야하는 경우, 이벤트 페이지로 이동을 시켜야 하는 경우 자바스크립트로 쉽게 주소를 변경할 수 있습니다. 기본적으로는 도메인 자체에서 다른 도메인으로 변경을 하는 방법이 있는데, 이 경우를 포워딩이라고 합니다. 흔히 볼 수 있는 현상으로는 낚시사이트나 성인사이트 등에서 다른 결제사이트로 피싱(낚시)하는 방법으로 자주 사용을 하지만, 포워딩은 다른 경우에도 많이 쓰이는 방법입니다. 자바스크립트로 쉽게 구현을 할 수 있기도 하며, 도메인 제공사이트(가비아, 후이즈 등)에서도 일반적으로 포워딩 서비스를 제공하고 있습니다. 자바스크립트로 리디렉션 하는 경우는 일반적이지 않은 경우이기 때문에 사용에 ..
thumbnail 배경음악 다는 방법(티스토리 배경음악, 자동재생, Audio 태그) HTML5 부터 Audio 태그를 지원하면서 아주 간단하게 글에 배경음악을 설치하는 방법이 있습니다. 구글 크롬 정책에 의하여 자동재생이 일부 막혔지만, 다른 방법으로 구현할 수 있습니다. 아래의 경우에는 일반적인 경우로 배경음악을 설치하는 방법이므로, 사이트 자체에 배경음악을 설치하기 위해서는 인덱스페이지에 Div 태그로 감싸 요소를 가려주시면 됩니다. 글에 배경음악을 다는 방법입니다. 일반적으로 티스토리 기준으로 설명을 하면 HTML 지원이 가능한 사이트 혹은 블로그에서 위의 태그로 오디오 태그를 활용할 수 있습니다. 태그에 각 속성을 추가하면 여러가지를 구현할 수 있습니다. 일반적으로 와 같은 방식으로 태그를 작성합니다. . . 와 같은 식으로 구현하고 음악 소스파일 주소를 와 같이 적용하면 오디오..
thumbnail 캡챠(captcha) 풀어주는 API 제공 사이트 https://anti-captcha.com/mainpage 돈 드는게 흠이지만, 개발하는 사람들 중에서 자동화 시스템을 만드는 사람들에게는 정말 중요한 API라고 할 수 있겠다. 보안이 설정되어 있는 대부분의 요소에는 Captcha가 걸려있어서 하다못해 웹문서 작업을 할 때에도 굉장히 중요할 수 밖에 없다. 어쩔 수 없이 다양한 플랫폼, 다양한 도메인에서 웹문서를 발행할 수 밖에 없는 운명의 컨텐츠들이 있기 때문이다.
thumbnail 윈도우 10 기본앱 원격 프로시저 호출 오류 해결방법 기본앱을 자주 사용하는 나로서는 기본앱이 실행이 안되면 정말 짜증이 난다. 윈도우 10의 대표적인 오류 중 하나인 원격프로시저 호출오류! 다양한 해결방법들이 있지만 아주 간단히 해결방법을 모색해보자면 아래의 마이크로소프트에서 해당 미디어 기능 팩을 다운 받으면 된다. 윈도우 10 n KN의 오류라고 하는데, 윈도우 10도 참 오류가 많다. 그래도 윈도우 7보다 좋은건 사실이다. Download Windows 10 N 및 KN 버전을 위한 미디어 기능 팩 from Official Microsoft Download Center www.microsoft.com https://www.microsoft.com/ko-KR/download/details.aspx?id=48231 2개의 파일을 다운받을 수 있는데 모두..
thumbnail 특정 페이지 및 카테고리의 HTML 구조를 변환하기 (IF조건문) if ( window.location.pathname == '/category/Protect' ) { document.write( '' ); } 해당 내용은 코코소프트의 내용을 참고하여 응용하였습니다. 위 방법으로 간단하게 특정 카테고리나 특정페이지의 Document를 수정하거나 새롭게 작성할 수 있습니다. 저의 경우, 보호글 카테고리(자료보관용)을 생성하게 되면서 본문에 작성되는 내용이 없기 때문에 게시글의 레이아웃이 변형되거나 오류가 생기는 부분이 발생했습니다. 게시글의 2문단 내지 3문단 정도를 일정하게 작성하면 문제가 발생하지는 않지만, 자료보관용이기 때문에 별도의 글을 작성할 필요도 없고, 단순히 자료보관만 하면 되기 때문입니다. 따라서, 위와 같이 보호되어 있는 글이라는 요약설명 부분이 굳이 ..
thumbnail jQuery / Method / .append() (문자열 추가) 자바스크립트로 페이지의 요소를 수정하거나 문자열을 추가할 때 사용하는 메소드 .append() 사용방법은 아주 간단하다. 클래스명을 변경하고, .append('추가할 내용' ); 으로 실행을 시키면 페이지의 맨 앞에 접두어를 붙이거나 수식어를 추가할 수 있다. .prepend의 경우에는 맨 뒤에 추가할 수 있다. $( '클래스명' ).append( '추가할 내용' );
thumbnail 유튜브 반응형 자바스크립트 소스 간단한 자바스크립트 코드로 쉽게 유튜브를 반응형으로 만들어줄 수 있다. 데스크탑 보다 모바일의 경우 화면이 짤리는 경우가 많은데, 쉽게 구현할 수 있는 코드다.
thumbnail 백링크 작업을 위한 트윗봇 링크주소 숫자출력문 이전에도 내용을 작성했었지만, 개인적으로 쉽게 사용하기 위해서 다시 한번 정리하는 내용이다. 게시글이 많아지면서 새롭게 추가해야할 트윗봇의 링크주소를 추가해주기 위해서 쉽게 사이트의 주소와 게시글 숫자를 출력하는 숫자출력문이다. 이전까지 작업한 숫자(N-1)로 하고, 그 다음부터 반복숫자를 N+(1000번)에 치환해서 적용시키면 된다. 그 다음에 메모장 등을 활용해서 #으로 되어 있는 앞 부분을 일괄변경해주면 링크주소를 숫자나열식으로 출력시킬 수 있다. 백링크 작업의 경우, 매우 중요하기 때문에 이를 간편하게 작업해줄 트윗봇 등의 애플리케이션을 이용하면 쉽게 백링크를 생성할 수 있다. 텀블러와 페이스북 등의 작업도 가능하지만, 번거로운 부분이 있어 트위터만 사용해도 충분하다. 무엇보다도 백링크보다 사이트..
thumbnail OSS Notice | KEditor OSS Notice | KEditor This application is Copyright © Kakao Corp. All rights reserved. The following sets forth attribution notices for third party software that may be contained in this application. If you have any questions or concerns, please contact us at opensource@kakaocorp.com @babel/polyfill https://github.com/babel/babel/tree/master/packages/babel-polyfill MIT License @ephox/agar https:/..
thumbnail HTML5 웹문서 작성에 대한 고찰 어떻게 보면 단순한 웹문서 작성하는 것은 책을 구성하는 것과 같다. 내가 제목을 쓰고, 본문에 내용을 담고, 어떤 내용을 채우고 색을 입히거나 강조를 하는 것은 모두 문서를 작성하는 것이다. 그것이 페이지(Page)로써, 한 페이지씩 채워나간다고 생각하면 되는 것이기도 하고 그러한 페이지들이 쌓여 하나의 사이트이 되는 것이기도 하다. 그러니, 귀찮더라도 표준웹을 지키면서 처음부터 써나가는 습관을 기르고, 책 한권을 만드는 연습을 해야겠다. 프로그래밍 언어를 배우는 것은 매우 재밌는 일, 신기한 일이 벌어지기도 하고 마법같은 기술을 배우는 것 같기도 하다. 프로그래밍이야 말로, 현대의 마법이 아닐까 싶다. 마법을 외우는 주문을 외워 놀라운 세상으로 만들어가는 것이다. 그 즐거운 여정이 계속되기를 바라면서 ..
thumbnail 해당 요소의 텍스트를 변경하는 자바스크립트 너무 간단해서 유용하게 활용할 수 있는 자바스크립트, 이번 티스토리 구독하기 버튼이 생기면서 페이지의 메타태그 값을 불러오는데, 한 단어로 짧게 구현하고 싶지만 HTML 스킨 편집에 해당 내용을 수정할 수 없고 치환값을 따로 제공하지 않아서 자바스크립트로 텍스트를 변경했다. 티스토리 메인에서 제공되는 어드민 기능의 텍스트 값을 자바스크립트를 활용하여 텍스트를 쉽게 변경하였다. 너무 단순하지만, 의외로 자주 사용되는 기능이다.
thumbnail Naver Cloud Services | Products & Services ComputeServer UpdateSSD ServerGPU Server UpdateVirtual Dedicated Server UpdateBare Metal ServerAuto ScalingCloud FunctionsHPC(High Performance Computing)Container RegistryKubernetes Service NewStorageObject Storage UpdateArchive StorageFile StorageBlock Storage UpdateNASBackupData Teleporter UpdateNetworkingLoad BalancerDNSGlobal Internet ServiceCDNGlobal CDNIPsec VPNNAT GatewayGlobal Route Mana..
thumbnail User JavaScript and CSS 문자열 앞 해시태그 추가 및 공백제거 User JavaScript and CSS 확장프로그램을 활용하여 해당 사이트의 JavaScript를 추가하거나 수정할 수 있다. Stylebot의 확장 기능인 User JavaScript and CSS를 통해서 해당 해시태그를 수정하거나 추가해줄 수 있다. 위의 해시태그를 추가하여 .before() 속성을 통해 문자열 앞에 내용이나 속성을 추가할 수 있고 Replace() 정규식을 통해서 단어 또는 문자열 사이의 공백을 제거하여 쉽게 해시태그로 활용할 수 있게 된다. 따라서, 해시태그를 복사하거나 편하게 붙여넣기를 하기 위해서 중간 공백을 삭제하거나, 해시태그를 추가하기 쉽기 때문에 해시태그를 추가하는 시간을 효율적으로 단축시킬 수 있게 된다. 티스토리의 경우, .before()에 comma(,)를 추..
thumbnail 마우스 우클릭/개발자도구[F12] 방지 자바스크립트(JavaScript) 우클릭 방지와 F12 방지 코드 결과적으로는 매우 간단한 우클릭 툴바 및 구글확장프로그램(PigTool)에 쉽게 풀려버리기 때문에 더욱 강력한 기능은 자바스크립트가 아닌 다른 방식으로 구현을 해야합니다. 다만, 매우 간단하게 설정이 가능하기 때문에 필요하신 분들은 아래의 코드를 HTML편집을 통해 설치하실 수 있습니다. 아래의 코드를 사이에 넣습니다. 안에 아래의 태그를 입력합니다. - oncontextmenu='return false' - 우클릭방지 - onselectstart='return false' - 블럭선택방지 - ondragstart='return false' - 드래그방지 드래그 혹은 블럭선택, 우클릭 방지 중에서 필요가 없는 기능은 제거하고 사용하실 수 있습니다.
thumbnail 알트(Alt) 태그 본문 이미지에 표시하기(css) 사이트 내에 첨부된 이미지들 중에서 알트태그(대체 텍스트)를 css로 표시할 수 있습니다. 티스토리의 경우에는 대체 텍스트를 이미지를 클릭하여 설정해줄 수 있는데, 본문에 첨부된 이미지들 중에서 Alt 속성 값이 없는 이미지 혹은 Alt 속성 값이 있어도 내용이 없는 경우에 본문에서 쉽게 찾을 수 있도록 css로 표시하여 보여줄 수 있습니다. 위와 같이 빨간 점선으로 표시되어 있는 경우, 알트태그(Alt tag)가 제대로 설정되어 있지 않습니다. 알트 태그는 검색엔진에 로봇이 색인하여 노출을 도와주기 쉬울 뿐 아니라 웹표준에 필수속성 값이기 때문입니다. 따라서 웹페이지 최적화를 고려하시는 분들이라면 알트태그는 꼭 설정해주셔야만 합니다. border:3px dotted red border:1px dotte..
thumbnail 드래그 방지 마우스우클릭 복사방지 스크립트(Javascript) 사이트에서 저작권 문제 때문에 불안하다면 드래그가 되지 않도록 스크립트를 삽입하여 불펌 등을 예방할 수 있습니다. 물론 아는 사람들은 너무나도 쉽게 뚫어버리긴 하지만, 그래도 번거로운 과정이 포함되기 때문에 스크립트를 넣으면 대부분의 경우 불펌을 방지할 수 있습니다. 지금까지 몇 군데 빼고는 복사방지 스크립트가 다 뚫리긴 했습니다. 사실 인터넷에 있는 정보는 마음만 먹으면 대부분 쉽게 가져올 수 있습니다. 따라서, 여러모로 이런 부분에도 신경을 쓰면 그나마 더 낫기는 할 것입니다. 위 텍스트를 태그 바로 위에 붙여넣기를 하여 스크립트를 실행시킵니다. 다른 방식으로도 구현이 가능합니다.
thumbnail 티스토리 사이트 마우스드래그 배경색 변경 너무나도 짧고 간단한 CSS로 드래그 배경색깔을 변경할 수 있다. 뿐만 아니라, 드래그를 했을 때 CSS를 수정해서 다양한 효과, 번지는 효과 혹은 부드러운 효과 등을 표현할 수 있다. CSS 위의 소스를 스킨편집 - CSS에 추가하면 적용된다. 배경색깔의 경우에는 취향에 맞게 HEX값을 넣어주면 된다. 위의 배경색상은 블랙으로 선언되어 있다. 만약 텍스트블록(마우스드래그) 시에 글씨색상을 변경하고 싶으면 Color : # 를 넣어주면 된다. 색상조합사이트 롤컬러(LOLCOLORS) 링크에 밑줄 없애는 법
thumbnail 티스토리 로딩바(loading bar - Indicator) 설치하기 HTML 순서대로 HTML 편집기를 열어 아래의 코드를 복사하여 붙여넣기를 하면 된다. 위 두개의 코드는 사이에 입력을 하면 된다. 스크립트로 일반 스크롤바와 같이 맨 상단에서 글의 본문 위치에 따라 로딩이 된다. 인디케이터의 경우에는 와 사이에 붙여넣는다. 그러면 맨 상단에 위의 바가 형성 될 것이다. 자바스크립트로 위치에 따라 스크롤의 컬러가 차오를 것이다. 위의 스크립트에 맞게 인디케이터 값을 불러온다. CSS 컬러와 높이값 등은 취향에 맞게 수정을 해주면 된다. 티스토리 사이트 부드러운 스크롤(JavaScript)
thumbnail 티스토리 사이트 부드러운 스크롤(JavaScript) 티스토리 사이트 부드러운 스크롤(JavaScript) 위 파일을 다운 받아 자바스크립트로 실행한다. 스크립트 소스는 위 소스를 복사하여, 사이에 삽입하고 다운 받은 JS파일은 업로드하여 알맞게 링크를 걸어준다. 티스토리의 경우에는 위 링크주소를 그대로 사용하면 된다. 티스토리는 스킨편집 - 파일업로드에 파일을 업로드하여 실행한다.
thumbnail 사이트 미리보기 페이지 로드기능 추가하기(instant.page) instant.page instant.page uses just-in-time preloading — it preloads a page right before a user clicks on it. Before a user clicks on a link, they hover their mouse over that link. When a user has hovered for 65 ms there is one chance out of two that they will click on that link, so instant.page starts preloading at this moment, leaving on average over 300 ms for the page to preload. On mobile, ..