코드 힌트 사용



코드 힌트 기능을 사용하면 실수하지 않고 빠르게 코드를 삽입하고 편집할 수 있습니다. [코드] 뷰에서 문자를 입력하면 입력을 자동으로 완성하는 제안 목록이 표시됩니다. 예를 들어, 태그, 속성 또는 CSS 속성 이름의 첫 문자를 입력하면 해당 문자로 시작하는 옵션 목록이 표시됩니다. 이 기능을 통해 간단하게 코드를 삽입하고 편집할 수 있습니다. 또한 이 기능으로 태그에 사용 가능한 속성, 함수에 사용 가능한 매개 변수 또는 객체에 사용 가능한 메서드를 확인할 수 있습니다.

코드 힌트는 여러 종류의 코드에 대해 제공됩니다. 특정 코드 유형의 시작 문자를 입력하면 적절한 제안 목록이 표시됩니다. 예를 들어, HTML 태그 이름에 대한 코드 힌트 목록을 표시하려면 오른쪽 꺾쇠 괄호(<)를 입력합니다. 마찬가지로 JavaScript 코드 힌트를 표시하려면 객체 뒤에 마침표(도트 연산자)를 입력합니다.

특히, 함수 및 객체에 대한 코드 힌트를 사용할 때 빠르게 코드 힌트를 보려면 [코드 힌트] 환경 설정 대화 상자의 [지연] 옵션을 0초로 설정합니다.

코드 힌트 기능은 언어에 내장되지 않은 사용자 정의 JavaScript 클래스를 인식하기도 합니다. 이러한 사용자 정의 클래스는 직접 작성하거나 Prototype과 같은 타사 라이브러리를 통해 추가할 수 있습니다.

백스페이스 키(Windows) 또는 Delete 키(Macintosh)를 누르면 코드 힌트 목록이 사라집니다.

코드 힌트에 대한 비디오 자습서는 www.adobe.com/go/lrvid4048_dw_kr을 참조하십시오.

Dreamweaver에서 JavaScript 지원에 대한 Dreamweaver 엔지니어링 팀의 비디오 개요를 보려면 www.adobe.com/go/dw10javascript_kr을 참조하십시오.

지원되는 언어 및 기술

Dreamweaver는 다음과 같은 언어 및 기술에 대한 코드 힌트를 지원합니다.

  • HTML

  • CSS

  • DOM(문서 객체 모델)

  • JavaScript(사용자 정의 클래스 힌트 포함)

  • Ajax

  • Spry

  • Adobe ColdFusion

  • JSP

  • PHP MySQL

  • ASP JavaScript

  • ASP VBScript

  • ASP.NET C#

  • ASP.NET VB

코드 힌트 메뉴 표시

코드 힌트 메뉴는 [코드] 뷰에 내용을 입력할 때 자동으로 나타납니다. 하지만 내용을 입력하지 않고도 코드 힌트 메뉴를 수동으로 표시할 수 있습니다.

  1. [코드] 뷰([윈도우] > [코드])에서 삽입 포인터를 태그 안에 놓습니다.
  2. Ctrl+스페이스바를 누릅니다.

코드 힌트를 사용하여 코드 뷰에서 코드 삽입

  1. 코드의 시작 부분을 입력합니다. 예를 들어, 태그를 삽입하려면 오른쪽 꺾쇠 괄호(<)를 입력합니다. 속성을 삽입하려면 태그 이름 바로 뒤에 삽입 포인터를 놓고 스페이스바를 누릅니다.

    태그 이름 또는 속성 이름 등의 항목 목록이 나타납니다.

    언제든지 목록을 닫으려면 Esc 키를 누릅니다.
  2. 목록을 스크롤하려면 스크롤 막대나 위 화살표 및 아래 화살표 키를 사용합니다.
  3. 목록의 항목을 삽입하려면 항목을 두 번 클릭하거나, 항목을 선택한 다음 Enter 키(Windows)나 Return 키(Macintosh)를 누릅니다.
    최근에 만든 CSS 스타일이 CSS 스타일의 코드 힌트 목록에 나타나지 않으면 코드 힌트 목록에서 [스타일 목록 새로 고침]을 선택합니다. [디자인] 뷰가 표시되는 경우 [스타일 목록 새로 고침]을 선택하면 일시적으로 [디자인] 뷰에 잘못된 코드가 나타나기도 합니다. [디자인] 뷰에서 잘못된 코드를 제거하려면 스타일 삽입을 마친 후 F5 키를 눌러 뷰를 새로 고칩니다.
  4. 닫기 태그를 삽입하려면 </(슬래시)를 입력합니다.
    참고: 기본적으로 Dreamweaver에서 닫기 태그가 필요한 시기를 결정하며 필요할 경우 자동으로 삽입합니다. 열기 태그의 뒤쪽 꺾쇠 괄호(>)를 입력하면 Dreamweaver에서 닫기 태그를 삽입하도록 이 기본 비헤이비어를 변경할 수 있습니다. 또는 닫기 태그를 삽입하지 않도록 기본 비헤이비어를 설정할 수도 있습니다. [편집] > [환경 설정] > [코드 힌트]를 선택한 다음, [태그 닫기] 옵션 중 하나를 선택합니다.

코드 힌트를 사용하여 태그 편집

  • 속성을 다른 속성으로 바꾸려면 속성 및 속성 값을 삭제합니다. 그런 다음 앞에서 설명한 대로 속성 및 속성 값을 추가합니다.

  • 값을 변경하려면 앞에서 설명한 대로 값을 삭제한 다음 값을 추가합니다.

JavaScript 코드 힌트 새로 고침

JavaScript 파일에서 작업하는 경우 사용 가능한 코드 힌트 목록이 자동으로 새로 고쳐집니다. 예를 들어, 기본 HTML 파일에서 작업하는 경우 JavaScript 파일로 전환하여 변경 작업을 수행하게 됩니다. 그런 다음 기본 HTML 파일로 돌아가면 변경 내용이 코드 힌트 목록에 반영됩니다. 단, 자동 업데이트는 JavaScript 파일을 Dreamweaver에서 편집하는 경우에만 작동합니다.

JavaScript 파일을 Dreamweaver 이외에서 편집할 경우 Ctrl+마침표를 눌러야 JavaScript 코드 힌트가 새로 고쳐집니다.

코드 힌트 및 구문 오류

코드에 구문 오류가 있을 경우 코드 힌트가 제대로 작동하지 않기도 합니다. Dreamweaver는 페이지 상단 표시줄에 오류 정보를 표시하여 구문 오류에 대해 경고합니다. 구문 오류 알림 표시줄에는 오류가 발생한 코드의 첫 행이 표시됩니다. 오류를 수정한 후에도 Dreamweaver는 계속해서 오류를 감지하여 오류가 발생할 경우 이를 표시합니다.

Dreamweaver는 구문 오류가 발생한 행 번호를 강조 표시(빨간색)하여 추가 지원을 제공합니다. 강조 표시는 오류가 있는 파일의 [코드] 뷰에 나타납니다.

현재 페이지를 비롯하여 관련 페이지에 대해서도 구문 오류가 표시됩니다. 예를 들어 포함된 JavaScript 파일을 사용하는 HTML 페이지에서 작업 중일 경우, 포함된 파일에 오류가 있으면 JavaScript 파일에 대해서도 경고가 표시됩니다. 문서 위쪽에 있는 이름을 클릭하여 오류가 있는 관련 파일을 쉽게 열 수 있습니다.

구문 오류 알림 표시줄을 비활성화하려면 코딩 툴바에서 [구문 오류 경고] 버튼을 클릭하면 됩니다.

코드 힌트 환경 설정

코드 힌트에 대한 기본 환경 설정을 변경할 수 있습니다. 예를 들어, CSS 속성 이름 또는 Spry 코드 힌트를 표시하지 않으려면 코드 힌트 환경 설정에서 해당 항목의 선택을 취소하면 됩니다. 또한 코드 힌트 지연 시간 및 닫기 태그에 대한 환경을 설정할 수 있습니다.

코드 힌트가 비활성화되어 있더라도 Ctrl+스페이스바를 누르면 [코드] 뷰에 팝업 힌트를 계속 표시할 수 있습니다.
  1. [편집] > [환경 설정]을 선택합니다.
  2. 왼쪽의 [범주] 목록에서 [코드 힌트]를 선택합니다.
  3. 다음 옵션을 설정합니다.
    태그 닫기
    Dreamweaver에서 닫기 태그를 삽입하는 방법을 지정합니다. 기본적으로 Dreamweaver에서는 사용자가 </ 문자를 입력한 후 자동으로 닫기 태그를 삽입합니다. 열기 태그의 뒤쪽 꺾쇠 괄호(>)를 입력한 다음 닫기 태그가 삽입되거나 닫기 태그가 삽입되지 않도록 기본 비헤이비어를 변경할 수 있습니다.

    코드 힌트 활성화
    [코드] 뷰에서 코드를 입력할 때 코드 힌트를 표시합니다. [지연] 슬라이더를 드래그하여 몇 초 후에 힌트가 표시될지를 지정할 수 있습니다.

    메뉴
    코드를 입력할 때 표시될 코드 힌트의 유형을 정확하게 설정합니다. 메뉴 전부 또는 일부를 사용할 수 있습니다.