Web (6) 썸네일형 리스트형 동적 스타일 시트 ㅣ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) .. CSS display 속성 예제 CSS Display Properties inline block none inline-block 하늘에 계신 우리아버지 아버지의 이름이 거룩히 빛 나시며 아버지의 나라가 오시며 아버지의 뜻이 하늘에서와 같이 땅에서도 이루어 지소서 오늘 저희에게 일용한 양식을 주시고 저희에게 잘못한 이를 저희가 용서 하오니 저희 죄를 용서하시고 저희를 유혹에 빠지지 않게 하시고 악에서 구하소서 아멘 CSS display 속성 예제 - 특히 inline 과 inline-block 속성 비교!!! 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 다음
