Kingdom

목차SVG 추가 방식에 따른 차이점SVG 추가하는 방법CSS 접근 방법JavaScript로 SVG 안의 객체 접근  1. SVG 추가 방식에 따른 차이점방법DOM 접근 가능CSS 접근SVG애니메이션DOM 접근시CORS 제한 비고추천가능가능가능보안정책(CORS) 제한 가능성getSVGDocument()로 접근  X   fetch() + innerHTML  background-image[참고]SVG 파일을 data URI scheme 코드로 변환해주는 사이트https://bloggerpilot.com/en/tools/svg-to-css//* (1) url 경로 지정하는 방법 */.image { background-image: url('image.svg'); width: 100px; height: 100px;..

작년 이맘때쯤 정규식으로 URL 추출하기를 포스팅 했었는데, 사실 당시 정규식으론 많은(..) 문제점이 있었습니다. -_-; 그리하여 개선을 하려고 했으나 이러저라한 일에 밀리다보니 어느덧 ;; 이번엔 좀더 정확한 결과를 얻을 수 있는데에 초점을 맞추고 작성하였습니다. 기존의 문제점이었던 HTML 페이지내 URL 과 DOM 객체 이름들이 잘못 검출되는 문제도 수정되었습니다. URL과 같은 DOM 이름이 아니라면 대부분 올바르게 검출될겁니다. 기존에는 단순화 하면서 단일 함수로 만들었었는데, 정규식을 다양하게 활용하기 위해 자바스크립트의 클래스로 만들었습니다. 소스코드를 보시려면 아래의 소스코드 화면에서 오른쪽 상단의 아이콘에서 소스코드 보기를 눌러 보시면 쉽게 확인 가능합니다. 버그 및 문의는 댓글을 남..

jQuery 를 이용하면 여러 객체에 쉽게 접근이 가능한데, 폼 객체의 값들을 읽거나 설정하는데는 약간 헷갈리는 부분이 있습니다. 그건 각 폼 객체들이 약간씩 다른 동작을 하기 때문인데, 단순한 폼 뿐이라면 그냥 ID 를 지정하고 바로 접근하는게 아주 쉽고 빠릅니다. 하지만, 동일한 폼이 여러개 생긴다거나 동적으로 생성되거나 하는 경우 골치아파질 수 있습니다. 다행이도 jQuery 는 이런 접근을 아주 쉽게 도와줍니다. 바로 [ ] 표현식으로 쿼리를 지원하기 때문에 간단한 표현식으로 원하는 결과를 얻을 수 있는데, 폼 객체를 이를 이용해서 셀렉트 하는 방법이 있습니다. 여기서 Year 텍스트 필드의 값을 가져오고자 할때 아래와 같이 작성할 수 있습니다. $("#TestForm > input[name='T..

Q) 현재 주소값 중 ID 와 CATEGORY 값을 체크하여, 만약 두 값 모두 있을 경우 해당 메뉴만 굵게, ID 값만 있을 경우 ID 에 해당하는 메뉴들 모두 굵게, 없을 경우 메뉴 전체를 굵게 처리를 하려면? 테스트를 위한 설정은 아래와 같습니다. 주소 : /localhost/?id=A&category=1 메뉴 : 메뉴A-1 메뉴A-2 메뉴A-3 메뉴B-1 메뉴B-2 A) 이 경우 메뉴 A-1 만 굵게 되어야 하고, category 값이 없다면 id=A 에 해당하는 메뉴 모두 굵게 처리 하는 경우입니다. 현재 주소의 값중 id, category 가 어떤게 있는지 모르고 해당 값이 있냐 없냐에 따라 또 처리가 달라지기 때문에 복잡해 보이는 것이죠. 이게 복잡해 보이긴 해도 사실 간단히 해보면 단순합니..

정규식을 배우면서 어느정도 기본을 익히고 제일 먼저 연습하는 것이 이메일 주소 체크하는 것과 함께 URL 주소 체크하는 것입니다. 그러나 사실 URL 은 아래처럼 각 부분별로 구분되어, 이러한 내용이 있고 없고가 차이 때문에 추출하기가 힘든 것중 하나입니다. URL Syntax: protocol :// user : password @ host : port / path / filename ? query #ref Protocol : 일반적으로 웹페이지를 나타낸다면 http 이고, 이외에 텔넷이나 FTP, 메일, 등등 여러가지가 있습니다. 이 프로토콜에 따라 뒤에 따라오는 주소의 형식도 달라집니다. User, Password : 웹인증을 위한 정보입니다. 웹인증을 사용한 사이트에서만 가능하고 일반적인 사이트(..

브라우저에서 자바스크립트를 사용할 경우 여러 변수를 사용뒤 그 변수가 계속 남아 메모리를 차지하게 되는 것이죠. 특히 Ajax 를 사용해서 프로그래밍 하는 경우 이 문제로 인해 많은 리소스를 차지하게 될 수 있습니다. 이를 해결하는 간단한 방법이 있어 소개합니다. 아래의 코드처럼 return 을 try {} 구문으로 작성하고, finally {} 를이용해서 객체를 초기화 시키는 것입니다. try { return obj; } finally { obj = null; } 원 출처 및 자세한 내용, 테스트는 아래 사이트를 참고하세요. [블로그] Finally, the alternative fix for IE6's memory leak is available [w] http://www.hedgerwow.com/3..

자바스크립트에서 값을 넘길때 아래의 함수들을 쓰게 되는데, 세개의 함수는 각기 다른 차이가 있습니다. 각각 특수문자를 실행시 결과 화면입니다. 각 함수의 특징을 잘 살펴 적절한 곳에 사용하는게 중요하겠죠. escape('~!@#$%^&*(){}[]=:/,;?+\'"\\') %7E%21@%23%24%25%5E%26*%28%29%7B%7D%5B%5D%3D%3A/%2C%3B%3F+%27%22%5C encodeURI('~!@#$%^&*(){}[]=:/,;?+\'"\\') ~!@#$%25%5E&*()%7B%7D%5B%5D=:/,;?+'%22%5C encodeURIComponent('~!@#$%^&*(){}[]=:/,;?+\'"\\') ~!%40%23%24%25%5E%26*()%7B%7D%5B%5D%3D%3A%2F..

[출처] NIHILOGIC 제목: Compression using Canvas and PNG-embedded data 링크: http://blog.nihilogic.dk/2008/05/compression-using-canvas-and-png.html 이 글은 자바스크립트 소스를 Canvas를 이용해 무손실 PNG 파일로 기록함으로서 용량을 대폭 줄이는 방법을 소개하고 있습니다. 기본원리 부분을 인용하면 "For PNG we have two options, 24 bit and 8 bit. Using 24 bit RGB colors, we can store 3 bytes of data per pixel while 8 bit indexed colors only gives us 1 byte per pixel...