Dreamweaver에서 코딩 환경 설정, 코드 테마, 서식 및 코드 재작성 환경을 설정하는 방법을 살펴봅니다.

원하는 내용에 맞게 코드 포맷 지정, 색상 표시 등의 코드 작성 환경을 설정할 수 있습니다.

참고:

  • 고급 환경 설정을 하려면 태그 라이브러리 편집기를 사용하십시오(태그 라이브러리 관리 참조).
  • Dreamweaver는 CSS, JS 및 PHP 파일 유형에 대한 서식을 지원합니다. PHP, CSS, JS 서식을 맞춤화하는 방법에 대한 자세한 내용은 코드 서식 지정을 참조하십시오.

코드 모양 설정

[보기] > [코드 보기 옵션] 메뉴를 사용하여 줄 바꿈 설정, 코드의 행 번호 표시, 코드 요소에 대한 구문 색상 표시 설정, 들여쓰기 설정, 숨김 문자 표시 등을 지정할 수 있습니다.

  1. 코드 보기 또는 코드 관리자에서 문서를 봅니다.
  2. [보기] > [코드 보기 옵션]을 선택합니다.

  3. 다음 옵션을 선택하거나 선택 해제합니다.

    줄 바꿈

    가로로 스크롤하지 않고도 코드를 볼 수 있도록 줄 바꿈됩니다. 이 옵션을 선택하면 코드가 보기 쉽게 조정될 뿐 행 분리가 삽입되지는 않습니다.

    행 번호

    코드 왼쪽을 따라 행 번호가 표시됩니다.

    숨김 문자

    공백 문자 대신 특수 문자가 표시됩니다. 예를 들어 공백이 있던 자리에 점이, 탭이 있던 자리에 이중 꺾쇠 문자가, 행 분리가 있던 곳에 단락 표시 문자가 표시됩니다.

    참고:

    Dreamweaver에서 줄 바꿈을 위해 사용하는 소프트 행 분리는 단락 표시 문자와 함께 표시되지 않습니다.

    구문 색상 표시

    코드 색상 표시를 활성화하거나 비활성화합니다. 색상 표시 체계 변경에 대한 자세한 내용은 코드 색상 설정을 참조하십시오.

    자동 들여쓰기

    코드를 작성할 때 Enter 키를 누르면 코드가 자동으로 들여쓰기됩니다. 새 코드 행을 입력하면 이전 행과 동일한 수준으로 들여쓰기됩니다. 들여쓰기 간격 변경에 대한 자세한 내용은 코드 포맷 변경에서 [탭 크기] 옵션을 참조하십시오.

코드 포맷 변경

들여쓰기, 행 길이, 태그 및 속성 이름의 대/소문자 여부 같은 포맷 환경 설정을 지정하여 코드 모양을 변경할 수 있습니다.

[대/소문자 무시] 옵션을 제외한 모든 [코드 포맷] 옵션은 새 문서 또는 이후에 만든 문서의 추가 사항에만 자동으로 적용됩니다.

기존 HTML 문서의 포맷을 다시 지정하려면 문서를 열고 [편집] > [코드] > [소스 포맷 적용]을 선택합니다.

  1. 편집 > 환경 설정을 선택합니다.
  2. 왼쪽의 범주 목록에서 [코드 포맷]을 선택합니다.
  3. 다음 옵션을 설정합니다.

    들여쓰기

    이 환경 설정에 지정된 들여쓰기 규칙에 따라 Dreamweaver에서 생성된 코드를 들여 쓸지 여부를 지정합니다.

    참고:

    이 대화 상자에 있는 대부분의 들여쓰기 옵션은 사용자가 입력하는 코드가 아니라 Dreamweaver에서 생성되는 코드에만 적용됩니다. 입력하는 각 새 코드 행을 이전 행과 동일한 수준으로 들여 쓰려면 [보기] > [코드 보기 옵션]에서 [자동 들여쓰기] 옵션을 선택합니다. 자세한 내용은 코드 모양 설정을 참조하십시오.

    사용

    (텍스트 상자 및 팝업 메뉴) Dreamweaver에서 생성한 코드를 들여 쓸 공백 수 또는 탭 수를 지정합니다. 예를 들어 이 상자에 3을 입력하고 팝업 메뉴에서 탭을 선택하면 Dreamweaver에서 생성된 코드는 각 들여쓰기 수준별로 탭 3개 만큼씩 들여쓰기됩니다.

    탭 크기

    코드 보기에 표시되는 각 탭 문자의 폭을 문자 개수로 지정합니다. 예를 들어 [탭 크기]가 4로 설정된 경우에는 코드 보기에서 각각의 탭은 4자에 해당하는 공백으로 나타납니다. [들여쓰기 사용]이 3개의 탭으로 설정된 경우 Dreamweaver에서 생성된 코드가 각 들여쓰기 수준마다 탭 3개 만큼 들여쓰기되어 코드 보기에서는 12자 크기의 공백으로 나타납니다.

    참고:

    Dreamweaver에서는 공백이나 탭을 사용하여 들여쓰기를 하며 코드를 삽입할 때 일련의 공백을 탭으로 변환하지 않습니다.

    Emmet

    코드 작성 시 Emmet 약어를 사용하려면 이 옵션을 선택하십시오. 이 옵션을 선택한 상태에서 Tab 키를 누르면 Dreamweaver가 Emmet 약어를 전체 HTML 또는 CSS 코드로 변환합니다. Emmet 사용에 대한 자세한 내용은 Dreamweaver로 Emmet 툴킷 사용을 참조하십시오.

    행 분리 형식

    원격 사이트를 호스트하는 원격 서버의 유형(Windows, Macintosh 또는 UNIX)을 지정합니다. 행 분리 문자의 유형을 적당하게 선택하면 해당 HTML 소스 코드를 원격 서버에서 볼 때도 올바르게 나타납니다. 이 설정은, 특정 종류의 행 분리만 인식하는 외부 텍스트 편집기로 작업할 때에도 유용합니다. 예를 들어 메모장이 외부 편집기인 경우에는 CR LF(Windows)를 사용하고, SimpleText가 외부 편집기인 경우에는 CR(Macintosh)을 사용합니다.

    참고:

    FTP를 사용하여 연결하는 서버의 경우 이 옵션은 이진 전송 모드에만 적용되며 Dreamweaver의 ASCII 전송 모드는 이 옵션을 무시합니다. ASCII 모드를 사용하여 파일을 다운로드하는 경우 Dreamweaver는 해당 컴퓨터의 운영 체제를 토대로 행 분리를 설정합니다. ASCII 모드를 사용하여 파일을 업로드하는 경우 행 분리는 모두 CR LF로 설정됩니다.

    TD 태그: TD 태그 내부에 행 분리를 포함하지 않음

    <td> 태그 바로 뒤 또는 </td> 태그 바로 앞에 공백이나 행 분리가 있을 때 일부 오래된 브라우저에서 발생하는 렌더링 문제를 해결합니다. 이 옵션을 선택할 때 태그 라이브러리의 포맷 설정에 행 분리가 있어야 한다고 지정된 경우에도 Dreamweaver에서는 <td> 태그 뒤 또는 </td> 태그 앞에 행 분리를 지정하지 않습니다.

    고급 서식

    태그 라이브러리 편집기에서 개별 태그 및 속성에 대한 서식 지정 옵션을 설정할 수 있습니다.

    공백 문자

    (일본어 버전만 해당) HTML 코드에 대해 &nbsp; 또는 Zenkaku 공백을 선택할 수 있습니다. 표를 만들 때 일본어 인코딩 페이지에서 [연속된 여러 공백 허용] 옵션이 활성화된 경우 이 옵션에서 선택한 공백이 빈 태그에 사용됩니다.

    최소 코드 폴딩 크기

    기본 코드 폴딩 크기는 두 줄입니다. 이 기본 설정을 사용하면 최소 두 줄 이상의 코드로 구성된 모든 코드 부분을 축소할 수 있습니다. 두 줄 미만인 코드 부분은 해당 코드를 선택해야만 축소할 수 있습니다. 코드 폴딩에 대한 자세한 내용은 코드 축소 및 확장을 참조하십시오.

코드 다시 작성 환경 설정

코드 다시 작성 환경 설정을 사용하면 Dreamweaver에서 문서를 여는 동안, 양식 요소를 복사 및 붙여넣기하는 경우 및 속성 관리자와 같은 도구를 사용하여 속성 값 및 URL을 입력하는 경우에 코드를 수정하는 방식 및 수정할지 여부를 지정할 수 있습니다. 이런 환경 설정은 코드 보기에서 HTML 또는 스크립트를 편집할 때는 적용되지 않습니다.

다시 작성 옵션을 비활성화하는 경우 다시 작성되어야 하는 HTML의 잘못된 마크 업 항목이 문서 창에 표시됩니다.

  1. 편집 > 환경 설정(Windows) 또는 Dreamweaver > 환경 설정(Macintosh)을 선택합니다.
  2. 왼쪽의 범주 목록에서 [코드 다시 작성]을 선택합니다.
  3. 다음 옵션을 설정합니다.

    잘못 중첩되거나 닫히지 않은 태그 수정

    겹친 태그를 다시 작성합니다. 예를 들어 <b><i>text</b></i><b><i>text</i></b>로 다시 작성됩니다. 이 옵션은 누락된 닫기 따옴표와 닫기 괄호도 삽입합니다.

    붙여넣기를 하는 경우 양식 항목의 이름 변경

    양식 오브젝트의 이름 중복을 방지합니다. 이 옵션은 기본적으로 활성화되어 있습니다.

    참고:

    이 환경 설정 대화 상자의 다른 옵션과는 달리 이 옵션은 양식 요소를 복사하여 붙여넣을 때만 적용되고 문서를 열 때는 적용되지 않습니다.

    불필요한 닫기 태그 제거

    짝을 이루는 열기 태그가 없는 닫기 태그를 삭제합니다.

    태그 수정 또는 제거 시 경고

    Dreamweaver에서 수정한 HTML이 기술적으로 문제가 있는 경우 이를 요약하여 표시합니다. 이 요약문은 문제가 발생한 위치를 행 및 열 번호를 통해 알려주므로 수정된 내용을 찾아 원하는 대로 적용되었는지 확인할 수 있습니다.

    코드 재작성 안 함: 다음 확장명이 있는 파일

    Dreamweaver에서 파일 이름 확장명이 지정된 파일에 있는 코드를 다시 작성하면 안 됩니다. 이 옵션은 특히 서드 파티 태그가 들어 있는 파일에 유용합니다.

    &를 사용하여 속성 값으로 <, >, & 및 &#34; 등을 인코딩

    속성 관리자 등 Dreamweaver 도구를 사용하여 입력 또는 편집하는 속성 값에 올바른 문자만이 포함되어야 합니다. 이 옵션은 기본적으로 활성화되어 있습니다.

    참고:

    이 옵션 및 다음 옵션들은 코드 보기에서 입력하는 URL에는 적용되지 않습니다. 또한 파일에 있는 기존 코드가 변경되지 않도록 합니다.

    특수 문자는 인코딩하지 않음

    올바른 문자만을 사용하고자 하면 Dreamweaver에서 URL을 변경하면 안 됩니다. 이 옵션은 기본적으로 활성화되어 있습니다.

    &#를 사용하는 URL에서 특수 문자 인코딩

    속성 관리자 등 Dreamweaver 도구를 사용하여 URL을 입력하거나 편집하는 경우 해당 URL에 올바른 문자만 포함되어야 합니다.

    %를 사용하는 URL에서 특수 문자 인코딩

    앞의 옵션과 같은 방식으로 작동하지만 다른 특수 문자 인코딩 방식을 사용합니다. % 기호를 사용하는 이 인코딩 방식은 이전 버전의 브라우저와 좀 더 잘 호환될 수 있지만 일부 언어의 문자를 제대로 처리하지 못합니다.

코드 힌트 환경 설정

코드 힌트 환경 설정을 사용하여 코드 힌트의 작동 방식을 원하는 대로 구성할 수 있습니다. 

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

    코드 힌트 환경 설정
  2. 왼쪽의 [범주]에서 [코드 힌트]를 선택합니다.

  3. 다음 옵션을 설정합니다.

    태그 닫기

    Dreamweaver에서 태그를 닫는 방식을 지정합니다.

    • “</” 입력 후 - 
    • 열린 태그의 “>” 입력 후 - 열려 있는 태그를 닫을 때 Dreamweaver가 자동으로 닫힘 태그를 추가하도록 하려면 이 옵션을 선택합니다.
    • 사용 안 함 - Dreamweaver가 자동으로 닫힘 태그를 추가하지 않도록 하려면 이 옵션을 선택합니다.

    코드 힌트 활성화

    Dreamweaver에서 코드 힌트 및 코드 완성 기능을 활성화하거나 비활성화하려면 이 옵션을 선택합니다. Dreamweaver의 코드 힌트 및 코드 완성 기능에 대한 자세한 내용은 코드 힌트 및 코드 완성을 참조하십시오.

    도구 설명 활성화

    코드 힌트에 설명이 표시되도록 하려면 이 옵션을 선택합니다. 이러한 설명은 작성 중인 코드에 대한 추가 정보를 제공합니다.

    중괄호 자동 삽입  이 옵션을 선택하면 사용자가 열기 중괄호를 입력할 때마다 닫기 중괄호가 자동으로 삽입됩니다. 이 옵션을 선택하지 않으면 사용자가 열기 중괄호를 입력할 때 닫기 중괄호가 삽입되지 않습니다. 모든 유형의 중괄호와 모든 파일 유형(html, php, css, js)에 적용됩니다.

    따옴표 자동 삽입  이 옵션을 선택하면 사용자가 열기 따옴표를 입력할 때마다 닫기 따옴표가 자동으로 삽입됩니다. 이 옵션을 선택하지 않으면 사용자가 열기 따옴표를 입력할 때 닫기 따옴표가 삽입되지 않습니다. 작은 따옴표와 큰 따옴표 및 모든 파일 유형(html, php, css, js)에 적용됩니다.

코드 자동 완성 기능에 대한 환경 설정

다음 단계를 수행하여 괄호 및 따옴표 자동 닫기 기능을 활성화하거나 비활성화할 수 있습니다.

  1. 다음 위치에서 brackets.json 파일을 엽니다.

    • Win: %appdata%\Adobe\Dreamweaver CC 2018\en_US\Configuration\Brackets\
    • Mac: ~/Library/Application Support/Adobe/Dreamweaver CC 2018/en_US/Configuration/Brackets/
       
  2. 괄호 자동 닫기 기능을 비활성화하려면 autoCloseBraces를 False로 설정합니다.

  3. 상대 따옴표 자동 삽입 기능을 비활성화하려면 autoCloseQuotes를 Flase로 설정합니다.

    괄호 자동 닫기 및 따옴표 자동 삽입 기능을 활성화하려면 위에 설명된 값을 True로 설정합니다.

    Dreamweaver의 코드 자동 완성 기능에 대한 환경 설정
    Dreamweaver의 코드 자동 완성 기능에 대한 환경 설정
  4. .json 파일을 저장하고 Dreamweaver를 실행합니다.

PHP 환경 설정

PHP 코딩 개발 환경을 필요에 따라 설정할 수 있습니다. 작업 중인 개별 사이트에 대한 사이트별 기준이나 Dreamweaver 사이트 외부에서 저장한 모든 PHP 파일에 대한 일반 항목을 기준으로 이 작업을 수행할 수 있습니다.

Dreamweaver는 코드 힌트를 설정하고 선택한 PHP 언어 버전에 대한 검사를 린트합니다.

사이트 불특정 파일에 대해 PHP 코드 버전 환경을 설정하려면 다음 단계를 따르십시오.

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

  2. 왼쪽의 범주 목록에서 PHP를 설정합니다.

  3. PHP 버전 드롭다운 목록에서 PHP 버전을 선택하고 적용을 클릭합니다.

특정 사이트에 대해 PHP 버전을 설정하려면 다음 단계를 따르십시오.

  1. 사이트 설정 대화 상자의 고급 설정에서 PHP를 선택합니다.

  2. PHP 버전 드롭다운 목록에서 PHP 버전을 선택하고 저장을 클릭합니다.

    사이트별 기준으로 PHP 환경 설정
    사이트별 기준으로 PHP 환경 설정

색상 테마 및 코드 테마 설정

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

  1. 편집 > 환경 설정(Windows) 또는 Dreamweaver > 환경 설정(Macintosh)을 선택합니다.
  2. 왼쪽의 범주 목록에서 [인터페이스]를 선택합니다.

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

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

    밝은 테마 또는 어두운 테마 중에서 선택할 수 있습니다.

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

    필요에 따라 코드 색상 표시를 보다 세부적으로 맞춤화할 수 있습니다. 자세한 내용은 코드 색상 표시 맞춤 설정을 참조하십시오.

외부 편집기 사용

특정 파일 이름 확장명을 가진 파일을 편집하는 경우 사용할 외부 편집기를 지정할 수 있습니다. 예를 들어 Dreamweaver에서 BBEdit, 메모장 또는 TextEdit 등의 텍스트 편집기를 사용하여 JS(JavaScript) 파일을 편집할 수 있습니다.

여러 파일 이름 확장명에 각기 다른 외부 편집기를 설정할 수 있습니다.

파일 유형에 대해 외부 편집기 설정

  1. 편집 > 환경 설정을 선택합니다.
  2. 왼쪽의 범주 목록에서 [파일 유형/편집기]를 선택하고 옵션을 설정한 다음 [확인]을 클릭합니다.

    코드 보기에서 열기

    Dreamweaver의 코드 보기에서 자동으로 열리도록 할 파일 이름 확장명을 지정합니다.

    수정된 파일 새로 고침

    Dreamweaver에 열려 있는 문서가 외부에서 변경되는 경우가 감지되면 해당 비헤이비어가 지정됩니다.

    실행할 때 저장

    편집기를 시작하기 전에 Dreamweaver에서 최근 문서의 저장 여부를 지정하거나 외부 편집기를 시작할 때마다 문서의 저장 여부를 지정합니다.

    Fireworks

    여기에 애플리케이션으로의 경로를 입력하여 Dreamweaver와 Fireworks를 연결할 수 있습니다.

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

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