코딩 시간을 최소화하려면 Dreamweaver의 코드 힌트 및 코드 완성 기능을 사용합니다.

Dreamweaver의 지능적인 코드 완성 또는 코드 힌트 기능을 사용하면 철자 오류와 기타 일반적인 실수를 줄여 코드를 빠르게 삽입하고 편집할 수 있습니다.

또한 이 기능을 사용해 다음을 확인할 수 있습니다.

  • 태그에 사용 가능한 속성
  • 함수에 사용 가능한 매개 변수
  • 오브젝트에 사용 가능한 메서드

지원되는 언어 및 기술

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

이들 언어에 대해 코드 힌트 및 코드 완성이 어떤 방식으로 작동하는지 학습하려면 아래 내용을 읽어 보십시오.

코드 힌트 활성화

코드 힌트를 활성화하려면 [편집] > [환경 설정] > [코드 힌트]를 클릭한 다음 코드 힌트 활성화를 선택합니다. 코드 힌트를 비활성화하려면 코드 힌트 활성화를 선택 해제합니다.

코드 힌트의 설명을 활성화하려면 [도구 설명 활성화]를 선택하십시오. 이렇게 하면 코드 힌트에 관련 설명이 표시됩니다.

HTML 코드 힌트

다음 유형의 코드 힌트를 HTML에서 사용할 수 있습니다.

  • 태그 힌트
  • 속성 이름 힌트
  • 속성 값 힌트

태그 힌트

코드 입력을 시작하려면 키보드의 < 키를 누릅니다. 입력 시 Dreamweaver가 유효한 HTML 태그를 표시합니다. 입력하려는 문자열이 메뉴에 나타나면 해당 메뉴로 스크롤하고 Enter 또는 Return 키를 눌러 입력을 마칩니다.

예를 들어 <를 입력하면 팝업 메뉴에 태그 이름 목록이 나타나므로 나머지 태그 이름을 모두 입력하지 않고 메뉴에서 해당 태그를 선택하면 텍스트에 삽입할 수 있습니다.

기본 HTML 코드 힌트
기본 HTML 코드 힌트

이 HTML 태그 힌트에도 해당되는 경우 태그에 대한 간단한 설명이 포함됩니다.

속성 이름 힌트

Dreamweaver가는 Dreamweaver에서 코딩하는 동안 태그에 대한 해당 속성을 표시합니다. 사용할 수 있는 유효한 속성 이름을 표시하려면 태그 이름을 입력하고 스페이스바를 누릅니다.

속성 이름 코드 힌트
속성 이름 코드 힌트

속성 값 힌트

(관련 파일에 나타나는 내용을 토대로 코드 힌트에서 값이 표시되는 것에 따라)
속성 값 힌트 텍스트는 정적이거나 동적일 수 있습니다. 

대부분의 속성 값 힌트는 정적입니다. 예를 들어 자체가 정적인 대상 속성 값을 활용하면 힌트 또한 정적입니다. 

정적인 속성 값 힌트의 예
정적인 속성 값 힌트의 예

Dreamweaver는 ID, target, src, href, 클래스 등 동적 코드 힌트를 필요로 하는 속성 값에 대해 동적 코드 힌트를 표시합니다.

다음은 동적으로 표시되는 코드 힌트의 몇 가지 예입니다. 

src에 대한 동적 코드 힌트

이 예에서 src를 입력하면 유효한 속성 값이 나타나며, 이미지를 선택하면 Dreamweaver가 이미지 폴더에 있는 실제로 유효한 이미지를 표시합니다. 그런 다음 아래로 스크롤하여 원하는 것을 선택할 수 있습니다.

src에 대한 동적 코드 힌트
src에 대한 동적 코드 힌트

CC Libraries에 에셋이 있으면 src를 입력했을 때 이 에셋도 나타납니다. CC 라이브러리 에셋은 클라우드 아이콘으로 표시됩니다.

CC 라이브러리 에셋을 선택하면 팝업 메뉴가 나타나 이미지 크기를 리샘플링하고 이미지 형식을 변경할 수 있습니다.

코드에 CC 라이브러리 에셋 포함
코드에 CC 라이브러리 에셋 포함

참고:

코드 힌트에는 50개의 CC 라이브러리 에셋만 표시될 수 있습니다. 이 힌트는 알파벳 순으로 표시됩니다.

참고:

Dreamweaver 코드에서 원격 CC 라이브러리 에셋 포함은 지원되지 않습니다.

href에 대한 동적 코드 힌트

href를 입력하면 Dreamweaver에 연결하려는 파일을 검색 및 선택할 수 있는 옵션과 함께 폴더의 파일 목록이 표시됩니다.

href에 대한 동적 코드 힌트
href에 대한 동적 코드 힌트

ID 및 스타일에 대한 동적 코드 힌트

CSS 파일에서 ID를 정의한 경우 HTML 파일에서 ID를 입력하면 Dreamweaver가 사용 가능한 모든 ID를 표시합니다.

ID에 대한 동적 코드 힌트
ID에 대한 동적 코드 힌트

마찬가지로 CSS 스타일을 정의한 경우 HTML 파일에서 스타일을 입력하면 Dreamweaver가 사용 가능한 모든 스타일을 표시합니다.

스타일에 대한 동적 코드 힌트
스타일에 대한 동적 코드 힌트

CSS 코드 힌트

다음과 같이 다양한 유형의 CSS에 대해 코드 힌트를 사용할 수 있습니다.

  • @규칙
  • 속성
  • 유사 선택기 및 유사 요소
  • 대표 속성

코드 힌트 외에도 CSS 속성에 대한 팁을 사용할 수 있습니다.

CSS @규칙에 대한 코드 힌트

Dreamweaver는 여기에 제시되는 것처럼 CSS 규칙에 대한 설명과 함께 모든 @규칙에 대한 코드 힌트를 표시합니다.

CSS @규칙 코드 힌트
CSS @규칙 코드 힌트

CSS 속성 힌트

CSS 속성을 입력할 때 콜론을 입력하면 유효 값을 선택할 수 있도록 코드 힌트가 나타납니다.

다음 예에서 font-family:를 입력하면 유효한 글꼴 세트가 나타납니다.

글꼴 세트 중 하나를 선택하거나 이 힌트 내에서 글꼴 관리 대화 상자를 열고 원하는 글꼴을 설정할 수 있습니다.

CSS 속성에 대한 코드 힌트와 도움말
CSS 속성에 대한 코드 힌트와 도움말

유용한 코드 힌트의 또 다른 예는 CSS에서 색상으로 작업하는 경우입니다. 색상 관련 속성(테두리색 또는 배경색 등)에서 입력하는 경우 콜론을 누르면 코드 힌트가 색상 목록을 표시합니다. 목록에서 색상을 선택하거나 코드 힌트 내에서 색상 피커를 열고 원하는 색상을 설정할 수 있습니다.

CSS 색상 관련 코드 힌트
CSS 색상 관련 코드 힌트

CC libraries에 색상 견본이 있는 경우 코드 힌트가 이 색상 견본도 표시합니다.

CC libraries에서 색상 견본은 클라우드 아이콘으로 표시됩니다.
CC libraries에서 색상 견본은 클라우드 아이콘으로 표시됩니다.

참고:

코드 힌트에는 50개의 CC 라이브러리 에셋만 표시될 수 있습니다. 이 힌트는 알파벳 순으로 표시됩니다.

유사 선택기 및 유사 요소 힌트

CSS 유사 선택기를 선택기에 추가하여 요소의 특정 상태를 정의할 수 있습니다. 예를 들어 :hover를 사용하면 사용자가 선택기에 의해 지정된 요소에 마우스 커서를 올릴 때 스타일이 적용됩니다.

“:”을 입력하면 커서가 적합한 컨텍스트에 놓여 있는 경우 Dreamweaver가 유효한 유사 선택기의 목록을 표시합니다.

유사 선택기 코드 힌트
유사 선택기 코드 힌트

“::”을 입력하면 커서가 적합한 컨텍스트에 놓여 있는 경우 Dreamweaver가 유효한 유사 요소(요소의 지정된 부분을 스타일링 데 사용)의 목록을 표시합니다.

유사 요소 코드 힌트
유사 요소 코드 힌트

CSS 대표 속성 힌트

대표 속성은 다른 여러 CSS 속성 값을 동시에 설정할 수 있도록 해 주는 CSS 속성입니다. CSS 대표 속성의 일부 예로는 배경 및 글꼴 속성이 있습니다.

아래 예에서 보이는 바와 같이 CSS 대표 속성(예: 배경)을 입력한 다음 공백을 입력하면 Dreamweaver가 다음과 같은 항목을 표시합니다.

  • 관련순으로 정렬된 해당 속성 값
  • 반드시 사용해야 하는 필수 값 (예: 글꼴 사용 시 글꼴 크기 및 글꼴군)
  • 해당 속성에 대한 브라우저 확장
배경 CSS 속성에 대한 코드 힌트
배경 CSS 속성에 대한 코드 힌트

CSS 대표 속성이 입력되면 코드 힌트에도 입력한 속성 값이 표시됩니다.

CSS 코드 팁

일부 CSS 속성(상자 그림자 또는 텍스트 그림자 등)에 대해 Dreamweaver는 어떤 값을 따라야 하는지를 가리키는 팁을 표시하며, 또한 별표를 사용하여 어떤 값이 필수 값인지를 가리킵니다. 

브라우저가 CSS를 해석하는 방식에 대해서도 확인할 수 있습니다.

CSS 속성에 대해 표시되는 팁
CSS 속성에 대해 표시되는 팁

JavaScript 코드 힌트

JavaScript 파일에서 Dreamweaver는 변수 및 함수 매개 변수에 대한 코드 힌트를 제공합니다. 

아래 예에서 코드 스니펫은 유형을 나타냅니다.

JavaScript 코드 힌트
JavaScript 코드 힌트

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

참고:

이 자동 업데이트는 JavaScript 파일을 Dreamweaver에서 편집하는 경우에만 작동합니다.

라이브 오브젝트 검사

Dreamweaver는 또한 자동으로 JavaScript 유형 코드 힌트를 새로 고칩니다.

예를 들어 임의의 변수를 숫자로 정의하는 경우 Dreamweaver는 해당 정보를 유지합니다. 나중에 코드에서 이 변수를 참조할 때 이는 해당 유형을 가리키게 됩니다.

변수 유형(예: 문자열)을 변경하면 Dreamweaver의 코드 힌트는 자동으로 해당 변수가 문자열임을 가리킵니다.

변수 유형을 나타내는 코드 힌트
변수 유형을 나타내는 코드 힌트

동적 설명서 포함

특정 함수에 대해 주석을 추가한 경우 해당 함수에 힌트가 적용되면 Dreamweaver에서도 해당 함수에 대한 설명서를 표시합니다. 

PHP 코드 힌트

Dreamweaver는 PHP 5.6 및 7.1 버전에 대한 코드 힌트를 지원합니다. 이들 PHP 코드 힌트는 사이트별로 지원되며 모든 핵심 함수, 클래스 및 상수를 포괄합니다.

PHP 5.6 및 7.1에 대한 추가 정보는 PHP 매뉴얼을 참조하십시오.

사이트 특정 코드 힌트에 대한 자세한 내용은 사이트 특정 코드 힌트를 참조하십시오.

유용한 PHP 코드 힌트 기능은 변수 자동 완성입니다.

달러 기호($)를 입력하면 현재 스크립트에 모든 변수 목록이 나타납니다. 원하는 변수를 선택한 다음 Enter/Return 키를 누릅니다. 관련 파일의 변수도 함께 나열되어 다른 용도로 사용된 동일한 변수가 재사용되는 위험을 제거합니다.

PHP 7.1이 기본으로 설정되어 있으면 Dreamweaver는 PHP 7.1 전용 코드 힌트를 표시합니다.

PHP 7 코드 힌트
PHP 7 코드 힌트

PHP 오브젝트 코드 힌트의 예
PHP 오브젝트 코드 힌트의 예

PHP 코드 힌트에 대한 지연 설정 편집

.php 파일에서의 코드 입력 성능을 향상시키기 위해 Dreamweaver 2017.5 이상 버전에는 PHP 코드 힌트에 대한 지연 기능이 추가되었습니다. PHP 코드를 입력하면 Dreamweaver는 지연 시간인 400ms 후에 힌트를 표시합니다. PHP 코드에 대한 지연 설정을 수정하려면 다음 절차를 따르십시오. 

  1. Dreamweaver를 종료합니다.

  2. 텍스트 편집기를 사용하여 다음 위치에서 brackets.json을 엽니다.

    • Win%appdata%\Adobe\Dreamweaver CC 2017\<로케일>\Configuration\Brackets\
    • macOS~/Library/Application Support/Adobe/Dreamweaver CC 2017/<로케일>/Configuration/Brackets/
  3. 대화 상자의 오른쪽 상단에 위치한 [구조 저장] 버튼을 클릭합니다.

    JSON 파일에서 성/값 쌍 뒤에 쉼표를 추가합니다.

    원하는 지연 시간을 밀리초 단위로 입력한 다음 라인을 추가합니다. "delayInPHPHint": <밀리초 단위 시간>. 예: "delayInPHPHint": 200.

  4. 파일을 저장하고 Dreamweaver를 실행합니다.

사이트 특정 코드 힌트

Joomla, Drupal, Wordpress 또는 기타 프레임워크를 사용하여 작업하는 개발자는 Dreamweaver를 통해 코드 보기에서 작성할 때 PHP 코드 힌트를 볼 수 있습니다. 코드 힌트를 표시하려면 우선 사이트 특정 코드 힌트 대화 상자를 사용하여 구성 파일을 생성해야 합니다. 구성은 사이트의 특정 코드 힌트를 Dreamweaver의 어디서 찾아야 하는지 알려줍니다.

사이트 특정 코드 힌트 작업에 대한 비디오 튜토리얼을 보려면 www.adobe.com/go/learn_dw_comm13_kr을 참조하십시오.

구성 파일 만들기

Dreamweaver의 코드 힌트 표시가 필요한 구성 파일을 생성하려면 사이트 특정 코드 힌트 대화 상자를 코드 힌트를 사용합니다.

Dreamweaver의 기본 구성 파일은 Adobe Dreamweaver CS5\configuration\Shared\Dinamico\Presets directory에 저장됩니다.

참고:

생성된 코드 힌트는 특히 Dreamweaver 파일 패널에서 선택된 사이트를 위한 것입니다. 코드 힌트를 표시하려면 작업 중인 페이지가 현재 선택된 사이트에 있어야 합니다.

  1. 사이트 > 사이트 옵션 > 사이트 특정 코드 힌트를 선택합니다.

    기본적으로 [사이트 특정 코드 힌트] 기능으로 사용 중인 CMS(내용 관리 시스템) 프레임워크를 결정하기 위해 사이트를 검색합니다. Dreamweaver는 기본적으로 세 개의 프레임워크(Drupal, Joomla 및 Wordpress)를 지원합니다.

    구조 팝업 메뉴 오른쪽 네 개의 버튼으로 프레임워크 구조를 가져오기, 저장, 이름 바꾸기 또는 삭제할 수 있습니다.

    참고:

    존재하는 기본 프레임워크 구조를 삭제하거나 이름을 바꿀 수 없습니다.

  2. 하위 루트 텍스트 상자에서 프레임워크의 파일이 저장된 곳에 하위 루트 파일을 지정할 수 있습니다. 텍스트 상자 옆의 폴더 아이콘을 클릭하여 프레임워크 파일의 위치를 검색할 수 있습니다.

    Dreamweaver는 프레임워크 파일이 포함된 폴더를 파일 트리 구조로 표시합니다. 검색하고자 하는 폴더 및 파일이 모두 표시되면 [확인]을 눌러 검색을 실행합니다. 검색을 맞춤화하려면 다음 단계로 넘어갑니다.

  3. 파일 창 위에 있는 플러스(+) 버튼을 클릭하여 추가로 검색할 파일 또는 폴더를 선택합니다. [파일/폴더] 추가 대화 상자에서 포함시키고자 하는 특정 파일 이름 확장명을 지정할 수 있습니다.

    참고:

    검색 처리 속도를 높이려면 특정 파일이름 확장명을 지정합니다.

  4. 검색하지 않을 파일을 제거하려면 해당 파일을 선택하고 파일 창 위에 있는 마이너스(-) 버튼을 클릭합니다.

    참고:

    선택한 프레임워크가 Drupal 또는 Joomla인 경우 사이트 특정 코드 힌트 대화 상자에 Dreamweaver 구성 폴더 속 파일의 추가 경로가 표시됩니다.

    이 프레임워크 사용 시 필요하므로 삭제하지 마십시오.

  5. [사이트 특정 코드 힌트]의 특정 파일 또는 폴더를 처리하는 기능을 맞춤화하려면 목록에서 선택한 후 다음 중 하나를 실행합니다.

    • 선택된 폴더를 포함하는 [이 폴더 검색]을 선택합니다.
    • 선택된 디렉터리의 파일 및 폴더를 포함한 [재귀]를 선택합니다.
    • [확장명] 버튼을 눌러 원하는 특정 파일 또는 폴더 검색에 포함된 파일이름 확장명을 지정할 수 있는 [확장명 찾기] 대화 상자를 엽니다.

사이트 구조 저장

[사이트 특정 코드 힌트] 대화 상자에서 생성한 맞춤화된 사이트 구조를 저장할 수 있습니다.

  1. Dreamweaver를 종료합니다.

  2. 필요에 따라 파일 및 폴더를 추가 및 삭제하여 파일 및 폴더를 원하는 구조로 생성합니다.

  3. 사이트 구조의 이름을 지정하고 [저장]을 클릭합니다.

참고:

지정한 이름이 이미 사용 중인 경우 Dreamweaver는 다른 이름을 입력할 것인지 또는 동일한 이름의 구조를 덮어쓸 것인지 묻습니다. 모든 기본 프레임워크 구조를 덮어쓸 수 없습니다.

사이트 구조 이름 바꾸기

사이트 구조의 이름 변경 시 기본 사이트 프레임워크 구조 세 개의 이름 또는 “custom”이라는 단어는 사용할 수 없습니다.

  1. 이름을 변경하려는 구조를 표시합니다.

  2. 대화 상자의 오른쪽 상단에 위치한 [구조 이름 바꾸기] 아이콘 버튼을 클릭합니다.

  3. 사이트 구조의 새 이름을 지정하고 [이름 바꾸기]를 클릭합니다.

참고:

지정한 이름이 이미 사용 중인 경우 Dreamweaver는 다른 이름을 입력할 것인지 묻거나 동일한 이름의 구조를 덮어쓸 것인지 묻습니다. 모든 기본 프레임워크 구조를 덮어쓸 수 없습니다.

사이트 구조에 파일 또는 폴더 추가

프레임워크와 연결된 모든 파일 또는 폴더를 추가할 수 있습니다. 파일 또는 폴더를 추가한 후 검색하려는 파일의 파일이름 확장명을 지정할 수 있습니다. 

  1. 파일 창 위의 플러스(+) 버튼을 클릭하여 [파일/폴더 추가] 대화 상자를 엽니다.

  2. [파일/폴더 추가] 텍스트 상자에 추가하려는 파일 또는 폴더의 경로를 입력합니다. 또한 텍스트 상자 옆의 폴더 아이콘을 클릭하여 파일 또는 폴더를 검색할 수 있습니다.

  3. [확장명] 창 위의 플러스(+) 버튼을 클릭하여 검색하려는 파일의 파일이름 확장명을 지정할 수 있습니다.

    참고:

    검색 처리 속도를 높이려면 특정 파일이름 확장명을 지정합니다.

  4. [추가]를 클릭합니다.

사이트에서 파일이름 확장명 검색

[확장명 찾기] 대화 상자를 사용하여 사이트 구조에 포함된 파일이름 확장명을 보고 편집할 수 있습니다.

  1. [사이트 특정 코드 힌트] 대화 상자에서 [확장명] 버튼을 클릭합니다.

    [확장명 찾기] 대화 상자에 현재 검색이 가능한 확장명이 나열됩니다.

  2. 목록에 다른 확장명을 추가하려면 [확장명] 창 위의 플러스(+) 버튼을 클릭합니다.

  3. 목록에서 확장명을 삭제하려면 마이너스(-) 버튼을 클릭합니다.

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

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