본문 바로가기
728x90
반응형

전체 글158

티스토리 소스 표시 이쁘게 하기(Syntax Highlighter) TStory 블로그 작성을 시작하다 소스 코드가 보기 쉽게 표시 될 수 있는 방법이 필요했다. 소스 입력기? 소스 편집기? 코드 입력기? 뭐 이런걸 발견했다. 먼저 Syntax Highlighter 설치 방법과 적용 방법을 천천히 따라해 보자. 1. Syntax Highlighter 다운받기 파일은 최신 파일을 받아서 사용할 수도 있지만 3.0.83버전을 사용하자. (별 차이가 없다) GitHub에서 최신 버전을 받아 사용하려고 했다가 SASS 파일을 CSS 파일로 컴파일 해야 되는 상황이 발생되었다. 최신 파일을 받아 컴파일해서 사용하려면 아래 글을 참고 해야 될 것이다.SASS 파일을 CSS 파일로 컴파일 : http://startup-blog.tistory.com/5 다운로드는 아래 경로를 참고 하.. 2017. 5. 28.
NPM에서 SASS(scss) 파일을 CSS로 컴파일(node-sass) NPM에서 SASS(scss) 파일을 CSS로 컴파일(node-sass) SASS 파일을 CSS 로 컴파일 하는 방법 중 Ruby를 사용하는 방법과 NPM을 사용하는 방법이 있는거 같다. 둘다 SASS 컴파일러를 다운받기 위한 방법인거 같다. GitHub에서 오픈 소스를 받아서 사용하려고 했지만 css 파일을 원했는데 sass 란 파일이 있어서 당황스러웠다. sass 파일부터 무엇인지 조사를 하게 되었고 css 파일로 컴파일이 가능한 언어인것을 알게 되었다. sass 파일을 css 컴파일 하는 방법을 조사하니 Ruby 라는 것과 NPM 이라는 것이 나왔는데.... 뭔가 계속 새로운 것을 배우고 있다. Ruby를 사용해서 컴파일 하는 방법은 관련글을 작성했고 이번에는 NPM 에서 관련 모듈을 다운받아 컴파.. 2017. 5. 28.
Ruby를 이용한 SASS 설치 (SCSS to CSS 변환) SASS는 CSS 속성(margin, padding, color등등)의 '값'을 자바스크립트의 변수 처럼 활용한다. 변수처럼 활용한다는 것은 반복적인 작업을 간소화 시켜준다는 점이다. 예를 들어 다음과 같이 똑같은 스타일이 다른 영역에 반복적으로 사용된다면... .btn{ margin-left: 10px; color: #ffddff; position: relative; } .list{ margin-left: 10px; color: #ffddff; position: relative; } .box{ margin-left: 10px; color: #ffddff; position: relative; } 다음과 같이 사용하면 작업이 간소화 될것이다. @mixin 변수명{ margin-left: 10px; colo.. 2017. 5. 28.
Node.js 그리고 NPM GitHub에서 소스를 다운 받았는데 사용하려니 npm 설치가 필요하다. NPM에 대해 알아보니 Node.js 라는것이 나온다. 쉽게 오픈소스 받아서 적용하려고 한건데.. 뭔가 일이 커지고 있다. * Node.js 와 NPM NPM은 Node.js에서 사용되는 모듈을 패키지로 모아 놓은 것이다. Node.js는 JavaScript로 개발이 가능하기 때문에 새로운 언어를 배워야 하는 부담이 적다. 하지만, 우리가 흔히 알고 있는 JavaScript로 모든것을 개발할 수 있냐면 그렇지 않다. 예를 들어 파일에 접근하려면 기존의 JavaScriptㅇ로는 힘들다. 다른 방법이 있겠지만, JavaScript 만으로는 거의 불가능하다. 그것을 해결하기 위해서는 JQuery나 PHP 등을 사용할수 있다. 위와 같이 .. 2017. 5. 28.
728x90

티스토리툴바