코드 서식 지정

파일을 만들거나 편집할 때마다 포맷을 제어하는 환경 설정을 지정할 수 있습니다.

수동으로 코드 서식 지정

  1. 지원되는 파일을 엽니다.

  2. 편집 > 코드 > 소스 서식 적용을 선택합니다.

    또는 일반 툴바 > 소스 코드 포맷에서 소스 서식 적용을 선택합니다.

수동으로 파일에서 선택한 코드 서식 지정

  1. 코드를 엽니다.

  2. 코드를 선택합니다.

  3. 편집 > 코드 > 선택 영역에 소스 서식 적용을 선택합니다.

    또는 일반 툴바 > 소스 코드 포맷에서 선택 영역에 소스 서식 적용을 선택합니다.

    참고:

    태그 사이에 있는 코드를 선택하고 선택 영역에 소스 서식을 적용하면 해당 서식은 부모 태그까지 적용됩니다.

코드 서식 지정에 대한 기본 규칙 편집

서식 지정 규칙을 추가하여 CSS, JS 및 PHP 코드 서식을 맞춤화할 수 있습니다.(사이트 루트 폴더에 있는 .jsbeautifyrc 파일에서)

.jsbeautifyrc 파일을 추가하려면 다음 단계를 따르십시오.

참고:
  • 다음 지침은 CSS, JS 및 PHP 문서에만 적용됩니다.
  • PHP 문서의 HTML 태그는 태그 라이브러리의 환경 설정에 따라 서식이 지정됩니다. 다음 지침에 따라 PHP 블록 내의 코드에 서식을 지정할 수 있습니다.
  1. 사이트 루트에서 파일 이름이 .jsbeautifyrc인 파일을 새로 만듭니다.

  2. 아래의 CSS, JS 및 PHP에 대한 기본 서식 지정 규칙을 복사하여 .jsbeautifyrc에 붙여넣고 파일을 저장합니다.

    { 
     
        "js": { 
     
            "eol": "\n", 
     
            "preserve_newlines": true, 
     
            "max_preserve_newlines": 3, 
     
            "space_after_anon_function": true, 
     
            "keep_array_indentation": false, 
     
            "space_before_conditional": true, 
     
            "break_chained_methods": false, 
     
            "unescape_strings": false, 
     
            "wrap_line_length": 0, 
     
            "end_with_newline": true, 
     
            "comma_first": false, 
     
            "operator_position": "after-newline" 
     
        }, 
     
        "css": { 
     
            "preserve_newlines": false, 
     
            "selector_separator_newline" : false, 
     
            "end_with_newline": false, 
     
            "newline_between_rules": false, 
     
            "space_around_selector_separator": true 
     
        }, 
     
        "php": { 
     
            "eol": "\n", 
     
            "preserve_newlines": true, 
     
            "max_preserve_newlines": 3, 
     
            "space_after_anon_function": true, 
     
            "brace_style": "collapse", 
     
            "keep_array_indentation": false, 
     
            "space_before_conditional": true, 
     
            "break_chained_methods": false, 
     
            "unescape_strings": false, 
     
            "wrap_line_length": 0, 
     
            "end_with_newline": false, 
     
            "comma_first": false, 
     
            "space_in_paren":true 
     
        } 
     
    }
  3. 기본 규칙을 편집하여 아래 표에 따라 기본 코드 서식 지정 규칙을 변경하고 변경 내용을 저장합니다.

참고:

다른 Dreamweaver 사이트에서 PHP, CSS 및 JS 파일에 대한 코드 서식을 맞춤화하려면 사용자 정의된 파일을 사이트 루트 폴더의 .jsbeautifyrc에 배치해야 합니다.

CSS, JS 및 PHP 서식 지정에 대한 규칙:

CSS 규칙 Dreamweaver에서의 기본 값 설명
  preserve_newlines false 빈 줄을 유지할지 여부를 지정합니다.
selector_separator_newline false

쉼표로 구분된 선택기 사이에 줄 바꿈을 적용할지 여부를 지정합니다.

예: ".div, .P"

end_with_newline false 파일을 빈 줄로 끝낼 것인지 여부를 지정합니다.
newline_between_rules false 모든 CSS 규칙 뒤에 새 줄을 추가할지 여부를 지정합니다.
space_around_selector_separator true

선택기 분리 기호 주변 공간을 확보하려면:  '>', '+', '~'

예를 들어 소스 서식을 지정할 때 “a>b”는 “a > b”가 됩니다.

JS 규칙 Dreamweaver에서의 기본 값 설명
  “eol” “\n” 줄의 끝을 나타내는 데 사용되는 문자입니다.
preserve_newlines true 빈 줄을 유지할지 여부를 지정합니다.
max_preserve_newlines 3

“max_preserve_newlines”에 대해: N, 

JS 파일에 N-1개를 초과하는 빈 줄이 있는 경우 N-1개의 빈 줄은 서식 적용 시 유지됩니다.

참고: max_preserve_newlines는 preserve_newlines가 true로 설정된 경우에만 적용됩니다.

space_after_anon_function true

익명 함수의 괄호 앞에 공백을 추가할지 여부를 지정합니다.

예를 들어 소스 서식을 지정할 때 “function()”는 “function ()”가 됩니다.

keep_array_indentation false 배열 본문 내에 줄 바꿈 문자를 허용하거나 유지합니다.
space_before_conditional true

조건문 앞에 공백을 추가할지 여부를 지정합니다.

예를 들어 서식을 적용 시 “if(true)”는 “if (true)”가 됩니다.

break_chained_methods false

체인으로 연결된 함수 사이의 줄바꿈을 허용하거나 유지합니다.

예:

`foobar().baz()`

unescape_strings false

\xNN 표기법으로 인코딩된 문자열에서 인쇄 가능한 문자는 이스케이프되지 않아야 합니다.

예:

“\x65\x78\x61\x6d\x70\x6c\x65”는 소스 서식 적용 시 “예(example)”가 됩니다.

wrap_line_length 0 이 문자 수 이후로 줄 바꿈이 이루어져야 합니다.
end_with_newline true

파일 끝에 줄 바꿈이 추가되도록 합니다.

comma_first false 쉼표는 줄 바꿈에 사용되지만 이 플래그는 쉼표를 줄의 첫 번째 문자로 사용할 수 있도록 해 줍니다.
operator_position after-newline

긴 조건부 표현식을 여러 줄로 분할한 경우 이 플래그는 해당 줄에서 연산자의 위치를 정의하는 데 사용됩니다.

아래 값을 사용하여 플래그를 편집할 수 있습니다.

  • before-newline
  • after-newline
  • preserve-newline
참고:

PHP 서식 지정에 대한 규칙은 아래에 있는 두 개의 추가 규칙이 있는 JS 서식 지정(위 표에 설명됨)과 동일합니다.

PHP 규칙 Dreamweaver에서의 기본 값 설명
  brace_style collapse

이 옵션을 사용하여 괄호의 위치를 제어할 수 있습니다.

예:

function f() {

// code

}

또는 

function f()

{

// Code

}

아래 값을 할당할 수 있습니다.

  • “collapse” - 제어문과 동일한 줄에 중괄호 배치
  • “expand” - 한 줄에 중괄호 배치 (Allman / ANSI 스타일)
  • “end-expand” - 한 줄에 닫힘 중괄호 배치
  • “none” - 현재 위치 유지 시도
  • 위 값 중 하나 + “,preserve-inline” - 중괄호의 인라인 블록 유지 시도
space_in_paren true

괄호 안에 공백을 추가할지 여부를 지정합니다.

예:

include('header.php')

는 서식 지정 시

include( 'header.php' )가 됩니다.

유사 검색

 Adobe

쉽고 빠르게 지원 받기

신규 사용자이신가요?

Adobe MAX 2024

Adobe MAX
크리에이티비티 컨퍼런스

10월 14~16일 마이애미 비치 및 온라인

Adobe MAX

크리에이티비티 컨퍼런스

10월 14~16일 마이애미 비치 및 온라인

Adobe MAX 2024

Adobe MAX
크리에이티비티 컨퍼런스

10월 14~16일 마이애미 비치 및 온라인

Adobe MAX

크리에이티비티 컨퍼런스

10월 14~16일 마이애미 비치 및 온라인