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 프리프로세서 처리 방법

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. 파일을 CSS로 컴파일할 다른 grunt 작업을 설정한 다음, 이를 Dreamweaver로 가져옵니다.

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가 출력 단위를 예측하게 됩니다. 예:

.class {

속성: 1px * 2px;

}

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

엄격한 단위가 활성화된 상태에서 Dreamweaver는 이를 계산 오류로 간주하고 오류를 발생시킵니다.

이 옵션을 사용하면 생성된 CSS 파일의 URL을 다시 작성하여 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 파일을 저장할 폴더를 지정하십시오.

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

감시가 필요한 사이트 루트 내의 하위 폴더를 지정합니다. 일반적으로 이 하위 폴더에는 모든 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 전처리기를 수동으로 컴파일하려면 파일 패널에서 파일을 마우스 오른쪽 버튼으로 클릭한 후 컴파일을 클릭하십시오.

도구 > 컴파일을 클릭하여 현재 파일을 컴파일할 수도 있습니다.