demun(대문블로그)

퍼블리셔/Grunt2015. 6. 13. 07:00

4.css task css 작업인 less , csslint , autoprefixer , csscomb , cssmin 사용방법 및 예제입니다. css 를 만드는 작업입니다. less less 는 css 를 만드는 작업입니다. Gruntfile.js 에서 사용하는 예제는 아래와 같습니다. less: { dist: { options: { banner: '', dumpLineNumbers : 'comments' }, src: 'app/less/style.less', dest: 'app/css/style.css' }, }, 설명 src 는 소스코드의 경로입니다. dest 는 목적지 경로입니다. 즉 src 의 less 파일을 dest 폴더에 css 파일로 만듭니다. 옵션은 그런트에서 지원하는 변수인 를 이용해..

퍼블리셔/Grunt2015. 6. 12. 07:00

htmlhint Rules htmlhint Rules 규칙 Nico Schlömer 는 3월 4일에 개정판 2 페이지를 편집 Standard 표준 tagname-lowercase Level: error 태그 이름은 소문자여야 한다. attr-lowercase Level: error 속성 이름은 소문자여야 한다. attr-value-double-quotes Level: error 속성의 값은 따옴표로 감싸야 한다. attr-value-not-empty Level: warning 속성의 값은 비어있지 않고 설정해야 한다. attr-no-duplication Level: error 속성은 중복되지 않아야 한다. doctype-first Level: error DOCTYPE 먼저 선언해야 한다. tag-pair..

퍼블리셔/Grunt2015. 6. 11. 07:00

grunt-htmlhint grunt-htmlhint 원문 html 을 htmlhint 로 검증합니다. Getting Started 시작하기 이 플러그인은 grunt ~0.4.1 버젼 이상이 필요합니다. Grunt 의 Grunt 시작하기를 확인해야합니다. 이 문서는 Gruntfile을 만들뿐만 아니라 설치하고 Grunt 플러그인을 사용합니다. 이 과정에 익숙하다면, 당신은 다음 명령으로 이 플러그인을 설치할 수 있습니다: npm install grunt-htmlhint --save-dev 플러그인이 설치되면, Gruntfile 내에서 자바스크립트의 코드로 아래의 명령을 사용할 수 있습니다 : grunt.loadNpmTasks('grunt-htmlhint'); The "htmlhint" task Overv..

퍼블리셔/Grunt2015. 6. 10. 07:00

grunt-includes grunt-includes 원문 이 플러그인은 Grunt ~0.4.0 버젼이상이 필요. 파일내에 다른 파일을 포함하는 grunt 작업입니다.(php 포함) 모든 부모와 자식들의 들여 쓰기를 그대로 유지합니다. Getting Started 시작하기 프로젝트의 Gruntfile.js 에 플러그인을 설치합니다. npm install grunt-includes --save-dev 그런다음 프로젝트의 Gruntfile.js 다음줄를 추가합니다. grunt.loadNpmTasks('grunt-includes'); grunt-includes-example 에서 예제를 볼수 있습니다. Options flatten Type: String , Default: false 대상 디렉토리에 있는 모든..

퍼블리셔/Grunt2015. 6. 9. 07:00

3.html task html 작업인 includes , htmlhint 모듈의 사용방법 및 예제입니다. html task 에서는 includes , htmlhint 등의 플러그인을 통해서 html 을 만듭니다. 예제에서 html 을 생성하는 docs 의 폴더구조는 아래와 같습니다. +---docs | +---html | | +---category1 | | | page-01.html | | | page-02.html | | | | | \---category2 | | page-01.html | | page-02.html | | | \---include | | head.html | | js.html | | | \---other | lorem.html | lorem2.html 예제에 사용된 프로젝트 저장소는 ..

퍼블리셔/Grunt2015. 6. 8. 08:00

Grunt 소개 Grunt 홈페이지 Grunt 홈페이지 번역 Grunt 플러그인 저장소 Grunt 가 무엇인가? grunt 는 프로젝트 자동화를 위한 task(작업) 단위로 실행되는 커멘드라인 빌드 툴입니다. 즉 프로젝트 자동화를 쉽게 해주는 프로젝트 관리 도구입니다. 다른 말로 패키지 관리자라고도 합니다. 패키지 관리자에는 Yeoman , Bower , Gulp 도 있습니다. 왜 Grunt 인가? 자동화 패키지 중에서 가장 기본이 되는 도구 입니다. 패키지 관리자인 Yeoman , Bower 등도 Grunt 를 알아야 쉽게 사용할 수 있고, Gulp 도 Grunt 를 알면 쉽게 익힐 수 있습니다. Yeoman 에는 Grunt 와 Bower 가 포함이 되어 있고, Grunt 에는 Bower 를 포함하기도..

퍼블리셔/Grunt2015. 6. 7. 15:46

Grunt 가이드 grunt 가이드 문서는 grunt 를 모르는 사람도 장단점을 알고 따라하면서, 적용할 수 있도록 만들습니다. 총 9개의 문서로 작성되었으며, 각각의 작업마다 옵션 문서를 포함하면 29개 정도의 문서가 되며, 문서는 더 추가될수 있습니다.예제에 사용된 프로젝트 저장소는 grunt-template 입니다.작성자 : demun 목록 grunt 가이드 문서의 차례이며, 목록을 클릭하면 해당 문서로 이동합니다. 01_00_grunt_guide 0200_grunt소개 03_00_html_task 03_01_grunt_includes 03_02_grunt_htmlhint 03_02_grunt_htmlhint_option 04_00_css_task 04_01_grunt_contrib_less 04_..

퍼블리셔/jQuery2015. 5. 22. 09:10

지금에서야 IE6 을 지원하는 레이어팝업이 무슨 소용이 있겠냐만은.....이번 실무가 그렇다보니 어디 좋은게 없나 찾아보다가 적당한것이 있어 알려드립니다. http://swip.codylindley.com/ 에 보시면 popup window 가 있고, DOM window 가 있는것을 알 수 있습니다. popup window 는 일반 윈도우 팝업창을 띄우는것이 DOM window 가 일반 레이어 팝업입니다. 테스트해본결과 이 DOM window 레이어팝업은 IE6에서도 정상작동되는것을 확인 했습니다. http://swip.codylindley.com/DOMWindowDemo.html 에 보시면 팝업에 대한 데모, 옵션 등등을 볼 수 있습니다. 제일먼저 jquery 를 로드하고, jquery.DOMWindo..

퍼블리셔/도구2015. 2. 10. 09:49

CSS 의 전처리 언어는 크게 세가지가 있습니다. LESS, SASS, STYLUS 입니다. 각자의 장점이 있기에 사용을 많이 하는데요. 사용하다보면 각각 변환을 해야할때가 있습니다. 저는 GRUNT 를 사용해서 변환을 하지만 그래도 간단이 변환을 해야할때가 있는데요. LESS 같은 경우는 JS 를 로드해서 변환하기도하고 툴을 이용해서 변환을 하기도 하지만 좀더 편하게 사용할 수 있는 사이트가 있어 알려드립니다.CSS 로 변환하거나 또는 꺼꾸로 LESS, SASS, STYLUS 로 변환을 자유롭게 할 수 있는 사이트 입니다. 해당 사이트는 바로 http://csspre.com/convert 입니다.보시면 대략 아시겠지만 LESS -> SASS 로 변환한다든가 LESS -> STYLUS 로 변환한다든가 하..

일상/뉴스2015. 1. 28. 17:33

아이폰이 상종가다.아이폰6와 아이폰6 플러스가 출시된지 3개월 만에 미국 IT 매체 컬트오브맥은 최근 네덜란드 디자이너 야세르 파라히가 고안한 아이폰7의 콘셉트 디자인이 공개됐다.아이폰7 콘셉트 디자인은 두께 6.1mm로 현재 판매 중인 아이폰6(6.9mm)보다 0.8mm 더 얇으며 베젤의 폭은 더욱 좁다.새롭게 공개된 아이폰7 콘셉트 디자인은 두께 6.1mm로 현재 판매 중인 아이폰6(6.9mm)보다 0.8mm 더 얇다. 번 아이폰7의 가장 큰 특징은 무선 충전이다. 아이폰6 역시 출시 전에는 무선 충전 기능을 채택할지를 두고 소문이 있었지만, 실현되지는 않았다. 야세르 파라히는 자신의 콘셉트 디자인에서 아이폰7이 무선 충전에 대응할 솔루션을 제안하고 있다야세르 파라히는 “내가 제안하는 아이폰7의 디자..