Frontend Developer를 향해 !

- 프로젝트 구축을 하다보면 html 폼요소를 디자인를 하는 경우가 많아서 정말 애를 많이 먹을때가 있다. - form요소는 css로 디자인을 바꾸는게 한계가 있고 접근성에 위배되기 때문에 기본값으로만 사용하는게 맞다. (참고 : http://naradesign.net/wp/2008/10/11/159/) - 사전에 디자이너한테 말해주는게 제일 좋지만, 그렇지 못하는 경우가 많기때문에 진행을 하게 된다면 아래 사이트를 참고해서 제이쿼리로 해결하는 방법이 있다. 0. all- https://www.psd2html.com/js-custom-forms 1. selectbox- https://github.com/marcj/jquery-selectBox- https://github.com/KennethanCeyer..

- 아래 링크 주소 참고http://www.sitepoint.com/5-jquery-number-animation-plugins/

https://github.com/designmodo/Flat-UI

- Lazy Loading 이란? 이미지와 같이 사이즈가 큰 데이터를 로딩할 때 사용자의 브라우져 화면에 나타나지 않은 이미지까지 로딩을 하면 페이지 로딩이 느려질 수 있습니다. lazy loading은 사용자 브라우져에 보이는 이미지만 로딩하고 다른 이미지들은 사용자가 스크롤 하면서 이미지에 가까워지면 로딩됩니다. - 제이쿼리 플러그인으로 간단히 해결 - documentation : https://github.com/ressio/lazy-load-xt- demo : http://ressio.github.io/lazy-load-xt/

- 즉시실행 함수를 사용하면 안에 있는 함수나 객체 등 멤버들이 비공개가 되는데 이 멤버들을 즉시실행함수 외부에서 참조하기 위한 두 가지 방법을 정리하였습니다. 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..

jQuery.noConflict(); jQuery(function($){ // 여기에 작성한 코드는 브라우저가 HTML을 해석을 마칠 때까지 기다렸다가 실행합니다. }); 1. 다른 자바스크립트 라이브러리와 jQuery를 함께 사용할 우려가 있는 경우 위와 같이 작성합니다. 또 다른 자바스크립트 라이브러리에서도 달러 ‘$’ 기호를 객체로 사용하고 있어 충돌이 날 수 있기 때문입니다. 이렇게 jQuery.noConflict() 라고 시작 부분에 선언하고 jQuery(function(){ … }) 함수 괄호() 안에 ‘$’를 넣어 두면 jQuery(function($){ … }) 안쪽에서는 충돌 없이 안전하게 달러 ‘$’ 기호를 사용할 수 있습니다. 2. 다른 방법으로는 를 선언하고 $ 대신에 변수명으로 사..

- 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);

bxSlider 와 비슷한 기능을 하는 제이쿼리 플러그인. 아래 링크 참조. http://kenwheeler.github.io/slick/?utm_source=jquer.in&utm_medium=website&utm_campaign=content-curation

1. 한페이지 내 여러개를 사용할 수 있다. 2. 한페이지 내 딱 한번 사용할 수 있다. 3. 한페이지 내 여러개를 사용할 수 있다. 4. "한가지 주제로 묶는다." 라는 의미 따라서 section은 자신만의 header footer를 가질 수 있다. 5. 계속 발행되는 부분 배포 목적으로 section태그와 구분 됨. acticle은 자신만의 header footer를 가질 수 있다. 6. 주 내용과 분리된 부가적인 정보나 인용, 광고등의 내용을 담습니다. 7. 주요 네비게이션을 그룹핑. 8. html문서의 의미구조를 보여주는 툴 https://gsnedders.html5.org/outliner/