사용 안내서 취소

디자인 뷰에서 코드 편집

검색

마지막 업데이트 날짜 2022년 11월 28일

이 항목을 통해 Adobe Dreamweaver의 디자인 뷰에서 코드를 편집하기 위해 속성 관리자를 활용하는 방법을 살펴보시기 바랍니다.

Dreamweaver를 사용하면 기본 소스 코드에 대한 걱정 없이 시각적으로 웹 페이지를 만들고 편집할 수 있지만 좀 더 다양한 모양을 만들기 위한 코드를 편집하거나 웹 페이지 문제를 해결해야 할 수 있습니다. Dreamweaver는 디자인 뷰로 작업하면서 같은 코드를 편집할 수 있습니다.

이 단원에서는 디자인 뷰를 주로 사용하여 작업하지만 코드에 빠르게 액세스해야 할 필요성이 있는 사용자를 위한 내용을 제공합니다.

디자인 뷰에서 자식 태그 선택

디자인 뷰에서 자식 태그가 포함된 오브젝트(예: HTML 테이블)를 선택하려는 경우 [편집] > [자식 선택]을 선택하면 해당 오브젝트의 첫 번째 자식 태그를 빠르게 선택할 수 있습니다.

참고:

이 명령은 디자인 뷰에서만 사용할 수 있습니다.

예를 들어 <table> 태그는 일반적으로 <tr> 자식 태그를 갖습니다. 태그 선택기에서 <table> 태그를 선택한 경우 [편집] > [자식 선택]을 선택하면 표의 첫 번째 행을 선택할 수 있습니다. Dreamweaver는 태그 선택기에서 첫 번째 <tr> 태그를 선택합니다. <tr> 태그 자체는 <td>라는 자식 태그를 가지므로 [편집] > [자식 선택]을 다시 선택하면 표의 첫 번째 셀이 선택됩니다.

속성 관리자를 사용하여 코드 편집

속성 관리자를 사용하여 페이지의 텍스트 속성 또는 오브젝트의 속성을 확인하고 편집할 수 있습니다. 속성 관리자에 표시되는 속성은 대개 태그 속성에 해당하므로 속성 관리자에서 속성을 변경하는 것은 코드 보기에서 해당 속성을 변경하는 것과 같습니다.

참고:

태그 관리자와 속성 관리자에서 모두 태그 속성을 보고 편집할 수 있습니다. 태그 관리자를 사용하면 특정 태그와 관련된 모든 속성을 보거나 편집할 수 있습니다. 속성 관리자에서는 가장 일반적인 속성만 볼 수 있지만 더 다양한 컨트롤 세트를 사용하여 해당 속성의 값을 변경할 수 있으며, 특정 태그에 해당되지 않는 특정 오브젝트(예: 테이블 열)를 편집할 수도 있습니다.

텍스트를 클릭하거나 페이지에서 오브젝트를 선택합니다.

해당 텍스트 또는 오브젝트에 대한 속성 관리자가 문서 창 아래에 나타납니다. 속성 관리자가 표시되어 있지 않은 경우에는 [윈도우] > [속성]을 선택합니다.
속성 관리자에서 속성을 변경합니다.

속성 관리자를 사용하여 CFML 편집

속성 관리자를 사용하여 디자인 뷰에서 ColdFusion 마크업을 검사하고 수정할 수 있습니다.

속성 관리자에서 [속성] 버튼을 클릭하여 태그의 속성을 편집하거나 새 태그를 추가합니다.
열기 및 닫기 태그 사이에 내용이 있는 경우 [내용] 버튼을 클릭하여 내용을 편집합니다.

[내용] 버튼은 선택된 태그가 빈 태그가 아닌 경우, 즉, 열기 및 닫기 태그가 모두 있는 경우에만 나타납니다.
태그에 조건식이 포함된 경우에는 [표현식] 상자에서 변경합니다.

퀵 태그 편집기 개요

퀵 태그 편집기를 사용하면 디자인 뷰 내에서 빠르게 HTML 태그를 검사, 삽입 및 편집할 수 있습니다.

퀵 태그 편집기에 유효하지 않은 HTML을 입력하면 Dreamweaver에서 필요한 곳에 닫기 따옴표와 닫기 꺾쇠 괄호를 삽입해 수정합니다.

퀵 태그 편집기 옵션을 설정하려면 Control-T(Windows) 또는 Command-T(Macintosh)를 눌러 퀵 태그 편집기를 엽니다.

퀵 태그 편집기에는 세 가지 모드가 있습니다.

[HTML 삽입] 모드는 새 HTML 코드를 삽입할 때 사용합니다.
[태그 편집] 모드는 기존 태그를 편집할 때 사용합니다.

[HTML 삽입] 모드는 새 HTML 코드를 삽입할 때 사용합니다.
[태그 편집] 모드는 기존 태그를 편집할 때 사용합니다.
[태그 둘러싸기] 모드는 현재 선택 영역 주변을 새 태그로 래핑할 때 사용합니다.

참고:

퀵 태그 편집기가 열리는 모드는 디자인 뷰의 현재 선택 영역에 따라 달라집니다.

세 모드 모두에서 퀵 태그 편집기를 사용하는 기본 절차는 동일합니다. 즉, 편집기를 열고 태그와 속성을 입력하거나 편집한 뒤 편집기를 닫습니다.

퀵 태그 편집기가 활성인 상태에서 Ctrl+T(Windows) 또는 Command+T(Macintosh)를 눌러 여러 모드 사이를 전환할 수 있습니다.

퀵 태그 편집기를 사용하여 코드 편집

퀵 태그 편집기(편집 > 퀵 태그 편집기)를 사용하면 디자인 뷰를 종료하지 않고 빠르게 HTML 태그를 삽입하고 편집할 수 있습니다.

HTML 태그 삽입

디자인 뷰에서 페이지 안쪽을 클릭하여 코드를 삽입할 부분에 삽입 포인터를 위치시킵니다.
Control+T(Windows) 또는 Command+T(Macintosh)를 누릅니다.

퀵 태그 편집기가 [HTML 삽입] 모드로 열립니다.

HTML 삽입 모드의 퀵 태그 편집기
HTML 태그를 입력한 다음 Enter 키를 누릅니다.

일치하는 닫기 태그가 있는 경우 닫기 태그와 함께 태그가 코드에 삽입됩니다.
Esc 키를 누르면 변경 사항 없이 종료됩니다.

HTML 태그 편집

디자인 뷰에서 오브젝트를 선택합니다.

[문서] 창 아래에 있는 태그 선택기에서 편집할 태그를 선택할 수도 있습니다. 자세한 내용은 태그 선택기를 사용하여 코드 편집을 참조하십시오.
Control+T(Windows) 또는 Command+T(Macintosh)를 누릅니다.

퀵 태그 편집기가 [HTML 편집] 모드로 열립니다.
새 속성을 입력하거나, 기존 속성을 편집하거나, 태그 이름을 편집합니다.
다음 속성으로 이동하려면 Tab을 누릅니다. 뒤로 이동하려면 Shift+Tab을 누릅니다.

참고:

기본적으로 변경 내용은 Tab 또는 Shift+Tab을 누를 때 문서에 적용됩니다.
[퀵 태그 편집기]를 닫고 변경 내용을 모두 적용하려면 Enter 키를 누릅니다.
변경 사항 없이 종료하려면 Esc 키를 누릅니다.

현재 선택 영역을 HTML 태그로 둘러싸기

디자인 뷰에서 서식 없는 텍스트 또는 오브젝트를 선택합니다.

참고:

열기 또는 닫기 HTML 태그가 포함된 텍스트나 오브젝트를 선택하면, [퀵 태그 편집기]가 [태그 둘러싸기] 모드 대신 [태그 편집] 모드로 열립니다.
Control+T(Windows) 또는 Command+T(Macintosh)를 누르거나, 속성 관리자에서 [퀵 태그 편집기] 버튼을 클릭합니다.

[퀵 태그 편집기]가 [태그 둘러싸기] 모드로 열립니다.
strong 같은 열기 태그 하나를 입력한 다음 Enter 키(Windows)나 Return 키(Macintosh)를 누릅니다.

태그가 현재 선택 영역의 시작 부분에 삽입되며, 대응되는 닫기 태그가 끝 부분에 삽입됩니다.
변경 사항 없이 종료하려면 Esc 키를 누릅니다.

퀵 태그 편집기에서 힌트 메뉴 사용

[퀵 태그 편집기]에는 편집하거나 삽입하는 태그의 모든 유효한 속성이 나열되는 속성 힌트 메뉴가 포함되어 있습니다.

힌트 메뉴를 비활성화하거나 메뉴가 [퀵 태그 편집기]에서 나타날 때까지의 지연 시간을 조정할 수도 있습니다.

태그에 대한 유효한 속성이 나열된 힌트 메뉴를 보려면 [퀵 태그 편집기]에서 속성 이름을 편집할 때 몇 초간 기다립니다. 이렇게 하면 힌트 메뉴가 나타나고, 현재 편집하고 있는 태그의 유효한 속성이 모두 나열됩니다.

마찬가지로, 유효한 태그 이름이 나열된 힌트 메뉴를 보려면 퀵 태그 편집기에서 태그 이름을 입력하거나 편집할 때 몇 초간 기다립니다.

참고:

퀵 태그 편집기 코드 힌트 환경 설정은 일반 코드 힌트 환경 설정으로 제어됩니다. 자세한 내용은 코드 힌트 환경 설정을 참조하십시오.

다음 중 하나를 수행합니다.
- 태그 또는 속성 이름의 입력을 시작합니다. [코드 힌트] 메뉴에서 항목을 선택하면 입력한 문자로 시작되는 첫 번째 항목으로 이동됩니다.
- 위쪽 화살표 키 및 아래 화살표 키를 사용해서 항목을 선택합니다.
- 스크롤 막대를 사용해서 항목을 찾습니다.
Enter 키를 눌러 선택한 항목을 삽입하거나 항목을 더블 클릭하여 삽입합니다.
항목을 삽입하지 않고 힌트 메뉴를 닫으려면 Esc 키를 누르거나 입력을 계속하면 됩니다.

힌트 메뉴 비활성 또는 나타날 때까지의 지연 시간 변경

[편집] > [환경 설정](Windows) 또는 [Dreamweaver] > [환경 설정](Macintosh)을 선택하고 [코드 힌트]를 선택합니다.

[코드 힌트 환경 설정] 대화 상자가 나타납니다.
힌트 메뉴를 비활성화하려면 [코드 힌트 활성화] 옵션의 선택을 취소합니다.

태그 선택기를 사용하여 코드 편집

[태그 선택기]를 사용하여 디자인 뷰 내에서 태그를 선택하거나, 편집하거나, 제거할 수 있습니다. 태그 선택기는 문서 창 아래쪽의 상태 표시줄에 위치하며 여러 태그를 표시합니다.

태그 편집 또는 삭제

문서 안쪽을 클릭합니다.

삽입 포인터에 적용되는 태그가 태그 선택기에 나타납니다.
태그 선택기에서 태그를 마우스 오른쪽 버튼으로 클릭하거나(Windows) Control 키를 누른 채 마우스를 클릭합니다(Macintosh).
태그를 편집하려면 메뉴에서 [태그 편집]을 선택합니다. [퀵 태그 편집기]에서 원하는 대로 변경합니다. 자세한 내용은 퀵 태그 편집기를 사용하여 코드 편집을 참조하십시오.
태그를 삭제하려면 메뉴에서 [태그 제거]를 선택합니다.

태그에 해당하는 오브젝트 선택

문서 안쪽을 클릭합니다.

삽입 포인터에 적용되는 태그가 태그 선택기에 나타납니다.
태그 선택기에서 태그를 클릭합니다.

태그로 표시된 오브젝트가 페이지에서 선택됩니다.

참고:

이 방법을 사용하여 표의 개별 행(tr 태그) 또는 셀(td 태그)을 선택할 수 있습니다.

디자인 뷰에서 스크립트 작성 및 편집

다음 방법으로 코드 보기 및 디자인 뷰에서 클라이언트측 JavaScript 및 VBScript를 사용할 수 있습니다.

디자인 뷰 내에서 페이지에 사용할 JavaScript 또는 VBScript 스크립트를 작성합니다.
디자인 뷰 내에서 외부 스크립트 파일에 대한 링크를 문서 내에 만듭니다.
디자인 뷰 내에서 스크립트를 편집합니다.
시작하기 전에 [보기] > [시각 도구] > [보이지 않는 요소]를 선택하여 페이지에 스크립트 표시자를 표시합니다.

클라이언트측 스크립트 작성

스크립트를 넣을 위치에 삽입 포인터를 놓습니다.
[삽입] > [HTML] > [스크립트]를 선택합니다.
파일 선택 창에서 스크립트를 선택합니다.

참고:

열기 및 닫기 스크립트 태그는 포함할 필요가 없습니다.

선택 파일의 스크립트 태그는 문서에 삽입됩니다.

스크립트 편집

스크립트 표시자를 선택합니다.
속성 관리자에서 [편집] 버튼을 클릭합니다.

[스크립트 속성] 대화 상자에 스크립트가 나타납니다.

외부 스크립트 파일에 연결되어 있으면, 해당 파일이 코드 보기에서 열려 원하는 내용을 편집할 수 있습니다.

참고:

스크립트 태그 사이에 코드가 있는 경우 외부 스크립트 파일로의 링크가 있어도 [스크립트 속성] 대화 상자가 열립니다.
[언어] 상자에서 스크립트 언어로 JavaScript 또는 VBScript를 지정합니다.
[유형] 팝업 메뉴에서 스크립트 유형을 클라이언트측 또는 서버 측으로 지정합니다.
(선택 사항) [소스] 상자에서 외부 연결 스크립트 파일을 지정합니다.

폴더 아이콘 또는 [검색] 버튼을 클릭하여 파일을 선택하거나 경로를 직접 입력합니다.
스크립트를 편집하고 [확인]을 클릭합니다.

디자인 뷰에서 ASP 서버 측 스크립트 편집

ASP 스크립트 속성 관리자를 사용하여 디자인 뷰에서 ASP 서버 측 스크립트를 확인하고 수정합니다.

디자인 뷰에서 서버 언어 태그 시각 아이콘을 선택합니다.
ASP 스크립트 속성 관리자에서 [편집] 버튼을 클릭합니다.
ASP 서버 측 스크립트를 편집하고 [확인]을 클릭합니다.

속성 관리자를 사용하여 페이지의 스크립트 편집

속성 관리자의 [언어] 팝업 메뉴에서 스크립팅 언어를 선택하거나 [언어] 상자에 언어 이름을 입력합니다.

참고:

JavaScript를 사용하고 있으나 버전을 잘 모르는 경우 JavaScript1.1이나 JavaScript1.2가 아닌 JavaScript를 선택합니다.
[유형] 팝업 메뉴에서 스크립트 유형을 클라이언트측 또는 서버 측으로 지정합니다.
(선택 사항) [소스] 상자에서 외부 연결 스크립트 파일을 지정합니다. 폴더 아이콘을 클릭하여 파일을 선택하거나 경로를 입력합니다.
[편집]을 클릭하여 스크립트를 수정합니다.

JavaScript 비헤이비어 사용

[태그 관리자]의 [비헤이비어] 탭을 사용하여 페이지 요소에 JavaScript(클라이언트측) 비헤이비어를 간단하게 연결할 수 있습니다. 자세한 내용은 내장 JavaScript 비헤이비어 적용을 참조하십시오.

유사 검색

쉽고 빠르게 지원 받기

신규 사용자이신가요?