Web/Javascript (5) 썸네일형 리스트형 동적 스타일 시트 ㅣink 삽입 css 링크를 스크립트를 활용하여 동적으로 설정할 수 있다. // 링크 객체 생성 var cssNode = document.createElement("link"); cssNode.type = "text/css"; cssNode.rel = "stylesheet"; // 스타일 시트 파일 경로 설정 cssNode.href = "test.css"; cssNode.id = "dynamicLink"; // 생성 링크 head 태그에 삽입 document.head.appendChild(cssNode); 동적 HTML 삽입 스크립트를 사용하여 동적으로 HTML을 삽입할 수 있다. HTML을 삽입하고자하는 HTML노드를 query를 활용하여 얻고 DOM 스크립트 및 JQuery를 사용하여 작업을 수행한다. HTML을 삽입하고 자하는 html node를 얻기위해서는 query를 작성해야 하는데 DOM과 jquery 모두 비슷하게 작성한다. jquery : $("div[data-bind=d01] div article"); DOM: document.querySelector("div[data-binding='do1'] div article"); 위 예에서 쿼리는 다음과 같이 해석된다. 1. 속성이 "data-bind"이고 값이 "do1"인 div 를 찾고 2. 그 자식 중 div 노드를 찾고 3. 또 그자식 중 article 노드를.. 동적 스타일 적용 및 해제 스크립트로 동적으로 스타일을 적용하거나 해제할 수 있다. // 동적 스타일 설정 function applyDynamicStyle() { var sheet = document.createElement('style'); sheet.id = "style_target1"; // 아이디 설정 // 스타일 설정 sheet.innerHTML = "button#target1{border:2px solid black; background-color:blue;}"; document.head.appendChild(sheet); } // 스타일 제거 function removeStyle() { var sheet1 = document.getElementById("style_target1"); if(sheet1 != null) .. IE 에서 window.getSelection() 실행 되지 않을 때~ function test() { if (window.getSelection) { // all browsers, except IE before version 9 if (document.activeElement && (document.activeElement.tagName.toLowerCase() == "textarea" || document.activeElement.tagName.toLowerCase() == "input")) { var text = document.activeElement.value; selectedText = text.substring(document.activeElement.selectionStart, document.activeElement.selectionEnd); } else {.. Grunt 설치 및 js파일 통합 프로젝트 중간발표가 있어 자바스크립트 part에 지원을 하게 되었다. 지원 내용은 Grunt로 자바스크립트 파일 통합!덕분에 Grunt라는 걸 처음 접해보고 대충은 어떻게 사용하지 알게 되었다. 웹 프로젝트를 진행하면 사용되는 자바스크립 모듈을 여러 파일로 따로 따로 구분하여 저장하는데 프로젝트가 종료되고 배포할 때쯤 이 분리된 자바스크립을 통합하여 하나의 파일에 통합하여 배포하곤 한다. (실제로 난 자바스크립 개발자가 아니어서 .... 다들 그렇게 한다고 말한다) 그래서 자바스크립 파일들을 통합해주는 작업을 수행해야하는데 한두개 정보의 파일만이 존재한다면 별문제 없겠지만 수십개의 파일로 구성된 프로젝트라면 통합작업이 여간 번거러운 작업이 아닐 것이다.그래서 이 Grunt를 사용하여 통합작업을 보다 손쉽.. 이전 1 다음
