텍스트를 클릭하거나 페이지에서 오브젝트를 선택합니다.
마지막 업데이트 날짜
2021년 4월 27일
이 항목을 통해 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 태그를 입력한 다음 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 키를 눌러 선택한 항목을 삽입하거나 항목을 두 번 클릭하여 삽입하십시오.
항목을 삽입하지 않고 힌트 메뉴를 닫으려면 Escape 키를 누르거나 계속 입력하십시오.
힌트 메뉴 사용 안 함 또는 나타나기 전의 지연 시간 변경하기
[편집] > [기본 설정](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(클라이언트측) 동작을 쉽게 추가할 수 있습니다.자세한 내용은 Dreamweaver에서 기본 제공 JavaScript 동작 적용하기를 참조하십시오.
