퍼블리셔/Grunt2015.10.02 08:00

postcss less 와 sass 의 시대는 가는것인가? 하도 postcss 의 글이 많아서 테스트 해보았습니다.LESS, SASS, STYLUS 등은 프리프로세서(preprocessor) 라고해서 전처리 언어라고 말합니다. 즉 css 를 만들어 주는 언어입니다.SASS 는 sass, scss 두가지 문법을 지원합니다. 거기에 Compass 를 더하면 더욱 확장성이 좋아져서 잘 이용하곤 하지요. SASS 의 단점은 윈도우에서 사용하는데 있어서 제약이 있거나 속도가 느리다는 겁니다. 윈도우에서 사용하려면 Ruby 는 설치해서 사용하면 됩니다. 루비를 설치하지 않고 사용할 수 있도록 나온것이 libsass 입니다. libsass 는 속도도 개선이 됐다고 합니다.전처리언어중에서 SASS 가 가장 느립니다. ..

퍼블리셔/Git2015.07.10 07:00

Mastering Markdown 마크 다운은 GitHub의 플랫폼에서 작성하는 모든 형태의 스타일링을위한 가볍고 사용하기 쉬운 구문입니다. 학습 내용 : 마크 다운 스타일 공동 편집을 쉽게하는 방법 기존의 마크 다운 포맷 방식과 다릅니다 마크 다운에서 텍스트 서식을 사용하는 방법 GitHub에서 자동으로 마크다운 렌더링을 활용하는 방법 GitHub에서 고유의 마크다운 확장을 적용하는 방법 What is Markdown? 마크다운은 웹에서 텍스트를 스타일링하는 방법입니다. Syntax guide 다음의 구문가이드는 GitHub.com 또는 당신 자신의 텍스트 파일 어디에서나 사용할 수있는 마크다운 문법의 개요입니다. Headers # 이것은

태그입니다 ## 이것은

태그입니다 ######..

퍼블리셔/Git2015.07.09 07:00

Writing on GitHub 깃헙에서의 쓰기는 GitHub Flavored Markdown 를 이용하여 몇가지 추가적인 사항이 있습니다. Markup Newlines 깃헙에서 쓰기의 가장 큰 차이점은 줄바꿈을 처리하는 방식입니다. 의도하지 않은 오류로 인해 같은 단락의 같은 문단은 줄바꿈으로 처리한다고 합니다.(> 저도 잘 이해가 되지 않습니다.) 다음은 하나의 개행문자로 분리된 문구가 포함되어 있습니다. Roses are red Violets are blue Roses are redViolets are blue :question: 이 문장이 이해가 되지 않습니다. 자동으로 개행문자(
) 을 삽입한다는 말 같은데 언제 이걸 삽입하는지 모르겠습니다. 위의 Roses are red 다음에 빈칸 두개..

퍼블리셔/Git2015.07.08 07:00

GitHub Flavored Markdown github 의 마크다운은 기존의 마크다운과 약간 차이점이 있습니다. 깃헙은 GFM 이라는것을 사용하는데요. 몇가지 추가적인 것도 있고, 내용이 변경된것도 있습니다. 기존의 마크 다운과의 차이점 Multiple underscores in words 기존의 마크다운에서 밑줄_ 은 기울임체를 표시하지만 깃헙에서는 무시합니다. do_this_and_do_that_and_another_thing. do_this_and_do_that_and_another_thing. 단어의 일부를 강조하기 위해서는 별표* 를 사용합니다. *test* test URL autolinking GFM 은 표준 url 은 자동링크됩니다. 물론 기존의 링크를 표시하는 방법도 지원합니다. http..

퍼블리셔/Git2015.07.07 07:00

github 과 gitlab 에서 마크다운을 사용하는데 경우의 수가 많아 정리해보았습니다. Markdown Basics Basic writing Paragraphs 기본적으로 단락은 여러줄 사용해도 한줄로 인식합니다. Headings 제목은 # 의 갯수로 표현 # h1 ## h2 ### h3 #### h4 ##### h5 ###### h6 h1 h2 h3 h4 h5 h6 Blockquotes 인용구는 > 를 사용. > 인용구 인용구 Styling text 강조와 기울임체는 * 와 _ 를 사용하는데 한개는 기울임, 두개는 강조를 표현합니다. *This text will be italic* **This text will be bold** _This text will be bold_ __This text wi..

퍼블리셔/SublimeText2015.07.06 13:52

서브라임텍스트 레이아웃, 그룹 활용하기 Sublimetext(서브라임텍스트) 에는 레이아웃과 그룹이라는것이 있습니다. 에디터를 어떤 레이아웃(배치)로 이용할 것인지? 또 몇개의 그룹을 만들고 사용할것인지 알아보겠습니다. 어떤것이 레이아웃인지? 그룹인지 이미지를 통해 먼저 알아보겠습니다. 레이아웃 예제 그룹 예제 레이아웃(배치) 만들기 레이아웃은 총 3열 또는 3행까지 가능하고 그리드형태의 4개가 있는 형태까지만 가능합니다. 단축키 설명 alt+shift+1 1열 배치 alt+shift+2 2열 배치 alt+shift+3 3열 배치 alt+shift+4 4열 배치 alt+shift+5 2열2행 그리드 배치 alt+shift+8 2행 배치 alt+shift+9 3행 배치 그룹 만들기 그룹은 레이아웃과는 약간..

퍼블리셔/Grunt2015.07.05 07:00

9.task 실행. 마지막 단계로 디버깅하기 쉽고, 관리하기 쉽게 task(작업)별로 나누어서 task를 실행하고 관리하는 예제 및 방법입니다. html task html 을 만드는 작업은 htmlhint 와 includes 모듈이 합니다. 이렇게 작업을 묶습니다.Gruntfile.js 에서 사용하는 예제는 아래와 같습니다. // html task grunt.registerTask('html', [ 'htmlhint', 'includes' ] ); css task 마찬가지로 css 를 만드는 작업은 less,csslint,autoprefixer,csscomb,cssmin 모듈이 사용되므로 이렇게 작업을 묶습니다.Gruntfile.js 에서 사용하는 예제는 아래와 같습니다. // css task grunt..

퍼블리셔/Grunt2015.07.04 11:14

load-grunt-tasks load-grunt-tasks 원문글로빙 패턴(globbing patterns) 을 사용하여 여러개의 그런트 작업을 로드합니다.보통은 각 작업을 모두 로드해야 합니다.이 모듈은 package.json 의 dependencies/devDependencies/peerDependencies/optionalDependencies 를 읽고, 제공된 패턴과 일치하는 그런트 작업을 로드합니다. Before grunt.loadNpmTasks('grunt-shell'); grunt.loadNpmTasks('grunt-sass'); grunt.loadNpmTasks('grunt-recess'); grunt.loadNpmTasks('grunt-sizediff'); grunt.loadNpmTas..

퍼블리셔/Grunt2015.07.03 07:00

time-grunt time-grunt 원문그런트 작업의 경과된 시간을 표시합니다. Install npm install --save-dev time-grunt Usage // Gruntfile.js module.exports = function (grunt) { // 이것은 상위에 요구되며, 그런트 인스턴스로 전달한다. require('time-grunt')(grunt); grunt.initConfig(); } Optional callback 선택적 콜밸 타이밍 통계를 수집할 경우, 콜백에 전달합니다. require('time-grunt')(grunt, function (stats, done) { // 원하는대로 통계를 가져온다 uploadReport(stats); // 종료할때 그런트에 알려준다. do..

퍼블리셔/Grunt2015.07.02 07:00

grunt-concurrent grunt-concurrent 원문그런트 작업을 동시에 실행합니다.Coffee 와 Sass 같은 느린작업을 동시에 실행하면 잠재적으로 빌드시간을 크게 향상시킬수 있습니다.nodemon 과 watch 같은 다수의 작업multiple blocking tasks을 실행하고 한번에 관찰하는 경우 이 작업은 유용합니다. Install npm install --save-dev grunt-concurrent Usage require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks 과 같은 겁니다. grunt.initConfig({ concurrent: { target1: ['coffee', 'sass'], t..