코드랩 레퍼런스

Sublime Text는 기본 셋팅을 소스를 통해 수정할 수 있습니다. GUI 방식이 아니기 때문에 처음에는 어려울 수 있지만 디테일한 부분까지 설정할 수 있어 전문성이 뛰어납니다. Preferencs > setting Default Uers "font_face": "", 폰트 종류 설정 "font_size": 10, 폰트 사이즈 설정 "font_options": [], 폰트 옵션 설정 "line_numbers": true, 줄 번호 설정 "gutter": true, 기본 간격 설정 "margin": 4, 간격 설정 "fold_buttons": true, 접기 버튼 설정 "fade_fold_buttons": true, 마우스를 올리기 전에 버튼을 감춥니다. "rulers": [], 세로 간격 설정 "sp..

Sublime Text는 코딩, 마크업을 하기 위한 에디터입니다. Sublime Text 의 다양한 기능을 제공하는 플러그인을 알아보겠습니다. 플러그인은 프로그램에 설치하면 바로 사용 할 수 있는 확장기능을 말합니다. Sublime Text 플러그인 Emmet : 복잡한 코드를 간단하게 만들어주는 플러그인 Sftp : 호스팅 서버와 연결해 주는 파일 전송 프로그램 SideBarEnhancements : 사이드바 기능 향상 플러그인 AutoFileName : 자동으로 주변 경로를 불러오는 플러그인입니다. Color Picker : CSS 컬러 색을 편하게 설정할 수 있는 플러그인 AutoPrefixr : 자동으로 벤더프리픽스를 만들어주는 플러그인 Minifier : 코드를 빈칸없이 최소한으로 만들어주는 플..

제이쿼리는 사이트 개발에 필수적인 요소이며, 플러그인 역시 없어서는 안되는 필수적인 요소입니다. 제이쿼리 플러그인은 검색하면 쉽게 구할 수 있지만, 쉽게 구하는 만큼 프로젝트와의 호환성과 품질등을 고려해야 합니다. 그래서 프러그인을 선택할 때 살펴보아야 할 항목을 정리하였습니다. 문서 정리가 깔끔한가? 좋은 플러그인은 그만큼 문서도 보기 좋게 정리가 잘 되어 있다. 보기 좋게 정리되었다는 것은 그 만큼 플러그인 배포에 신경을 쓰고 소스에도 신경을 많이 썼다는 얘기이다. 업데이트는 잘되는가? 좋은 플러그인은 주기적으로 업데이트가 발생하며, 여러가지 문제점이나 호환성을 수시로 신경씁니다. 개발자의 배포 버전 관리가 잘 되어 있다면, 버그나 애로 사항들도 지원을 받을 수 있다는 얘기입니다. 또한 깃허브나 블러..

HTML5 Shiv는 구 브라우저에서 HTML5 태그를 인식시키는 스크립트입니다. HTML5 Shiv https://github.com/aFarkas/html5shiv HTML5 Shiv는 구 버전의 브라우저가 header, nav, aside, nav, section 같은 html5 태그를 인식할 수 있도록 설정해주는 스크립트입니다. 익스플로러 6~8버전은 새로운 HTML5 태그를 인식 할 수 없기 때문에 구조가 깨지는 문제가 생깁니다. 이 문제를 해결하려면 이 스크립트를 연동하면 됩니다. 구 익스플로러에서 생기는 문제이기 때문에 조건식 주석으로 설정해주면 해당 브라우저에서만 다운 받을 수 있게 할 수 있습니다.

Moderniz는 구 버전 브라우저에서 HTML5와 CSS3의 기능을 확인하기 위한 스크립트입니다. Modernizr modernizr.com Moderniz는 구 버전 브라우저에서 HTML5와 CSS3의 기능을 확인하기 위한 스크립트입니다. 브라우저 검사를 통해 HTML 요소에 어떤 기능이 지원이 되는지 확인 할 수 있으며, CSS3를 지원하는 경우와, 지원하지 않는 경우의 CSS작업이 가능합니다. Moderniz 소스를 연동하면 다음과 같이 html 태그 표현 가능한 CSS들이 나열됩니다. 그럼 CSS3의 지원 여부에 따라 다음과 같이 코드를 작성할 수 있습니다. /* background-size 미지원 할 경우 */ background-image: url(../img/img.jpg); backgro..

.scrollTop() 메서드는 선택한 요소의 가로 스크롤 값을 설정하거나 반환합니다. Definition .scrollTop() 메서드는 선택한 요소의 세로 스크롤 값을 설정하거나 반환합니다. Syntax $(selector).scrollTop(); Compatibility 6 7 8 9 10 11 .scrollTop() Sample 선택한 요소의 속성 값을 가져옵니다. offset().left = 0px offset().top = 0px position().left = 0px position().top = 0px scrollLeft = 0px scrollTop = 0px Drag offset().left = 0px offset().top = 0px position().left = 0px positio..