메뉴 건너뛰기

HEUKMYO

Tool Tip

[드림위버] 코드 작성 환경 설정

2015.02.01 12:09 read.1413

참고:

Dreamweaver CC 이상에서 사용자 인터페이스가 간소화되었습니다. 따라서 이 문서에 설명된 옵션 중에 Dreamweaver CC 이상에 없는 옵션이 있을 수 있습니다. 자세한 내용은 이 문서를 참조하십시오.

코드 작성 환경 설정에 대한 정보

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

참고:

고급 환경 설정을 설정하려면 [태그 라이브러리 편집기](태그 라이브러리 관리하기 참조)를 사용하십시오.

코드 모양 설정

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

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

    • 코드 보기나 코드 관리자의 상단 툴바에서 보기 옵션 버튼 을 클릭합니다.

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

    줄 바꿈

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

    행 번호

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

    숨김 문자

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

    참고:

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

    잘못된 코드 강조

    Dreamweaver에서 잘못된 모든 HTML 코드는 노란색으로 강조 표시됩니다. 잘못된 태그를 선택하면 속성 관리자에 오류를 정정하는 방법이 표시됩니다.

    구문 색상 표시

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

    자동 들여쓰기

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

코드 포맷 변경

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

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

기존 HTML 문서의 포맷을 재지정하려면 문서를 열고 [명령] > [소스 포맷 적용]을 선택합니다.

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

    들여쓰기

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

    참고:

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

    사용

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

    탭 크기

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

    참고:

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

    행 분리 형식

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

    참고:

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

    기본 태그 및 기본 속성에서의 대/소문자 사용

    태그 및 속성 이름의 대/소문자를 조정합니다. 이 옵션은 디자인 보기에서 삽입하거나 편집한 태그 및 속성에는 적용되지만, 코드 보기에서 직접 입력한 태그와 속성 또는 문서를 열 때 문서에 이미 포함되어 있던 태그와 속성에는 적용되지 않습니다. 다만 [대/소문자 무시] 옵션 중 하나 또는 둘 모두를 선택한 경우에는 적용됩니다.

    참고:

    이러한 환경 설정은 HTML 페이지에만 적용됩니다. 대문자 태그와 속성은 유효한 XHTML이 아니므로 XHTML 페이지에는 이러한 환경 설정이 적용되지 않습니다.

    대/소문자 무시: 태그 및 속성

    기존 HTML 문서를 열 때를 비롯하여 항상 지정한 대/소문자 옵션을 자동으로 적용할지 여부를 지정할 수 있습니다. 이 옵션 중 하나를 선택하고 [확인]을 클릭하여 대화 상자를 닫으면 그때부터 열리는 문서의 모든 태그나 속성은 물론, 현재 열어놓은 문서의 모든 태그나 속성들도 지정된 대/소문자 형식으로 즉시 변환됩니다(이 옵션을 다시 선택 해제할 때까지 계속 적용됨). 코드 보기 및 [퀵 태그 편집기]에서 입력한 태그나 속성은 물론 [삽입] 패널을 사용하여 삽입한 태그나 속성도 지정된 형식으로 변환됩니다. 예를 들어, 태그 이름을 항상 소문자로 변환하고 싶으면 [기본 태그 대/소문자] 옵션에서 소문자를 지정하고 [대/소문자 무시: 태그] 옵션을 선택합니다. 그러면 Dreamweaver에서 대문자 태그 이름이 포함된 문서를 열 때 태그 이름이 모두 소문자로 변환됩니다.

    참고:

    이전 버전의 HTML은 태그 및 속성 이름에 대문자나 소문자를 모두 허용했지만 XHTML에서는 소문자를 사용해야합니다. 현재 웹에서 XHTML을 사용하는 추세로 변하고 있으므로 태그 및 속성 이름에 소문자를 사용하는 것이 좋습니다.

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

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

    고급 서식

    CSS(겹쳐 놓기 스타일 시트) 코드에 대한 서식 옵션 및 태그 라이브러리 편집기의 개별 태그와 속성에 대한 서식 옵션을 설정할 수 있습니다.

    공백 문자

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

코드 다시 작성 환경 설정

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

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

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

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

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

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

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

    참고:

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

    불필요한 닫기 태그 제거

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

    태그 수정 또는 제거 시 경고

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

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

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

    , & 및 " 등을 인코딩'>

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

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

    참고:

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

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

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

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

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

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

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

코드 보기용 색상 테마 설정

 

코드 색상 표시 환경 설정을 사용하여 코드 보기용 테마를 지정합니다. 배경, 전경 및 숨겨진 문자에 대해 다양한 색상 구성표를 선택하여 테마를 사용자 지정할 수 있습니다.

각 목록화된 문서 유형의 경우 양식 관련 태그나 JavaScript 식별자 등 다양한 태그 또는 코드 요소의 범주에 대해 색상을 사용자 지정할 수 있습니다. 예를 들어 레이븐 테마가 모든 문서 형식에 사용되는 경우 HTML 문서의 양식 관련 태그에 대해 파란색을 선택할 수 있습니다.

[적용]을 클릭하면 모든 사용자 지정 설정이 저장되고 Dreamweaver 세션에서 사용자 지정 테마를 사용할 수 있습니다.

참고: 특정 태그에 대한 색상 표시 환경 설정을 지정하려면 태그 라이브러리 편집기에서 태그 정의를 편집합니다.

기본 테마는 클래식입니다. 테마를 변경하거나 사용자 지정하려면 다음의 단계를 수행하십시오.

  1. [편집] > [환경 설정](Windows) 또는 [Dreamweaver] > [환경 설정](Macintosh)을 선택합니다.
  2. 왼쪽의 범주 목록에서 [코드 색상 표시]를 선택합니다.
  3. 테마 목록에서 테마를 선택합니다.

    코드 보기를 위한 독창적 테마
  4. 테마를 사용자 지정하는 경우 다음 단계를 수행합니다.

    1. 배경색을 변경하려면 다음 옵션을 사용합니다.

      기본 배경

      코드 보기와 코드 관리자의 기본 배경색을 설정합니다.

      숨김 문자

      숨김 문자의 색상을 설정합니다.

      라이브 코드 배경

      라이브 코드 보기의 배경색을 설정합니다. 기본 색상은 노란색입니다.

      라이브 코드 변경 사항

      라이브 코드 보기에서 변경된 코드의 강조 색상을 설정합니다. 기본 색상은 분홍색입니다.

      읽기 전용 배경

      읽기 전용 텍스트의 배경색을 설정합니다.

      선택 배경

      선택된 코드에 맞는 배경색을 설정합니다.

      선택 전경

      선택된 코드에 맞는 전경색을 설정합니다.

    2. 특정 태그 범주의 색상 구성표를 변경하려면 문서 유형 목록에서 문서 유형을 선택합니다. 그런 다음 색상 구성표 편집을 클릭합니다.

      참고: 선택된 문서 유형의 색상 구성표 편집은 이 유형의 모든 문서에 영향을 줍니다.

      [코드 색상 표시 체계 편집] 대화 상자의 [스타일] 목록에서 코드 요소를 선택하고 텍스트 색상, 배경색 및 스타일(굵게, 기울임, 밑줄)을 설정합니다. [미리 보기] 창의 샘플 코드에 새 색상 및 스타일이 적용되어 표시됩니다.
      HTML 문서 유형에 맞는 색상 구성표 편집
    3. 테마의 팩토리 기본 설정으로 복귀하려면 재설정을 클릭합니다.

  5. 적용을 클릭하여 변경 사항을 저장합니다.

외부 편집기 사용

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

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

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

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

    코드 보기에서 열기

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

    외부 코드 편집기

    사용할 텍스트 편집기를 지정합니다.

    수정된 파일 새로 고침

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

    실행할 때 저장

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

    Fireworks

    각 미디어 파일 유형에 대해 편집기를 지정합니다.

외부 코드 편집기 시작

  • [편집] > [편집: 외부 편집기]를 선택합니다.

http://helpx.adobe.com/kr/dreamweaver/using/setting-coding-preferences.html

위로