Less 나 Sass나 어떤 단어의 약자를 의미하지는 않지만 Less는 영어의 "~보다 적다"또는 "덜하다"는 의미로 기존의 CSS 방식의 스타일시트보다 덜 코드를 사용하는데서 연유한 것으로 보입니다. 그래서 Less is More는 Less라는 프리프로세서는 더 많은 일을 할 수 있다는 의미로 사용해서 Less 관련 글들이 이런 타이틀이 있는 것 같습니다. 이 구절은 알아보니 원래 시에서 나왔다고 하네요. 그런 이후로 노래 제목으로도 사용됐습니다. 이번 글은 Less를 사용해서 실제로 웹디자인을 해보겠습니다. 많은 부분을 하지는 못하고 웹디자인에서 가장 복잡하다고 생각되는 수평 메뉴바를 만들 것인데요. 왜 복잡한가 하면 서브 메뉴도 만들고 이 서브메뉴가 3단, 4단, 여러개의 단계에서도 나타나야 하기 ..
서브라임 텍스트 2는 세계적으로 개발자들에게 인기있는 텍스트 에디터입니다. 스킨도 여러 종류가 있어서 선택할 수 있고 개발자들이 많이 사용하고 있어서 그런지 플러그인도 아주 많이 만들어져서 손쉽게 설치해서 사용할 수 있습니다. 현재 베타 개발단계를 벗어나서 정식버전으로 됐지만 아직 무료로 사용할 수 있습니다. 언제 유료로 전환될지는 모르지만 그 전까지는 비등록 버전인 경우 파일을 저장할 때 가끔씩 구매를 유도하는 메시지가 나오기도 합니다. 이전 글에 이어서 서브라임 텍스트 2에 Less 컴파일러 플러그인을 설치해 사용하는 방법을 알아보겠습니다. http://www.sublimetext.com/2 위 링크로 이동해서 파일을 내려받아 설치합니다. 크로스 플랫폼의 텍스트 에디터라서 각 OS 별로 버전이 있습니..
이전 글에서 Less 파일을 컴파일 할 수 있는 SimpLESS와 Winless 프로그램을 알아봤는데 이 프로그램들은 Less 파일을 편집하면 에러를 감지할 수가 없습니다. 그리고 일반 편집기를 사용해야하죠. 크런치(Crunch) 프로그램은 Less나 CSS파일을 편집할 수도 있고 컴파일까지 할 수 있으며 에러 체크도 가능합니다. http://crunchapp.net/ 위 링크를 클릭하면 아래의 화면으로 이동합니다. 다운로드 버튼을 클릭해서 내려받고 설치하면 Adobe Air 기반의 프로그램이라서 Air도 같이 설치됩니다. 이전 글에서 사용한 프로젝트 파일입니다. 크런치에 사용하려면 폴더를 클릭드래그해서 좌측의 빈 공간에 놓으면 폴더가 열립니다. 그림에서 보이듯이 다른 파일은 비활성화돼서 열 수가 없습니..
이전 글에서 CSS 프리프로세서인 Less라는 프로그램을 사용하면 웹브라우저가 인식할 수 있는 CSS 파일을 자바스크립트 라이브러리가 자동으로 만들어줍니다. 대부분의 경우 이러한 방법을 사용하지 않고 less 파일을 CSS 파일로 변환하는 컴파일러를 사용합니다. 그래야 로딩속도가 빨라지기 때문이죠. 이번 글에서는 Less 컴파일러 중 인기가 높은 Simpless와 Winless에 대해 알아보겠습니다. 1. SimpLESS http://wearekiss.com/simpless 위 링크를 클릭해서 다음의 웹사이트로 이동합니다. 사용하는 OS에 따라서 화면이 다르게 나올겁니다. 윈도우로 접속하면 윈도우 아이콘이 활성화된 위와같은 화면이 나오고 맥으로 접속하면 사자 아이콘이 활성화돼서 각각의 프로그램을 내려받을..