코드랩 레퍼런스

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..

개념적인 요소들은 검색해 보면 나오니까 생략할께요^^ 반응형 디자인 3요소만 확인하면 그리드 레이아웃, 가변형 이미지, 미디어쿼리입니다. 스프라이트 이미지 기법은 여기를 참고해주세요 http://darum.daum.net/convention/image 기술적인 질문 1. display:inline 과 display:block의 차이점이 무엇인가요? display:inline은 텍스트 요소를 말하여 display:block은 박스 영역을 의미합니다. 참고 : http://coderap.tistory.com/303 2. dl,dd가 무엇인가요? ul, li 는 목록형 태그를 의미하며, dl은 설명형 목록 태그를 의미합니다. dd은 설명형 목록 태그의 목록 요소를 의미합니다. 참고 : http://codera..

마인드 맵은 아이디어를 시각화하고 개발에 도움을 주는 도구입니다. 마인드마이스터(MindMeister) www.mindmeister.com MindMeister는 아이디어를 시작적으로 구성, 개발하고 공유할 수 있는 온라인 마인드맵 도구입니다. MindMeister 모바일 앱에서도 작동이 되며, 여러가지 테마를 선택하여 작업할 수 있습니다. 마인드 맵을 공유하고, 프레젠테이션 기능도 할 수 있습니다. 코글(Coggle) http://coggle.it Coggle도 브라우저 기반의 마인드맵 도구입니다. 필기와 메모가 가능하며, 모든 사람들이 공유 할 수 있습니다. 사진을 추가하고 히스토리를 이용할 수 있으며, 이메일을 추가하여 알람을 받을 수 있으며, 프리젠텐이션이 가능합니다.

Emmet은 코딩을 빠르고 쉽게 만들어 주는 초고속 코딩 도구입니다. 예전에 젠 코딩이라는 이름으로 많은 인기를 끌었으며 현재는 Emmet으로 변경되어 지금까지 사용하고 있습니다. 축약어 Abbreviations 다음과 같이 축약어를 적고, tab 또는 Ctrl + E를 누르면 변환이 됩니다. doc doc4 !!! !!!xt !!!xs html:5 or ! nav>ul>li>a>img div+p+div div>ul>li*4^^+p+div (div>ul>li*4)+p+span #wrap>#header+#nav+#sidebar+#contents+#footer #link>a[href="#" target="_blank"]*10 ul[id="ul" class="ul"]>li*8 ul#ul.ul>li*8 ul#u..

Sublime Text는 코딩, 마크업을 하기 위한 에디터입니다. 인터페이스 및 사용 호환성이 좋아 요즘 많이 사용하고 있는 에디터 중에 하나입니다. 윈도우 및 맥에서 사용이 가능하며, 사용하기 전에 몇 가지 셋팅이 필요합니다. Setting 서브라임 설치는 다운받아서 설치합니다. sublimetext.com 기본 서브라임만 설치된 상태이기 때문에 필요한 기능을 설치하려면 Package Control를 설치해야 합니다. Package Control View > Show Console를 클릭합니다. Package Control 소스를 복사하여 Console 붙여넣기 합니다. Preference에 Package Control이 있다면 설치가 완료된 것입니다. Sidebar Enhancements Sideba..