Dreamweaver의 CSS 프리프로세서 사용

CSS는 HTML 문서의 스타일을 설명하는 언어입니다. CSS 프리프로세서는 전처리된 언어로 작성된 코드를 가장 익숙한 CSS로 컴파일합니다. 전처리된 언어는 CSS를 프로그래밍 언어에 가까운 수준으로 올립니다.

특히 프리프로세서를 통해 CSS에서 불가능한 변수, 조합, 기능 및 기타 다양한 기술을 사용할 수 있습니다.
CSS 프리프로세서를 사용해 모든 것을 한 번에 정의하고 반복해서 재사용할 수 있어 CSS를 유지 관리하고 확장할 수 있게 됩니다.

CSS 프리프로세서를 사용하면 보다 명확하고 관리하기 쉬운 CSS를 생성할 수 있습니다. CSS 파일을 참조하는 웹 사이트를 만드는 경우 Sass나 Compass와 같은 CSS 프리프로세서를 사용하면 수동 코딩과 복사/붙여넣기 작업에 소요되는 시간을 단축할 수 있습니다.

Dreamweaver는 내장된 Ruby-Saas 컴파일러를 사용하여 SCSS, LESS 파일을 컴파일합니다. Dreamweaver는 또한 Sass 파일을 컴파일하기 위해 Compass 및 Bourbon 프레임워크를 지원합니다. 

LESS는 JavaScript 기반인 반면 Sass는 Ruby 기반입니다. 그러나 이들 언어에 대해 완벽하게 알고 있어야 할 필요는 없습니다. 또한 파일을 CSS로 컴파일하기 위해 명령줄을 사용하지 않아도 됩니다. Dreamweaver에서는 이러한 파일을 로드하거나 편집하거나 저장할 때 less.js JavaScript 라이브러리를 사용하여 이러한 파일을 CSS로 자동 컴파일합니다

지원되는 버전:

• Sass: 3.4.25
• LESS: 2.7.2
• Compass: 1.0.3
• Bourbon: 4.2.6
• Bourbon Neat: 1.7.3
• Bourbon Bitters: 1.2.0

Dreamweaver에서 CSS 프리프로세서를 처리하는 방법은 사이트 정의 여부에 따라 다릅니다. 사이트를 정의하면 CSS 프리프로세서 환경 설정을 지정할 수 있으며 Dreamweaver 내에서 Compass 및 Bourbon 프레임워크도 사용할 수 있습니다.

사이트를 정의할 때 사이트 특정 CSS 프리프로세서 환경 설정을 지정하여 Dreamweaver 내의 CSS 프리프로세서 작업 방법을 사용자 정의할 수 있습니다. 사이트 특정 CSS 프리프로세서 환경 설정을 지정하면 사이트를 기반으로 컴파일 옵션을 지정할 수 있습니다. 또한 Sass 및 CSS 파일의 위치와 각 사이트 특정 프리프로세서 옵션을 사용자 정의할 수 있습니다.

이어지는 섹션에서 CSS 프리프로세서와 함께 Dreamweaver를 사용하는 방법에 대해 살펴보십시오.

Dreamweaver 2017 및 CSS 프리프로세서

Dreamweaver 2017에서는 CSS 프리프로세서 지원이 Dreamweaver에 내장되어 있습니다. 즉, Dreamweaver 내에서 Sass/LESS/SCSS 파일을 사용하여 작업할 수 있습니다. 간단히 Ctrl+S 또는 Cmd+S 단축키를 누르면 Dreamweaver에서 CSS가 자동으로 컴파일됩니다. 도구 > 컴파일(또는 F9) 메뉴를 사용하여 개별 CSS 파일을 수동으로 컴파일할 수도 있습니다. 변경 내용은 컴파일된 CSS가 연결되거나 첨부된 모든 열려 있는 HTML 파일에서도 반영됩니다.

다음은 CSS 프리프로세서를 사용하는 작업과 관련된 고급 워크플로입니다.

• Dreamweaver 내에서 Compass 또는 Bourbon을 사용하려면 적절한 컴파일러를 설치하십시오. 설치는 한 번의 클릭으로 간단히 진행됩니다. CSS 프리프로세서 설정을 지정합니다.

프레임워크 파일(Bourbon)의 사본이 필요하거나 기본 Sass 파일 및 Ruby 기반 구성 파일(Compass)을 생성하려는 경우에만 컴파일러를 설치하십시오. 프레임워크 파일의 사본을 보관해 두는 것이 좋습니다. 제작 프레임워크의 특정 혼합 또는 기능이 이후 버전에서 제거되는 경우에도 여전히 사이트 내에서 프리프로세서 파일에 액세스할 수 있습니다.

• 자동 컴파일이 활성화되었는지 확인하십시오. 그런 다음 저장을 눌러 CSS 파일을 업데이트합니다.
• (선택 사항) 생성된 CSS가 사용되는 모든 HTML 페이지에서 라이브 뷰 또는 실시간 미리보기 모드로 반영된 변경 내용을 확인합니다.

Dreamweaver 2015 및 CSS 프리프로세서

Dreamweaver 2015 및 이전 CC 버전에서도 Dreamweaver에서 Sass, LESS 및 SCSS 파일을 사용할 수 있었습니다. 단, 이들 파일을 Dreamweaver 애플리케이션 외부에서 직접 컴파일해야 했습니다.
작업 과정은 다음 단계와 유사합니다.

1. 컴파일러를 다운로드하고 설치합니다.
2. 컴파일러가 Sass/LESS/SCSS 파일을 읽을 수 있도록 Grunt(Gruntfile.js) 작업을 설정합니다.
3. 이후 Dreamweaver로 가져올 CSS로 파일을 컴파일하기 위한 기타 Grunt 작업을 설정합니다.

Sass/LESS/SCSS 파일을 변경할 때마다 이러한 단계를 수행해야 합니다.

사이트가 정의되어 있지 않으면 Sass 및 LESS 파일을 수동으로 컴파일할 수도 있습니다. 단, Compass 및 Bourbon 프레임워크는 지원되지 않습니다.

Dreamweaver에서의 CSS 프리프로세서 사용 방법

다음은 CSS 프리프로세서를 사용하는 작업과 관련된 고급 워크플로입니다.

1. Dreamweaver에서 사이트를 정의합니다. 컴파일하려는 Sass 또는 LESS 파일이 사이트 루트 폴더에 포함되어 있는지 확인하십시오. 사이트를 이미 정의하고 Sass/LESS 파일이 사이트 루트에 포함되어 있는 경우 다음 단계로 진행합니다. Dreamweaver 사이트 설정에 대한 자세한 내용은 Dreamweaver 정보 사이트를 참조하십시오.
2. CSS 프리프로세서에 대한 환경 설정(생성된 CSS 파일의 위치 정의 등)을 지정합니다. 이는 사이트 특정 환경 설정입니다. 자세한 내용은 사이트별 CSS 프리프로세서 환경 설정을 참조하십시오.
3. Compass 또는 Bourbon 등 특정 프레임워크를 사용하려는 경우 해당 프레임워크에 대한 설정을 지정할 수 있습니다. 자세한 내용은 Compass 프레임워크 사용 또는 Bourbon 프레임워크 사용을 참조하십시오.
4. 자동 컴파일을 설정하거나 Sass 및 LESS 파일을 수동으로 컴파일합니다. 자세한 내용은 CSS 프리프로세서 파일 컴파일을 참조하십시오.

CSS 프리프로세서에 대한 환경 설정

사이트 > 사이트 관리 대화 상자를 사용하여 CSS 프리프로세서에 대한 사이트 특정 환경 설정을 지정할 수 있습니다.

CSS 프리프로세서 사이트 특정 환경 설정을 유지함으로써 사이트를 기반으로 CSS 프리프로세서를 관리할 수 있습니다. 또한 이 작업을 통해 사이트를 전환할 때마다 환경 설정을 업데이트할 필요 없이 각 사이트의 CSS 프리프로세서를 제어할 수 있습니다.

일반적인 CSS 프리프로세서 설정

사이트 > 사이트 관리 > CSS 프리프로세서 대화 상자에서 다음과 같은 일반적인 CSS 프리프로세서 설정을 지정할 수 있습니다. 기본적으로 이들 설정은 Saas 프레임워크에 적용됩니다.

CSS 프리프로세서의 자동 컴파일을 활성화하려면 이 체크 상자를 선택합니다. 이 옵션을 선택하면 Sass, LESS 또는 SCSS 파일을 저장할 때 Dreamweaver가 자동으로 CSS 파일을 생성합니다. 이 옵션을 선택 해제하면 변경 내용을 적용할 때마다 파일을 수동으로 컴파일해야 합니다.

LESS 옵션

괄호에 있는 수학식만을 처리합니다. 예를 들어 “(100px/25px)”은 제대로 처리되지만 “20% + 10%”(괄호 없음)는 처리되지 않습니다. 이 옵션이 비활성화되면 파일의 모든 수학식이 처리됩니다.

이 옵션을 사용하지 않으면 수학식을 처리할 때 LESS가 출력 단위를 예측하게 됩니다. 예:

이 경우 길이로 곱해진 길이가 영역을 부여하지만 CSS는 지정 영역을 지원하지 않습니다. Dreamweaver는 사용자가 값 중 하나를 값으로 정했으며 이 값이 길이 단위가 아니라고 가정하게 됩니다.

Strict 단위가 켜진 상태에서 Dreamweaver는 연산 오류라고 판단하고 오류 메시지를 표시합니다.

이 옵션을 사용하여 URL이 생성된 파일과 항상 연계되도록 생성된 CSS 파일의 URL을 다시 작성할 수 있습니다. 

소스 맵을 만듭니다. 소스 맵은 Sass 및 LESS와 같은 고급 언어와 CSS와 같이 컴파일되는 하위 수준 언어 사이의 격차를 해소해 주는 파일입니다.

Sass/SCSS 옵션

CSS 출력 파일의 스타일을 지정합니다.

• 중첩 - 잘 알려진 모듈의 구조로 컴파일된 CSS 서식을 지정합니다.
• 축소- 중첩되거나 확장하는 것보다 적은 공백을 사용할 압축 구조의 컴파일된 CSS를 지정합니다.
• 압축 - 단일 구조로 CSS를 출력합니다.
• 확장 - 각 속성 및 한 줄로 구성되는 규칙을 사용해 확장 방법으로 CSS를 출력합니다. 속성은 규칙 내에 들여쓰기되지만 규칙은 어떠한 방식으로든 들여쓰기되지 않습니다.

출력 CSS 파일의 CSS 코드가 생성된 줄에 이를 매핑하는 주석을 생성합니다.

소스 맵(Sass 및 LESS와 같은 고급 언어 사이의 격차를 해소해주는 파일, CSS 등 컴파일되는 하위 수준 언어)을 만듭니다. 

CSS 소스 및 출력 환경 설정

생성된 CSS 파일을 배치해야 하는 위치와 경로의 Sass/LESS를 외부 편집기로 수정했을 때 Dreamweaver가 자동 컴파일을 확인하고 트리거해야 하는 경로를 정의할 수 있습니다.

사이트 > 사이트 관리 대화 상자에서 다음 소스 및 출력 CSS 프리프로세서 설정을 지정할 수 있습니다.

CSS 출력

생성된 CSS 출력 파일의 위치를 지정합니다.

생성된 CSS 파일을 소스 Sass 및 LESS 파일과 동일한 폴더에 저장하려면 이 옵션을 선택합니다.

이 옵션을 선택하여 생성된 CSS 파일을 저장할 폴더를 지정합니다.

이 옵션을 사용하면 시작과 끝 문자열을 사용하여 경로 일부를 바꿀 수 있습니다. 예를 들어 시작: scss, 끝: css 설정에서 출력 파일은 경로 css의 SCSS를 바꾼 후 동일한 트리 구조 안에 배치됩니다.

감시가 필요한 사이트 루트 내의 하위 폴더를 지정합니다. 일반적으로 이 하위 폴더에는 모든 SCSS 또는 LESS 파일이 포함되어 있습니다.

일반 설정에서 컴파일을 활성화한 경우 Dreamweaver는 자동으로 CSS 프리프로세서를 트리거합니다. 폴더 내의 파일이 외부적으로, 또는 Dreamweaver 내에서 수정되면 Dreamweaver가 자동 컴파일을 트리거합니다.

Compass 프레임워크 사용

Compass는 Sass를 사용하여 CSS3 스타일을 제작할 수 있도록 해 주는 오픈 소스 CSS 제작 프레임워크입니다.

Dreamweaver는 Compass 지원 기능을 제공합니다. Compass를 사용하여 스타일 시트를 만드는 경우 이 스타일 시트를 컴파일하고 Dreamweaver 내에서 CSS 파일을 생성할 수 있습니다.

Bourbon 프레임워크 사용

Dreamweaver는 Bourbon 제품군을 지원합니다. Bourbon을 사용해 스타일 시트를 만드는 경우, 이 스타일 시트를 컴파일하고 Dreamweaver 내에서 CSS 파일을 생성할 수 있습니다.

다음의 Bourbon 스타일이 지원됩니다.

• Bourbon - Sass에 대한 간단하고 가벼운 혼합 라이브러리
• Bourbon Neat - Sass 및 Bourbon에 대한 단순한 시맨틱 그리드 프레임워크
• Bourbon Bitters - Bourbon 프로젝트용 스캐폴드 스타일, 변수 및 구조

코드에서 다음 중 하나를 추가하여 Bourbon 프레임워크를 가져올 수 있습니다.

• @import “bourbon” - Bourbon 가져오기
• @import “neat” – Bourbon Neat 가져오기
• @import “base” – Bourbon Bitter 가져오기

그런 다음 Dreamweaver는 프리프로세서 파일을 컴파일하여 Bourbon의 패키지 버전을 사용합니다.

또는 Dreamweaver에 대한 추가 업데이트가 컴파일 워크플로에 영향을 주지 않도록 Bourbon 프레임워크 파일을 사이트에 설치할 수 있습니다. Bourbon 프레임워크 파일이 내 사이트로 복사됩니다. Bourbon은 프레임워크를 가져오는 파일에 대해 컴파일을 트리거할 때 사용되는 프레임워크입니다.

Bourbon, Bourbon Neat 또는 Bourbon Bitters 파일 설치

Bourbon 또는 해당 스타일을 설정하려면:

CSS 프리프로세서 파일 컴파일

다음 방법 중 하나를 사용하여 CSS 프리프로세서 파일을 컴파일할 수 있습니다.

• CSS 프리프로세서 파일의 자동 컴파일 설정
• 수동으로 CSS 프리프로세서 파일 컴파일

CSS 프리프로세서 파일의 자동 컴파일 설정

Sass 또는 LESS 파일에서 완료된 변경 사항을 이에 상응하는 CSS로 자동 컴파일하려면 Dreamweaver에서 옵션을 설정할 수 있습니다. 생성된 CSS를 저장하려는 (사이트 루트 내) 위치를 지정할 수 있습니다.

정상적으로 컴파일되고 나면 메시지가 출력 패널(윈도우 > 결과 > 출력)에 표시되고 상태 표시줄의 상태 아이콘이 녹색으로 표시됩니다. 컴파일된 CSS를 열려면 패널에서 성공 메시지를 더블 클릭합니다.

오류가 발견된다면 이는 CSS가 정상적으로 컴파일되지 않았음을 의미합니다. 상태 아이콘이 빨간색으로 표시되고 출력 패널에 모든 오류 및 경고가 나열됩니다. 패널에서 오류 메시지를 더블 클릭하여 코드의 잘못된 줄로 빠르게 이동할 수 있습니다. 모든 오류가 해결되기 전까지 CSS 파일은 컴파일되지 않습니다.

컴파일된 CSS 파일을 가져온 후에는 웹 페이지를 스타일 시트에 연결할 수 있습니다. CSS 프리프로세서를 변경하면 해당 컴파일된 CSS 파일이 자동으로 업데이트됩니다. 웹 페이지 역시 라이브 뷰에서 자동으로 새로 고쳐집니다.

웹 페이지를 스타일 시트에 연결하는 방법에 대한 자세한 내용은 외부 CSS 스타일 시트 연결을 참조하십시오.

수동으로 CSS 프리프로세서 파일 컴파일

일부의 경우(Dreamweaver 사이트를 정의하지 않은 경우 등) 수동으로 CSS 프리프로세서 파일을 컴파일하고자 할 수 있습니다.

이러한 경우 사이트 설정 대화 상자의 CSS 프리프로세서 > 일반 패널에서 파일 저장 시 자동 컴파일 활성화를 비활성화합니다.

CSS 프리프로세서를 수동으로 컴파일하려면 파일 패널에서 파일을 마우스 오른쪽 버튼으로 클릭하고 컴파일을 클릭합니다.

도구 > 컴파일을 선택해도 현재 파일을 컴파일할 수 있습니다.