코드 힌트 및 코드 완성

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

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

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

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

• HTML
• CSS
• JavaScript 
• PHP

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

코드 힌트 활성화

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

중괄호 및 따옴표 자동 삽입 기능을 활성화하려면 중괄호 자동 삽입 및 따옴표 자동 삽입을 각각 선택합니다.

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

HTML 코드 힌트

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

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

태그 힌트

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

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

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

속성 이름 힌트

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

속성 값 힌트

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

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

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

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

src에 대한 동적 코드 힌트

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

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

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

href에 대한 동적 코드 힌트

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

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

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

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

CSS 코드 힌트

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

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

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

CSS @규칙에 대한 코드 힌트

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

CSS 속성 힌트

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

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

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

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

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

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

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

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

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

CSS 대표 속성 힌트

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

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

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

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

CSS 코드 팁

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

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

JavaScript 코드 힌트

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

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

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

라이브 오브젝트 검사

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 코드 힌트에 대한 지연 설정 편집

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

사이트 특정 코드 힌트

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

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

구성 파일 만들기

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

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

사이트 구조 저장

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

사이트 구조 이름 바꾸기

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

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

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

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

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