CSS는 웹디자인에서 필수적인 웹 프로그래밍 언어입니다. 프로그래밍 언어라고는 했지만 프로그래밍 언어라고 할 수 없을 정도로 간단한 구조의 형태를 이루고 있습니다.
CSS에서 모든 코드의 구조는 위처럼 돼있습니다. 선택자에 대해서 속성과 값을 선언하면 html에 값이 전달돼서 웹페이지 디자인이 만들어지는 것입니다. 그런데 CSS로 코드를 작성하다보면 같은 속성과 값을 반복해야하는 일이 많습니다. 수 많은 웹페이지를 만들다보면 이러한 반복이 무한정 일어나죠. 그래서 이러한 반복적인 일을 단축할 수 없을까 해서 만들어진 것이 프리프로세서입니다. 프리프로세서는 컴퓨터에서 "다른 프로그램에서 사용하기 위한 데이터를 만드는 또다른 프로그램"이라고 정의하고 있습니다(위키백과:a preprocessor is a program that processes its input data to produce output that is used as input to another program).
즉, 실제로 웹에서 필요한 파일은 CSS이고 이 CSS파일을 보다 편하고 체계적으로 만들기 위해서 less, sass/scss, compass와 같은 프로그램을 사용하는데 이러한 프로그램들이 프리프로세서인 것입니다. 이 프로그램에서는 변수(Variables), 함수(Function)같은 것들이 사용됩니다. 하지만 이 또한 간단한 구조라서 CSS를 잘 알면 배우기도 쉽습니다. 프로그래밍에서 변수는 한번 정의하면 여러곳에서 사용될 수 있죠. 예를들면 다음과 같습니다.
@baseColor: #333;
body {
font-family: Helvetica, Arial, sans-serif;
background-color: lighten(@baseColor, 50%);
border: 1px solid darken(@baseColor, 10%);
color: @baseColor;
}
위 코드는 less용 코드입니다. 일반 CSS 코드와 아주 유사하지만 변수 작용을 하는 baseColor: #333;에 @이 삽입됐습니다. 그리고 스타일시트에 이 변수를 여러 곳에 포함시켜 사용할 수 있습니다. 이렇게 선언된 색상을 변경하고자 하면 CSS에서는 여러 곳에서 코드를 변경해줘야하지만 프리프로세서를 사용하면 @baseColor: #333;의 코드만 변경해주면 모든 색상이 적용되겠죠. 그래서 이러한 프로그램들이 아주 편리한 것입니다.
CSS 프리프로세서는 여러 종류가 개발돼서 사용 중에 있으며 가장 많이 사용되는 것이 less, sass/scss입니다. 작년에 트위터의 개발자인 @mdo와 @fat이 부트스트랩을 만들었는데 이것도 less로 만들어진 것입니다. 부트스트랩의 CSS 파일을 보면 수 많은 코드로 이뤄져있는데 이들이 조직적이고 체계적으로 만들어질 수 있었던 것은 less라는 프리프로세서의 힘때문입니다. 부트스트랩이 개발된 이후로 이와 관련된 프로젝트가 수백개 만들어지고 진행되고 있으며 계속 추가되고 있는 상황입니다.
위 사이트를 가보면 238개의 프로젝트가 있지만 제가 아는 것 중에 위 사이트에 포함되지 않은 것도 많습니다.
인기있는 프리프로세서를 몇가지 알아볼 예정인데 우선 가장 인기있는 Less를 설치하고 사용하는 방법에 대해 알아보겠습니다. Less는 기능면에서 다른 프로그램에 비해 활용도가 낮은데 부트스트랩에 사용돼서 그런지 다른 프로그램에 비해서 인기가 높습니다. Less 파일을 CSS 파일로 변경시켜주는 컴파일러는 SimpLESS, Winless, Crunch가 있고 서브라임 텍스트와 노트패드++라는 텍스트 편집기에서도 컴파일이 가능하도록 플러그인이 개발됐습니다. Sass의 경우 ruby installer를 사용해서 프로그램을 설치하고 명령 프롬프트를 이용할 수도 있고 무료 프로그램인 Scout(Cross), 유료인 Compass.app(Cross), Fire.app(Cross), Codekit(Mac), 라는 GUI 프로그램을 사용하면 쉽게 사용할 수 있습니다. 유료가 기능이 더 많습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>less</title>
<link rel="stylesheet/less" type="text/css" href="style.less">
<script src="less-1.3.1.min.js" type="text/javascript"></script>
</head>
<body>
<div>
<header>
<h1>index</h1>
</header>
</div>
</body>
</html>
Less를 사용하는 기본적인 방법은 Less를 가능하게 하는 자바스크립트를 위처럼 삽입하고 스타일시트도 less로 만들어줍니다. 확장자가 less로 돼있고 rel도 stylesheet/less로 정의돼야 합니다. 자바스크립트 라이브러리는 다음의 사이트에서 내려받아 프로젝트 폴더에 넣으면 됩니다.
less-1.3.1.min.js버튼을 클릭하면 다운로드되는 것이 아니라 파일 내용이 웹브라우저에 열리는 경우가 있으므로 오른쪽 마우스 클릭해서 다른 이름으로 링크 저장을 클릭해야하는 수도 있습니다.
스타일시트는 less라는 확장자로 파일을 만들고 다음과 같이 입력합니다.
@baseColor: #333;
body {
font-family: Helvetica, Arial, sans-serif;
background-color: lighten(@baseColor, 50%);
border: 1px solid darken(@baseColor, 10%);
color: @baseColor;
}
현재 대부분의 텍스트 편집기는 less와 같은 새로운 프로그래밍 언어를 지원하지 않고 있어서 less 확장자를 인식하지 못하므로 일반 텍스트로 인식합니다. 그래서 컬러로 나오지 않죠. 하지만 최신 버전의 앱타나 스튜디오는 별도의 플러그인을 설치하지 않아도 컬러 코딩이 되고 에러까지 인식합니다.
자바스크립트를 사용해서 위와같이 less 스타일시트를 직접 사용하는 경우 일반 웹브라우저에서 바로 열면 작동하지 않습니다. 웹서버를 거쳐야하죠. 그래서 wamp 서버를 설치하고 www 폴더에 프로젝트를 만들어야 합니다. 하지만 앱타나 스튜디오는 내장된 웹서버가 있어서 웹브라우저에서 바로 확인할 수 있습니다. 메뉴바 아래에 있는 플래이 아이콘의 삼각형을 클릭하면 몇가지 웹브라우저가 있습니다. Run Configuration을 클릭해서 선호하는 웹브라우저를 설정할 수 있습니다. index.html 파일이 열린 상태에서 세모 아이콘을 클릭하고 메뉴에서 웹브라우저를 클릭하면 웹브라우저에 파일이 열립니다.
less로 만들어진 스타일시트가 자바스크립트에 의해 웹브라우저에서 일반 스타일시트인 CSS로 변환되는 과정을 거쳐서 위와같이 나타납니다. 그런데 실제의 웹사이트에서는 이와같은 과정을 거치면 로딩속도가 느려져서 완전히 로딩될 때까지는 시간이 걸립니다. 그래서 흰색의 화면이 먼저 나오게 됩니다. 이와같은 방법은 실제의 웹사이트에서 사용하지 않고 일반적인 방법은 less 파일을 컴파일해서 CSS 파일로 만들어서 이 스타일시트를 링크해서 사용합니다.
그러면 다음 글에서는 몇가지 컴파일러 사용법을 알아보고 서브라임 텍스트 2 텍스트 편집기에서 less 파일의 코드를 컬러로 인식시키고 이 파일을 CSS 파일로 컴파일하는 플러그인을 설치하는 방법도 알아보겠습니다.
