'Programming' 카테고리의 글 목록

thumbnail CSS 선택자 :nth-child() 사용법 :nth-child( an+b ) :nth-child() 속성은 정말 유용하다. 웹사이트나 스킨을 디자인 할 때, 내가 원하는 요소에만 CSS를 편하게 적용할 수 있게 해준다. 여러가지 적용방법이 있지만, 그 중에서 가장 유용한 속성 중에 하나를 설명하고자 한다. :nth-child()와 :nth-last-child()는 특정 순서에 있는 요소를 선택할 때 사용하는 선택자 :nth-child()는 앞에서부터 세고, :nth-last-child()는 뒤에서부터 셀 수 있다. 이 중에서 :nth-child()로도 선택자로 충분히 자유롭게 활용할 수 있다. first나 last 사용법도 있지만, 여기서는 홀수와 배수 또는 특정요소를 의도하여 선택하고자 한다. :nth-child( 2n+1 ) 여기서 2는 n의..
thumbnail Border CSS 테두리 속성 반복 적용하는 방법 똑같은 텍스쳐를 border값에 부여하고 싶다면 어떻게 하면 될까, 배경이 아닌 두꺼운 선에 적용하면서 작은 이미지 텍스쳐가 반복해서 나오길 바란다면 border-image-repeat 태그를 적용하면 된다. 자세한 사용방법은 이곳에서 확인할 수 있다. 가장 간단한 사용방법으로는 정사각형을 기준으로 할 때, 모든 타일을 일정한 간격으로 채우는 속성값은 아래와 같다. border-image-repeat: round; 하지만, border의 가로와 세로값이 다를 경우에는 별도의 숫자를 지정해줘서 각각 가로와 세로에 적용될 타일의 갯수를 지정해줘야한다. 이 경우에는 round [n, n]값으로 속성을 지정할 수 있다. 만약 텍스쳐를 외부 이미지 소스로 불러와서 적용할 경우에는 border: url( ) n n..
thumbnail <video> : 비디오 삽입 요소 간단 사용방법 간단 사용방법은 아래와 같습니다. 비디오 영상을 별도의 데이터베이스를 통해서 삽입할 필요 없이, 외부 주소값을 불러와서 아래의 요소로 적용시킬 수 있습니다. Autoplay 부울(boolean) 속성. 이 값이 설정되면, 데이터 로딩이 완료되지 않더라도 재생 가능한 시점에 자동으로 재생이 시작됩니다. Buffered 미디어의 어느 시간대가 버퍼에 들어 있는지 확인할 수 있는 속성입니다. 이 속성은 TimeRanges 객체를 포함합니다. Controls 이 속성이 존재하면, 소리 조절(volume), 동영상 탐색(seek), 일시 정지(pause)/재시작(resume)을 할 수 있는 컨트롤러를 제공합니다. Height 비디오의 출력 영역 높이이며, CSS 픽셀 단위 입니다. Loop 부울(boolean) ..
thumbnail HTTP → HTTPS 리다이렉션 전환(.htaccess) 루트 위치에서 .htaccess 문서파일을 찾아 아래와 같이 작성해준다. 이 값을 추가하면 301, 302 리다이렉션 문제를 해결할 수 있다. 사이트 도메인을 변경하거나 SSL 도입할 경우에 HTTP 접속 주소값을 영구적으로 HTTPS로 리다이렉션을 해주는 방법이다. RewriteEngine On RewriteCond %{HTTPS} off RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
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 스킨 편집에 해당 내용을 수정할 수 없고 치환값을 따로 제공하지 않아서 자바스크립트로 텍스트를 변경했다. 티스토리 메인에서 제공되는 어드민 기능의 텍스트 값을 자바스크립트를 활용하여 텍스트를 쉽게 변경하였다. 너무 단순하지만, 의외로 자주 사용되는 기능이다.