Look and Find what i've done

thumbnail 특정 페이지 및 카테고리의 HTML 구조를 변환하기 (IF조건문) if ( window.location.pathname == '/category/Protect' ) { document.write( '' ); } 해당 내용은 코코소프트의 내용을 참고하여 응용하였습니다. 위 방법으로 간단하게 특정 카테고리나 특정페이지의 Document를 수정하거나 새롭게 작성할 수 있습니다. 저의 경우, 보호글 카테고리(자료보관용)을 생성하게 되면서 본문에 작성되는 내용이 없기 때문에 게시글의 레이아웃이 변형되거나 오류가 생기는 부분이 발생했습니다. 게시글의 2문단 내지 3문단 정도를 일정하게 작성하면 문제가 발생하지는 않지만, 자료보관용이기 때문에 별도의 글을 작성할 필요도 없고, 단순히 자료보관만 하면 되기 때문입니다. 따라서, 위와 같이 보호되어 있는 글이라는 요약설명 부분이 굳이 ..
thumbnail jQuery / Method / .append() (문자열 추가) 자바스크립트로 페이지의 요소를 수정하거나 문자열을 추가할 때 사용하는 메소드 .append() 사용방법은 아주 간단하다. 클래스명을 변경하고, .append('추가할 내용' ); 으로 실행을 시키면 페이지의 맨 앞에 접두어를 붙이거나 수식어를 추가할 수 있다. .prepend의 경우에는 맨 뒤에 추가할 수 있다. $( '클래스명' ).append( '추가할 내용' );
thumbnail 유튜브 반응형 자바스크립트 소스 간단한 자바스크립트 코드로 쉽게 유튜브를 반응형으로 만들어줄 수 있다. 데스크탑 보다 모바일의 경우 화면이 짤리는 경우가 많은데, 쉽게 구현할 수 있는 코드다.
thumbnail 백링크 작업을 위한 트윗봇 링크주소 숫자출력문 #include int main() { for (int i = N; i
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 Google Code Prettify 설치하기 / 코드입력기 ​ 사이트 내에서 구현되는 코드입력기인데, 구글에서 제공하고 있는 스크립트를 통해서 매우 쉽게 구현이 가능하다. 기본 스크립트 설정하기 위와 같이 스크립트를 추가해주면 바로 사용이 가능하고, 사용할 때는 Pre 태그를 통해서 구현한다. 서식으로 한번 만들어두면, 매번 HTML 편집을 통해서 추가할 필요 없이 바로 사용할 수 있어 편리하다. ... --> 추가 언어도 설정이 가능하여, 맨 위와 같은 방법으로 스크립트를 추가하여 언어를 추가할 수 있다. Apollo; Basic; Clojure; CSS; Dart; Erlang; Go; Haskell; Lasso; Lisp, Scheme; LLVM; Logtalk; Lua; MATLAB; MLs: F#, Ocaml,SML; Mumps; Nemerle; Pas..
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, ..
thumbnail 아름다운 CSS와 JavaScript 역시나 오늘 아침에도 간단한 사이트 구조를 수정했다. 언어를 새롭게 공부하면서 응용해보려니 쉽지가 않다. 영어를 조금 잘 할줄 안다면 코딩이 조금 쉽게 느껴질텐데, 역시나 어렵다. 지금에서야 웹코딩 정도만 할줄 알고 각종 프로그래밍 언어를 공부해야한다고 하면 어느세월에 그걸 다 하게 될지 모르겠지만, 그래도 자유롭게 사이트 구조를 내 입맛대로 바꾸고 수정할 수 있는 정도까지는 열심히 배워보고 싶다. 인터넷에 널려있는 정보들을 하나하나 분석해보고 적용시켜보고 하는 반복작업이지만 거기서 추가로 내가 조금씩 배웠던 것들을 응용시키면 화려하지는 않더라도 나름대로 봐줄만한 디자인 작업이 완성된다. 일러스트나 포토샵과는 다르게 논리와 순서, 그리고 정확한 값이 요구되는 웹코딩은 그야말로 수학공부를 하는 것 같은 느..
thumbnail 숫자출력문 (1부터 100까지 숫자 출력하기) 티스토리는 정말 어렵다. 이 어려운 티스토리를 더 어렵게 만드는 이유는 내 욕심 때문일 것이다. 매크로와 같은 것들이 무수하게 많다. 하지만, 한번 배워놓으면 너무나도 편리한 마법같은 프로그래밍 문법들도 있고 전공자가 아니더라도 조금만 이해하면 매우 편리하게 다양한 곳에 사용할 수 있다.가령, 내가 가장 많이 쓰는 구문 중 하나가 바로 반복출력이다. 숫자를 나열하는 건데, 알다시피 티스토리의 경우에는 게시글의 주소가 1부터 게시글 숫자대로 형성이 된다. 예를 들어 모든 게시글의 링크를 얻어야 한다고 할 때, 하나하나 1부터 현재 발행한 숫자만큼 쓰려면 시간도 걸리고 귀찮다. 게시글이 많은 사람은 더욱 더 반복작업을 해야한다. 그럴 필요 없이 아래의 구문을 입력하고 숫자를 출력하면 아래의 문법대로 숫자가 ..

지고의 존재에 대한 존숭과 믿음

태양 아래의 재단

삶을 살아가면서 때론 '진실'과 '진리'를 찾기를 원합니다.
때로는 이 세상에 나의 존재에 대해 의문을 가지게 되고 나의 역활과 의무에 대해 더 자세히 알기를 바랍니다.

어쩌면, 그런 것 조차도 없을지도 모릅니다.
그저 쾌락과 유흥에 빠진 인생을 살기에는 세상에는 즐거운 일들이 너무나 많습니다.

태양 아래의 재단
풍요를 희망하는 무녀들
정의
악수
기념비
정확한 분배