Frontend Developer를 향해 !

- 실무에서 가끔 사용할때 가져다가 사용하면 좋을것 같다.https://goo.gl/WMgJT1

- 딘 에드워드의 ie7-js는 자바스크립트 라이브러리로서, 구 버전의 IE에서 HTML5 태그는 물론 일부 CSS3 선택자도 인식하게 해준다. - IE6 이하에서 PNG의 투명효과를 지원하지 않는 문제를 해결한다. - 자식 선택자, 인접 선택자, 구조 선택자, 속성 선택자 등의 css선택자- max-width, min-height를 비롯한 css속성- png 그림 파일의 파일 투명도- 더블마진 버그, 까꿍놀이 버그 같은 흔한 버그를 관련 버그 교정 라이브러리 - 사용법 및 설명 http://webdir.tistory.com/80 https://code.google.com/archive/p/ie7-js/

- 프로젝트시 js 작업을 하다보면 다른 js랑 충돌날 염려가 있기때문에 충돌방지를 위하여 네임스페이스 영역을 정해놓고 퍼블리싱해야 나중에 문제가 생기지 않는다. 아래 블로그 참고 및 아래 코드 참고.- http://jdm.kr/blog/118- http://realmojo.tistory.com/72 var myLib = myLib || (function(){ var y = function(){ console.log('yyyyyyyyyyy'); }; var x = function(){ console.log('xxxxxxxxxxxxx'); }; return { x : x, y : y } })(); myLib.x(); myLib.y(); var myLib = myLib || { x : function(){ ..

- 프로젝트를 하다보면 iframe사용할때가 종종 있습니다. 개발쪽에서 url주소부분을 숨기려고 많이들 쓰는데 웹 접근성 지침중에 탭 키로 순차적 이동이 되어야하는 지침이 있습니다.근데 iframe을 사용하면 이부분이 잘 지켜지지 않을 때도 있어서 그 해결방안을 적어놓으려고 합니다. 1. 웹 접근성을 모르는 개발자분들이 js파일에서 a 요소에다가 'blur()'처리를 하는경우 탭 키가 안먹는 경우가 있습니다. js파일내에 'blur()' 메서드를 삭제 하시면 올바르게 작동하더라구요. 2. 1번사항도 아닐 경우에 해당 iframe요소 안에있는 컨텐츠에 접근을 해서 해결하는 방식을 사용해야 합니다.iframe요소 안에있는 컨텐츠에 접근을하려면 js로 접근을 해야합니다.(로컬에서는 에러가 떠서 확인이 안되니 ..

- 프로젝트를 진행할때 보면 ie7,8이 크로스브라우징이 안되어서 골치 아플때가 많다..- Detectizr.js를 사용해서 해결해도 되지만 Detectizr.js는 modernizr.js가 있어야 작동되므로..- 간단히 ie만 체크해야 할땐 아래 함수를 사용해서 해결하면 도움이 된다.- 사용법은 출처 및 아래 첨부파일 다운 - 출처 : http://blog.grotesq.com/post/478 https://github.com/Unk/IE-Checker (function(){ // 외부 라이브러리와 충돌을 막고자 모듈화. // 브라우저 및 버전을 구하기 위한 변수들. 'use strict'; var agent = navigator.userAgent.toLowerCase(), name = navigato..

- 즉시실행 함수를 사용하면 안에 있는 함수나 객체 등 멤버들이 비공개가 되는데 이 멤버들을 즉시실행함수 외부에서 참조하기 위한 두 가지 방법을 정리하였습니다. 1) // dom helpers var dom = (function(global){ // validate() 헬퍼 함수 | 전달인자 [조건, 오류메시지] // 공개 멤버 function validate(condition, error_msg){ if (condition == undefined || condition == null){ condition = false; console.log(condition); } else if (!condition && condition != 0 && condition != ''){ throw new TypeErro..

- modernizr.js : https://modernizr.com/ 사용자의 브라우저가 html5, css3를 어느정도 지원하는지 체크해 줍니다. (기능 제공은 x) - Detectizr.js : https://github.com/barisaydinoglu/Detectizr 사용자의 디바이스 환경을 체크해줍니다. device device model device orientation screen size operating system operating system version operating system version full browser browser version browser engine browser plugins - 사용법 : http://webdir.tistory.com/82http:/..

스크립트를 작성할때 전역 스코프 내에서 사용을 하게 되면 다른 js와 충돌이 날 확률이 높고 변수명이 같으면 덮어씌워져서 원하는 대로 동작을 하지 않을 경우를 대비하여 함수안에 작성하여 전역과 분리시키는 걸 권장. 예시) (function(global, $){ 'use strict'; })(window, window.jQuery);

ex) - this.style.backgroundColor = '#FE4940'; // 속성 한개씩 밖에 못씀. - this.style.cssText = 'color:#468966; position:absolute; top:0; right:0; z-index:10000;'; // css속성을 여러개 사용가능- cssText 모든브라우저 호환