Dreamweaver에서 코드 주석과 같은 코드 요소의 색상(코드 색상 표시)을 맞춤화하는 방법에 대해 학습합니다.

Dreamweaver에서 [편집] > [환경 설정] > [인터페이스] 옵션을 통해 인터페이스 색상 환경 설정을 변경할 수 있습니다.

네 종류의 색상 테마 중에서 선택할 수 있으며 밝은 코드 테마와 어두운 코드 테마를 선택할 수 있습니다. 

색상 및 색상 테마를 설정한 후 내장된 main.less 파일의 선택기를 편집하여 Dreamweaver의 코드 색상을 보다 세부적으로 맞춤 설정할 수 있습니다.

Dreamweaver CC 2017에서의 코드 색상 표시 정보

Dreamweaver CC 2017에서의 코드 색상 표시는 main.less 테마 파일에 있는 선택기에 의해 제어됩니다.

Dreamweaver CC 2017의 코드 색상 표시를 맞춤화하려면 다음 단계를 수행하십시오.

  1. Dreamweaver에서 기본 색상 및 코드 테마 환경을 설정합니다. 
  2. 베이스로 기존의 색상 테마를 사용하여 코드 테마를 제작합니다.
  3. 새 코드 테마를 편집합니다.
  4. 수정해야 할 선택기와 이로 인해 영향을 받게 되는 다른 코드 요소에 대해 파악합니다.
  5. main.less 테마 파일의 선택기를 편집하고 변경 내용을 저장합니다.

색상 테마 및 코드 테마 설정

Dreamweaver를 시작할 때 환경 설정에 따라 색상 테마 선택할 수 있습니다. 언제든지 이 환경 설정을 바꿀 수도 있습니다.

  1. 편집 > 환경 설정(Windows) 또는 Dreamweaver > 환경 설정(Macintosh)을 선택합니다.

  2. 왼쪽의 범주 목록에서 [인터페이스]를 선택합니다.

  3. 색상 테마 목록에서 테마를 선택합니다. 

  4. 인터페이스 테마를 설정한 후 코드 테마를 설정합니다.

    밝은 테마 또는 어두운 테마 중에서 선택할 수 있습니다. 그런 다음 이 테마를 새 이름으로 저장하고 보다 세부적으로 맞춤화할 수 있습니다.

    기본 코드 테마
    기본 코드 테마

  5. [적용]을 클릭하여 변경 내용을 저장합니다.

코드 테마 맞춤화

코드 테마를 선택한 다음 새 이름으로 코드 테마를 저장하여 코드 색상을 맞춤 설정하고 이를 편집할 수 있습니다.

  1. 편집 > 환경 설정(Windows) 또는 Dreamweaver > 환경 설정(Macintosh)을 선택합니다.

  2. 밝은 코드 테마 또는 어두운 코드 테마를 선택한 다음 플러스 아이콘을 클릭하고 새 이름으로 테마를 저장합니다.

    참고:

    기본으로 제공되는 밝은 테마와 어두운 테마는 편집할 수 없으므로 이들 테마의 사본에 변경 사항을 적용해야 합니다. 직접 제작한 새 테마는 언제든지 편집할 수 있습니다.

    테마 복사 후 편집
    테마 복사 후 편집

  3. 기본 코드 테마를 새 이름으로 저장합니다.

    기본 코드 테마를 기반으로 하는 코드 테마 제작
    기본 코드 테마를 기반으로 하는 코드 테마 제작

  4. 새로 제작한 코드 테마를 선택하고 편집 아이콘을 클릭합니다.

    Dreamweaver에서 main.less 파일이 열리고 해당 테마의 선택기를 편집하여 코드 색상을 맞춤 설정할 수 있습니다.

    main.less 파일을 저장하면 코드 보기가 새로 고쳐지고 새로 설정된 색상이 적용됩니다.

선택기 이해

코드 요소의 색상을 변경하려면 main.less 파일의 선택기에 대한 속성을 편집하십시오.

단, main.less 파일의 선택기를 수정하기에 앞서 다양한 선택기의 역할과 이들이 영향을 주는 코드 요소에 대해 파악하는 것이 중요합니다. 다음 표를 통해 이들 선택기에 의해 영향을 받는 HTML, CSS, JavaScript 및 PHP 파일의 코드 요소에 대해 살펴볼 수 있습니다.

선택기 HTML CSS JavaScript PHP
.cm-atom   와 같은 엔티티 이름 strong, none, auto, inherit 등과 같은 사전 정의된 속성 값인 HEX, RGB 또는 HSL 포맷의 색상 true, false, null, undefined, NaN, Infinity __LINE__, __DIR__ 등과 같은 True, False, Null 및 매직 상수
.cm-attribute  속성 이름 all, braille, print, screen 등과 같은 미디어 유형    
.cm-bracket <, >, /> 및 </ 등의 태그 괄호      
.cm-builtin    ID 선택기   htmlspecialchars, trim, substr 등의 내장 함수
.cm-comment  주석 주석 주석 주석
.cm-def    “@ 규칙” 변수, 함수 정의 및 함수 매개 변수  함수 정의의 함수 이름 
.cm-error  시작 태그가 없는 닫기 태그
속성 값에 대해 누락된 인용 부호
속성 값에 대한 “{” 또는 “}” 괄호 누락, 인용 부호 누락 또는 인식할 수 없는 속성 이름으로 인한 오류    
.cm-keyword    @media like and, only 등의 색상 이름, !important, 키워드 제어 구조 키워드(if, else, …), in, of, from, default, public, private 등 함수, if, else, new, echo, isset 등의 키워드
.cm-meta  <!DOCTYPE> 선언문 -webkit-, -o- 등의 브라우저 특정 접두어 스프레드 구문의 생략 부호. 예: myFunction(...iterableObj); <!DOCTYPE> 선언문 및 PHP 시작 및 종료 태그: <?php, ?>
.cm-number    단위 유무에 상관없는 모든 수 12, 2.1, 123e-5, 0x11, 0b11, 0o11 등의 모든 수 12, 2.1, 0x11, 0b11, 0123, 5.0E+19 등의 모든 수
.cm-operator      연산자: +, -, *, +=, !==, &&, >>> 등 ===, &&, !, =>, +, - 등의 연산자
.cm-property    속성 이름 오브젝트 속성 또는 메소드  
.cm-qualifier    클래스 선택기    
.cm-string  속성 값 url() 호출, 인용 부호 내의 글꼴 이름 등으로 전달되는 일반 문자열 리터럴 문자열 리터럴 문자열
.cm-string-2    scrollbar-arrow-color, scrollbar-base-color 등의 비표준 속성 정규식  
.cm-tag  태그 이름 태그 선택기    
.cm-variable    인용 부호 없는 글꼴 이름 전역 변수/함수, 클래스 참조 사용자 정의 함수 이름, 인터페이스/클래스 참조, 클래스 속성, 캐스트 
.cm-variable-2    main-bg-color와 같은 맞춤형 속성 범위 지정 변수/함수 참조 사용자 정의 및 사전 정의된 변수, 매개 변수 또는 속성
.cm-variable-3   :hover, :focus 등의 가상 클래스 및 ::first-letter, ::selection 등의 가상 요소    

다음 표에는 main.less 파일의 선택기에 의해 영향을 받는 Dreamweaver 템플릿 및 라이브러리가 기재되어 있습니다.

클래스 템플릿(DWT) 라이브러리(LBI)
.cm-templateComment 템플릿 주석  
.cm-templateAttrVal 템플릿 주석의 속성 값  
.cm-instanceParam InstanceParam 주석 및 속성  
.cm-instanceParamAttrVal InstanceParam 속성 값  
.cm-libraryItem   문서에 삽입된 라이브러리. 예: .cm-libraryItem { color: #3A3A3A; background-color: #A4A4A4; }

선택기가 다른 코드 파일에 영향을 미치는 방식에 대한 이해

main.less 테마 파일의 선택기가 코드 파일(HTML, CSS, JavaScript 및 PHP 외)의 코드 요소에 영향을 미치는 방식에 대해 학습하려면 Token Inspector를 다운로드하고 이를 사용하십시오.

다운로드

  1. Token Inspector를 다운로드하고 압축을 풉니다.

  2. Google Chrome을 사용하여 TokenInspector\CM-Modes-Interactive\demo\TokenInspector.html 파일로 이동하고 이를 엽니다.

    TokenInspector 유틸리티는 다음과 같은 섹션으로 구성됩니다.

    • 코드 편집기 
    • 모드 변경을 위한 옵션 
    • 선택기 목록 (오른쪽에 표시)
    Token Inspector를 사용하여 선택기 파악
    Token Inspector를 사용하여 선택기 파악

    A. 코드 편집기 B. 모드 변경 옵션 C. 선택기 목록 
  3. 파일의 내용을 복사하여 코드 편집기에 붙여 넣습니다.

  4. 파일 확장명을 수정하고 모드 변경을 클릭하여 파일의 모드를 변경합니다.

    예를 들어 HTML 파일의 경우 파일 확장명을 html로 변경합니다. 페이지가 모드의 변경 내용을 반영하여 업데이트되고 현재 모드가 페이지 상단에 표시됩니다.

    Token Inspector에서의 모드 표시
    Token Inspector에서의 모드 표시

  5. 모양을 수정하려는 코드 요소를 선택합니다.

    Token Inspector에서 해당 선택기가 강조 표시됩니다.

  6. (선택 사항) 선택기를 개별적으로 선택하여 코드 파일에서 해당 선택기에 의해 영향을 받는 코드 요소를 확인할 수도 있습니다.

  7. 편집하고 업데이트할 선택기를 기록해 두고 Token Inspector를 닫습니다.

main.less 파일의 선택기 편집

편집해야 할 선택기를 파악하고 나면 main.less 파일을 변경할 수 있습니다.

  1. 다음과 같은 주석이 나타날 때까지 끝으로 이동합니다.

    /* 사용자 정의 코드 색상 또는 재정의가 이 라인 뒤에 와야 함 */

  2. 편집하려는 색상이 있는 코드 요소에 대한 선택기를 입력합니다. 다음 예와 유사한 구문을 사용하십시오.

    .cm-tag {color: #00D0D0; }

  3. 여러 요소에 대해 동일한 색상을 할당하려면 여러 선택기를 그룹화합니다. 다음 예에서는 쉼표로 구분된 여러 선택기가 단일 색상에 할당됩니다.

    .cm-atom, .cm-string, .cm-string-2, .cm-hr {color: #cf681d;}

  4. 파일 유형별로 코드 색상 표시를 맞춤화하려면 다음 예에서와 같이 파일 유형 선택기 내에 코드 요소 선택기를 포함시킵니다.

    .HTML{
    .cm-tag{ color: #00D0D0;}
    }
  5. 변경 내용을 적용한 다음 파일을 저장합니다.

    Dreamweaver가 열려 있는 모든 문서의 코드 보기를 새로 고쳐 새 색상을 적용합니다.

참고:

변경 내용에 구문 오류나 정의되지 않은 변수가 있는 경우에는 Dreamweaver가 맞춤화된 코드 변경 내용을 불러오지 않고 기본으로 제공되는 어두운 코드 테마를 대신 불러옵니다.

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

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