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에 따라서 화면이 다르게 나올겁니다. 윈도우로 접속하면 윈도우 아이콘이 활성화된 위와같은 화면이 나오고 맥으로 접속하면 사자 아이콘이 활성화돼서 각각의 프로그램을 내려받을..
CSS는 웹디자인에서 필수적인 웹 프로그래밍 언어입니다. 프로그래밍 언어라고는 했지만 프로그래밍 언어라고 할 수 없을 정도로 간단한 구조의 형태를 이루고 있습니다. CSS에서 모든 코드의 구조는 위처럼 돼있습니다. 선택자에 대해서 속성과 값을 선언하면 html에 값이 전달돼서 웹페이지 디자인이 만들어지는 것입니다. 그런데 CSS로 코드를 작성하다보면 같은 속성과 값을 반복해야하는 일이 많습니다. 수 많은 웹페이지를 만들다보면 이러한 반복이 무한정 일어나죠. 그래서 이러한 반복적인 일을 단축할 수 없을까 해서 만들어진 것이 프리프로세서입니다. 프리프로세서는 컴퓨터에서 "다른 프로그램에서 사용하기 위한 데이터를 만드는 또다른 프로그램"이라고 정의하고 있습니다(위키백과:a preprocessor is a pr..