web sprit

오늘은 Compass 설치에 대해 정리해 봅니다.요전에 말했듯이 Compass는 Ruby 기반으로 작동하기 때문에 Ruby를 꼭 설치 하셔야 합니다.참고 : http://kcmschool.xyz/39 Ruby를 설치하셧다면 본격적으로 Compass를 설치해 보겠습니다.맥이라면 터미널로 윈도우 사용자라면 command를 이용하여 설치하면 됩니다.다음과 같이 작성해서 실행해 주세요~ gem install compass 그럼 무언가 설치하는 코드가 나오면서 설치가 완료 됩니다. 설치가 잘되었는지 확인해 보려면 버전체크를 한번 해보시길 바랍니다.버전정보를 확인하려면 아래와같이 작성해서 실행하세요. compass -v 자 매우 간단하게 CSS Framework 인 Compass 를 설치해 보았습니다.비록 간단하고..

Compass 는 CSS 를 편리하고쉽게 개발할 수 있게 만들어 주는 CSS Framework 입니다.SASS를 사용하며 , Ruby 기반으로 Ruby를 설치해줘야 합니다.http://kcmschool.xyz/39 위 URL을 참고하면 Ruby 설치방법을 참고 할 수 있습니다. 기존 SASS를 사용하여 Compile 하였다면 Compass는 SASS 보다 간결하고 간단한 방법으로 Compile 이 가능하다. 앞으로 실무에서 사용하며 간간히 사용법이나 Tip을 정리할 생각입니다.이 글이 도움이 되시거나 잘못된 부분이 있으면 댓글 부탁드립니다. ^^

1. 설치https://nodejs.org/위 url을 클릭하여 node JS 사이트에 접속합니다.아래와 같은 화면을 맞이 하게 될텐데요. 영어라 당황하지 마시고 설명 드리겠습니다.우선 중앙의 다운받을 수 있는 녹색 버튼이 2개가 존재 하네요.제 컴이 64bit 인줄 알고 들어올때 부터 맞춰 주나 봅니다. 우선 두개의 버튼 중 왼쪽의 버튼(v6.9.2 LTS)를 권장 합니다. 오른쪽의 버튼은 최신 기술이라 아직 test 기간이라고 보시면 됩니다. 임상실험(?) 이 끝난 이전 하위버전으로 다운받기를 권합니다. 벌써 6.9.2 버전 이군요. 다른 방법으로 다운받으시려면 상단 메뉴에서 DOWNLOADS 버튼을 누릅니다. 들어가면여러가지에 OS 나 버전에 맞는 node JS 를 다운 받으실 수 있습니다.저는 W..

어떠한 폴더를 삭제하려고 휴지통에 넣어 삭제하려는데.. "폴더에 이름이 너무 길어서 휴지통에 넣을 수 없는 항목이 있습니다." 또는 "원본 파일 이름이 파일 시스템에서 지원하는 길이보다 깁니다." 라는 경고 문구가 나오면서 완전 삭제가 불능한 경우를 맞이 하고 말았습니다. 혹여나 재부팅하면 삭제할 수 있으려니 하고 재부팅 후 삭제하려 하는데... 으악~!!!!!!!!!!!! 절대 삭제가 안되네요~ 이를 어쩐다. 이럴땐 구글신의 힘을 빌렸습니다. 다시 까먹지 않으려 또 정리합니다. ^^ 제가 공부하는 프로젝트 자동생성. 자동 디렉토리를 만들어주는 Yeoman 이라는 Front 도구를 사용하다 이런 일이 발생했습니다. 저처럼 고생하지마시고 이 글을 보고 바로 해결하시기 바랍니다. 우선 node.js 가 깔려..

SASS를 사용하기 위해 SASS에 문법에 대해 알아보도록 하죠. * SASS는 마크업에서만 사용되는 언어로서 공유나 실서비스에 표출되는 것이 아니기 때문에 파일을 여러개 나누어 Import해도 되며, 변수명도 축약어로 사용하지 않아도 됩니다. 1. compail 만약 SCSS 를 작성하였다면 CSS파일로 변환(Compile)해 주어야 합니다. CMD창을 scss파일이 있는 폴더에서 열어 아래와 같이 명령어를 작성해 주어야 하는데 방법은 여러가지 입니다. 기본방식 - 작성후 한번만 Compile 해줍니다.123 sass (작성된)파일명.scss (변환될)파일명.css Colored by Color Scriptercs 우리는 더욱 간편한 css 작성을 위해 scss 사용하는것인데 scss 작성 후 저장할때..

SASS는 Ruby라는 프로그래밍 언어로 만들어졌습니다. 그래서 Ruby를 설치하여 SASS를 사용할 수 있습니다. 그럼 Ruby를 설치해 보겠습니다. 먼저 http://rubyinstaller.org/downloads/ 위 URL로 접속합니다. 그럼 아래와 같은 화면이 나옵니다. 현재 루비 버전은 Ruby 2.2.4 이네요. 전 Window10 64bit를 사용 중이니 최신버젼의 64를 다운 받았습니다. 자 그럼 설치를 진행해 보도록 하겠습니다. 설치를 진행시 아래와 같은 화면이 나오는데요. "Add Ruby executables to your PATH "부분에 체크를 꼭 해주셔야 합니다. 체크를 해주어야 설치가 끝난 후 따로 PATH 설정을 할 필요없이 수고를 덜어 줍니다. 설치가 끝나면 Ruby가 ..

홈페이지의 구도를 잡아주며 디자인 요소는 적용해주는 CSS는 때로는 중복되는 작업이나 자주 쓰이는 속성으로 인하여 지저분한 소스코드나 관리하기 힘든 일이 발생하곤 합니다. SASS를 이용하면 이런 CSS를 보다 간결하고 동적으로 적용할 수 있있습니다. 코드의 재활용성이 높고 그 만큼 코드의 양을 줄여주기 떄문에 작업면이나 소스면이나 매우 효율적으로 제공됩니다. 재활용이나 코드를 어떻게 줄일 수 있을까요? SASS는 SASS나름데로의 문법이 있습니다. 제가 처음 알아본 SASS는 개발문법과 비슷하다고나 할까요? 자바스크립트를 어느정도 하실 줄 아신다면 그리 어렵지 않게 내용을 파악하실 수 있다고 생각합니다. SASS는 자체로는 사용할 수 없으며 SASS파일을 만들면 컨버터를 이용해서 CSS를 생성한다. 만..