Dreamweaver에서 CSS 프리프로세서 파일을 사용하여 작업하고 컴파일하는 방법에 대해 학습합니다.

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

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

Dreamweaver는 가장 보편적으로 사용되는 CSS 프리프로세서인 Sass 및 Less를 지원합니다. 또한 Dreamweaver는 Sass 파일을 컴파일하기 위한 Compass 및 Bourbon 프레임워크도 지원합니다.

Less는 JavaScript 기반이고 Sass는 Ruby 기반이지만 CSS로 파일을 컴파일하기 위해 이 언어 중 하나를 알아야 하거나 명령줄을 사용할 필요가 없습니다. Dreamweaver에서는 이러한 파일을 로드하거나 편집하거나 저장할 때 less.js JavaScript 라이브러리를 사용하여 이러한 파일을 CSS로 자동 컴파일합니다

Dreamweaver에서 CSS 프리프로세서 처리 방법

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

사이트가 정의되어 있으면 사이트 특정 CSS 프리프로세서 환경 설정을 지정하여 Dreamweaver 내의 CSS 프리프로세서 작업 방법을 사용자 정의할 수 있습니다.

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

사이트를 정의할 때 Dreamweaver 내에서 Compass, Bourbon, Bourbon Neat, Bourbon bitters 등 Sass 프레임워크를 사용할 수 있습니다.

사이트가 정의되어 있지 않으면 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 프리프로세서 설정을 지정할 수 있습니다. 

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

파일 저장 시 자동 컴파일 활성화

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

Less 옵션

Strict Math 사용

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

Strict 단위 사용

수학식 후 CSS에서 추측된 단위를 출력합니다. 예를 들어 5px * 2px은 10px2가 아닌 10px로 컴파일됩니다. 

이 옵션이 비활성화되면 수학식을 처리할 때 Less가 출력 단위를 예측하게 됩니다.

이 예제에서는 CSS는 다음과 같은 생성됩니다.

.class {
  property: 1px * 2px;
}

이 경우 예상이 올바르지 않습니다. 길이로 곱해진 길이가 영역을 부여하지만 CSS는 지정 영역을 지원하지 않습니다. 여기서 사용자가 값 중 하나를 값으로 정했고 이 값이 길이 단위가 아니며 Dreamweaver가 10px을 출력했다는 가정입니다.

Strict가 켜진 상태에서 생성된 이 CSS는 오류로 간주됩니다.

상대 URL로 URL 다시 작성

가져온 파일의 URL을 다시 작성하기 때문에 URL은 항상 기본 가져온 파일에 대해 상대적입니다. 그러므로 Less 파일이 이미지에 해당하는 다른 Less 파일을 가져오는 경우 상대 URL이 컴파일된 CSS에 표시됩니다.

소스 맵 생성

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

Sass/SCSS 옵션

출력 파일 스타일

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

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

소스 주석 생성

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

소스 맵 생성

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

CSS 소스 및 출력 환경 설정

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

소스 및 출력 CSS 프리프로세서 설정
소스 및 출력 CSS 프리프로세서 설정

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

CSS 출력

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

소스와 동일한 폴더

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

출력 폴더 정의

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

입력 경로의 세그먼트 바꾸기

이 옵션을 사용하면 시작과 끝 문자열을 사용하여 경로 일부를 바꿀 수 있습니다.

예를 들어 시작: scss, 끝: css 설정에서 출력 파일은 경로 css의 SCSS를 바꾼 후 동일한 트리 구조 안에 배치됩니다.

소스 폴더

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

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

Compass 프레임워크 사용

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

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

  1. Compass 파일 설치.

    Compass가 설치되어 있지 않은 경우에는 Dreamweaver 내에서 이를 설치할 수 있습니다.

    사이트 설정 대화 상자에서 CSS 프리프로세서 > Compass를 선택합니다. “Compass 사용”을 선택한 다음 [파일 설치]를 클릭합니다.

    Compass 파일 설치
    Compass 파일 설치

    모든 Compass 파일과 *. rb 구성 파일은 사이트 폴더 안에 설치되고 파일 패널에서 볼 수 있습니다.

    설치된 Compass 파일
    설치된 Compass 파일

  2. 기존의 Ruby 기반 구성 파일 지정

    컴퓨터에 Compass가 있으며, Dreamweaver 사이트 설정 대화 상자 내에서 나침반 *. rb 파일 설정이 있는 경우 현재 사이트 루트 내에서 Compass *. rb 파일의 경로를 지정합니다.

    1. 사이트 설정 대화 상자에서 [CSS 프리프로세서] > [Compass]를 선택합니다.
    2. [Compass 사용] 체크 상자를 선택합니다.
    3. [Ruby 기반 구성 파일 지정]을 클릭하고 해당 파일 위치를 검색합니다. 완료되면 [저장]을 클릭합니다.
    기존의 Ruby 기반 구성 파일 지정
    기존의 Ruby 기반 구성 파일 지정

    참고:

    일반적으로 이 파일은 사이트 루트 폴더에 있습니다.

  3. 수동으로 구성 옵션 지정

    기존의 구성 옵션이 없는 경우 수동으로 지정할 수 있습니다.

    1. 사이트 설정 대화 상자에서 [CSS 프리프로세서] > [Compass]를 선택합니다.
    2. [Compass 사용] 체크 상자를 선택합니다.
    3. [수동으로 구성 옵션 지정]을 클릭합니다. 다음 구성 옵션 중 하나를 선택하고 [저장]을 클릭합니다.

    다음 필드는 자동으로 채워지지만 요구 사항에 맞게 변경할 수 있습니다.

    참고:

    이 옵션에서 선택되는 모든 경로는 사이트 루트 안에 있어야 합니다.

    HTTP 경로

    웹 서버 내에서 실행되는 프로젝트에 대한 경로입니다. 기본값은 “/”입니다.

    이미지 디렉터리

    이미지가 보관되는 디렉터리입니다. 이는 project_path와 연계됩니다.

    생성된 이미지 디렉터리

    생성된 이미지가 보관되는 디렉터리입니다. 이는 project_path와 연계됩니다. 기본값은 images_dir입니다.

    글꼴 디렉터리

    글꼴 파일이 보관되는 디렉터리입니다.

    상대 에셋

    Compass 보조 함수가 생성된 CSS에서 에셋으로 상대 URL을 생성할지 또는 해당 에셋 유형에 대한 http 경로를 사용하여 절대 URL로 생성할지를 결정합니다.

  4. 사이트 > 사이트 관리 > CSS 프리프로세서 대화 상자에서 [파일 저장 시 자동 컴파일 활성화]를 선택한 경우에는 Sass 파일에 변경 내용을 저장할 때마다 Dreamweaver가 CSS 파일을 자동으로 생성합니다. 또한 브라우저 창에서 이러한 변경 내용을 실시간으로 미리 볼 수 있습니다. 브라우저에서 변경 내용 실시간 미리보기에 대한 자세한 내용은 실시간 미리보기를 참조하십시오.

    자동 컴파일 기능을 사용하지 않으려면 다음 중 하나의 방법을 사용하여 CSS 파일을 수동으로 컴파일할 수 있습니다.

    • 파일 패널에서 Sass, Less 또는 SCSS 파일을 마우스 오른쪽 버튼으로 클릭하고 [컴파일]을 클릭합니다. 
    • [도구] > [컴파일]을 클릭하여 현재 파일을 컴파일합니다.
  5. 그런 다음 컴파일된 CSS 파일을 사이트의 HTML 파일에 첨부할 수 있습니다. 자세한 내용은 외부 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 Neat 또는 Bourbon Bitters 파일 설치

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

  1. [사이트 설정] 대화 상자에서 [CSS 프리프로세서] > [Bourbon], [Bourbon Neat] 또는 [Bourbon Bitters]를 선택합니다.

  2. 사이트 내에서 지정된 사이트 루트 폴더 위치에 파일을 설치하려면 파일 설치를 클릭합니다.

    Bourbon 파일 설치
    Bourbon 파일 설치

    모든 Bourbon은 사이트 폴더 안에 설치되고 파일 패널에서 볼 수 있습니다.

    설치된 Bourbon 파일
    설치된 Bourbon 파일

    오류가 있는 경우 출력 패널([윈도우] > [결과] > [출력])에 오류가 표시되며 상태 표시줄 아이콘이 빨간색으로 바뀝니다.

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

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

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

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

  1. [사이트 설정] 대화 상자에서 [CSS 프리프로세서] > [일반] > [파일 저장 시 자동 컴파일을 활성화]를 선택합니다.

    자동 컴파일 활성화
    자동 컴파일 활성화

  2. [사이트 설정] 대화 상자에서 [CSS 프리프로세서] > [소스 및 출력]을 선택합니다.

  3. [소스 및 출력] 대화 상자에서 생성된 CSS 파일을 저장하려는 위치를 지정합니다. 다음 옵션 중 한 가지를 선택할 수 있습니다.

    소스와 동일한 폴더

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

    출력 폴더 정의

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

    입력 경로의 세그먼트 바꾸기

    이 옵션을 사용하면 시작과 끝 문자열을 사용하여 경로 일부를 바꿀 수 있습니다.

  4. Dreamweaver가 “감시”해야 하는 Sass 또는 Less 파일이 포함되는 폴더를 지정합니다. 

    이 감시 폴더 내 파일이 변경된 경우 Dreamweaver가 파일을 저장한 후 자동으로 컴파일합니다.

    소스 및 출력 CSS 프리프로세서 설정
    소스 및 출력 CSS 프리프로세서 설정

    참고:

    Dreamweaver 외부(예: 텍스트 편집기 등)에서 변경한 경우에도 Dreamweaver가 이 파일을 감시하고 컴파일합니다.

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

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

참고:

출력 패널은 일반적으로 작업 영역의 아래쪽에 도킹되어 있습니다. 패널이 닫혀 있을 경우 [윈도우] > [출력] 패널을 사용하여 엽니다.

또한 상태 아이콘이 빨간색인 경우에는 이를 사용하여 출력 패널을 전환할 수 있습니다(표시/숨기기).

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

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

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

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

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

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

파일 패널을 통해 수동으로 CSS 프리프로세서 파일 컴파일
파일 패널을 통해 수동으로 CSS 프리프로세서 파일 컴파일

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

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책