demun(대문블로그)

퍼블리셔/도구2015. 11. 17. 07:00

온라인에서 코드를 작성하고 보여주는 사이트는 몇군데 있습니다. 이전에도 비슷한 글을 작성한 적이 있지요.온라인 구문강조 사이트 -> http://demun.tistory.com/2038이번에는 현재 나와있는 사이트중에서 가장 많은 기능을 제공하고 있는 곳입니다. 바로 codepen 입니다. 1. 회원가입http://codepen.io/먼저 회원가입이 안되어 있으시면 우측 상단에 Sign Up 을 통해서 가입하시길 바랍니다.공개하면 무료로 사용할 수 있습니다. 왼쪽 하단에 Free Plan 을 클릭해서 무료로 사용할 수 있습니다. 가입후 로그인을 해야 제가 올린 코드를 쉽게 찾을 수 있습니다. 2. 장점사용시 우측 상단에 New Pen 을 클릭해서 코드를 작성하시면 됩니다.기본적으로 새개의 패널이 열립니다..

퍼블리셔/SublimeText2015. 11. 4. 07:00

서브라임텍스트에서 CoffeeScript 코드를 구문강조 표시하는 방법입니다.ST2, ST3 모두 해당이 됩니다.유독 커피스크립트만 구문강조하는 플러그인이나 기능이 없어서 한참을 찾았는데. 예전에 올렸던 글을 구글링해서 찾았습니다. 이것이 올바르게 구문강조표시하는지는 조금은 의심스럽지만 그래도 안되는것보다는 좋으니 적용해보세요.구문강조한 서브라임텍스트3 입니다. 적용하기 서브라임텍스트2, 서브라임텍스트3 모두 동일합니다.아래의 압축폴더를 푼후 "Packages" 폴더에 넣기만하면 끝입니다. 폴더 위치는 서브라임텍스트 메뉴에서 "Preferences - Browse Packages.." 를 클릭하면 "Packages" 폴더가 열립니다. 원문은 http://www.kaspertidemann.com/addin..

퍼블리셔/Grunt2015. 10. 2. 08:00

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

퍼블리셔/Git2015. 7. 10. 07:00

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

퍼블리셔/Git2015. 7. 9. 07:00

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

퍼블리셔/Git2015. 7. 8. 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. 7. 7. 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. 7. 6. 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. 7. 5. 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. 7. 4. 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..