JavaScript 비헤이비어 사용(일반 지침)

검색
이동 Adobe Dreamweaver 사용 안내서

방문자가 웹 페이지를 다양한 방식으로 변경하거나 특정 작업을 시작할 수 있도록 Adobe Dreamweaver에서 JavaScript 비헤이비어를 사용하여 문서에 JavaScript 코드를 배치합니다.

Adobe Dreamweaver 비헤이비어는 방문자가 웹 페이지를 다양한 방식으로 변경하거나 특정 작업을 시작할 수 있도록 문서에 JavaScript 코드를 배치합니다. 비헤이비어는 이벤트와 그 이벤트가 트리거하는 액션을 합쳐서 일컫는 용어입니다. [비헤이비어] 패널에서 액션을 지정한 다음 해당 액션을 트리거하는 이벤트를 지정하여 페이지에 비헤이비어를 추가합니다.

참고:

비헤이비어 코드는 클라이언트측 JavaScript 코드입니다. 즉, 서버가 아닌 브라우저에서 실행됩니다.

이벤트는 브라우저에서 생성한 메시지이며 페이지 방문자가 특정 액션을 수행했음을 알려 줍니다. 예를 들어 방문자가 포인터를 링크로 가져가면 브라우저는 이 링크에 대한 onMouseOver 이벤트를 생성한 다음 이 행위에 대한 응답으로 호출해야 할 JavaScript 코드가 조회 중인 페이지에 지정되어 있는지 확인합니다. 페이지 요소에 따라 다른 이벤트가 정의됩니다. 예를 들어 대부분의 브라우저에서 onMouseOver와 onClick은 링크와 관련된 이벤트이고, onLoad는 이미지 및 문서의 body 섹션과 관련된 이벤트입니다.

액션은 브라우저 창 열기, AP 요소 표시/숨기기, 사운드 재생, Adobe Shockwave 동영상 중단 등의 작업을 수행하는 미리 작성된 JavaScript 코드입니다. Dreamweaver에 제공되는 액션은 브라우저 간 호환성이 탁월합니다.

페이지 요소에 비헤이비어를 연결하면 해당 요소에 대한 이벤트가 발생할 때마다 그 이벤트와 연관된 액션(JavaScript 코드)이 호출됩니다. 특정 액션을 트리거하는 데 사용할 수 있는 이벤트는 브라우저마다 다릅니다. 예를 들어 팝업 메시지 액션을 링크에 연결하고 onMouseOver 이벤트에 의해 트리거되도록 지정하면 링크에 마우스 포인터를 올려놓을 때마다 메시지가 팝업됩니다.

하나의 이벤트로 여러 가지 다른 액션을 트리거할 수 있으며 액션이 발생하는 순서를 지정할 수 있습니다.

Dreamweaverㅊ에서는 20여 개의 액션을 제공합니다. Exchange 웹 사이트(www.adobe.com/go/dreamweaver_exchange_kr) 및 타사 개발자 사이트에서 추가 액션을 얻을 수 있습니다. JavaScript에 능숙한 경우 액션을 직접 작성할 수 있습니다.

참고:

비헤이비어 및 액션은 Dreamweaver에서 사용하는 용어이며 HTML 용어가 아닙니다. 브라우저의 관점에서 보면 액션은 JavaScript 코드 중 하나에 불과합니다.

비헤이비어 패널 개요

[비헤이비어] 패널([윈도우] > [비헤이비어])을 사용하여 페이지 요소(보다 정확하게는 태그)에 비헤이비어를 연결하고 이전에 연결한 비헤이비어의 매개 변수를 수정할 수 있습니다.

현재 선택한 페이지 요소에 이미 연결된 비헤이비어는 패널의 주 영역인 비헤이비어 목록에 이벤트별 문자순으로 표시됩니다. 같은 이벤트에 여러 액션이 나열된 경우에는 목록에 표시된 순서대로 액션이 실행됩니다. 비헤이비어 목록에 비헤이비어가 표시되지 않으면 현재 선택한 요소에 연결된 비헤이비어가 없는 것입니다.

[비헤이비어] 패널에는 다음과 같은 옵션이 있습니다.

설정된 이벤트 보기

현재 문서에 연결된 이벤트만 표시합니다. 이벤트는 클라이언트측 및 서버 측 범주로 분류됩니다. 각 범주의 이벤트는 축소 가능한 목록에 있습니다. [설정된 이벤트 보기]는 기본 보기입니다.

모든 이벤트 보기

특정 범주의 모든 이벤트를 사전순으로 표시합니다.

비헤이비어 추가(+)

현재 선택한 요소에 연결할 수 있는 액션의 메뉴를 표시합니다. 이 목록에서 액션을 선택하면 액션 매개 변수를 지정할 수 있는 대화 상자가 열립니다. 모든 액션이 흐리게 표시된 경우에는 선택한 요소에서 이벤트를 생성할 수 없는 것입니다.

이벤트 제거(–)

비헤이비어 목록에서 선택한 이벤트 및 액션을 제거합니다.

위쪽 및 아래쪽 화살표 버튼

특정 이벤트의 비헤이비어 목록에서 선택한 액션을 위아래로 이동합니다. 특정 이벤트에 대해서만 액션 순서를 변경할 수 있습니다. 예를 들어 onLoad 이벤트에 대한 일부 액션의 발생 순서를 변경할 수 있습니다. 단, 비헤이비어 목록에서 onLoad 이벤트에 대한 모든 액션은 한 군데 같이 모여 있습니다. 목록에서 위아래로 이동할 수 없는 액션에 대해서는 화살표 버튼이 비활성화됩니다.

이벤트

액션을 트리거할 수 있는 모든 이벤트의 팝업 메뉴를 표시합니다. 이 팝업 메뉴는 이벤트를 선택하고 선택한 이벤트 이름 옆의 화살표 버튼을 클릭할 때 표시됩니다. 선택한 오브젝트에 따라 다른 이벤트가 표시됩니다. 의도한 이벤트가 표시되지 않으면 올바른 페이지 요소나 태그를 선택했는지 확인합니다. 특정 태그를 선택하려면 문서 창의 왼쪽 아래에 있는 태그 선택기를 사용합니다.

참고:

괄호로 묶인 이벤트 이름은 링크에만 사용할 수 있습니다. 이러한 이벤트 이름 중 하나를 선택하면 선택한 페이지 요소에 비어 있는 링크가 자동으로 추가되고 요소 자체가 아닌 해당 링크에 비헤이비어가 연결됩니다. 비어 있는 링크는 HTML 코드에서 href="javascript:;"로 지정됩니다.

이벤트 정보

각 브라우저에서는 [비헤이비어] 패널의 [액션](+) 메뉴에 나열된 액션에 연결할 수 있는 이벤트 집합을 제공합니다. 웹 페이지 방문자가 이미지를 클릭하는 등 웹 페이지와 상호 작용하면 브라우저에서 이벤트를 생성합니다. 이 이벤트를 사용하면 액션을 수행하는 JavaScript 함수를 호출할 수 있습니다. Dreamweaver에서는 이러한 이벤트로 트리거할 수 있는 일반적인 다양한 액션을 제공합니다.

각 브라우저에서 제공하는 이벤트의 이름 및 설명은 Dreamweaver 지원 센터(www.adobe.com/go/dreamweaver_support_kr)를 참조하십시오.

선택한 오브젝트에 따라 [이벤트] 메뉴에 다른 이벤트가 표시됩니다. 특정 브라우저가 특정 페이지 요소에 대해 지원하는 이벤트를 확인하려면 문서에 페이지 요소를 삽입하고 비헤이비어를 연결한 다음 [비헤이비어] 패널의 [이벤트] 메뉴를 확인합니다. 기본적으로 이벤트는 HTML 4.01 이벤트 목록에서 가져오며, 대부분의 모뎀 브라우저에서 지원됩니다. 관련 오브젝트가 페이지에 없거나 선택한 오브젝트가 이벤트를 받을 수 없으면 이벤트가 비활성화되어 흐리게 표시될 수 있습니다. 의도한 이벤트가 표시되지 않으면 올바른 오브젝트를 선택했는지 확인합니다.

이미지에 비헤이비어를 첨부하면 onMouseOver 같은 일부 이벤트가 괄호로 묶여 표시됩니다. 이러한 이벤트는 링크에만 사용할 수 있습니다. 이러한 이벤트 중 하나를 선택하면 Dreamweaver에서는 이미지 앞뒤에 <a> 태그를 넣어 비어 있는 링크를 정의합니다. 비어 있는 링크는 속성 관리자의 [링크] 상자에서 javascript:;로 표시됩니다. 링크를 다른 페이지에 대한 실제 링크로 변경하려는 경우 링크 값을 변경할 수 있지만 다른 링크로 교체하지 않고 JavaScript 링크를 삭제하면 비헤이비어가 제거됩니다.

특정 브라우저에서 특정 이벤트에 사용할 수 있는 태그를 확인하려면 Dreamweaver/Configuration/Behaviors/Events 폴더에 있는 파일 중 하나에서 이벤트를 검색합니다.

비헤이비어 적용

비헤이비어는 전체 문서(<body> 태그), 링크, 이미지, 양식 요소 및 기타 여러 가지 HTML 요소에 연결할 수 있습니다.

선택한 대상 브라우저에 따라 특정 요소에 지원되는 이벤트가 결정됩니다.

각 이벤트에 둘 이상의 액션을 지정할 수 있습니다. 액션은 [비헤이비어] 패널의 [액션] 열에 나열된 순서대로 발생하며 순서를 변경할 수도 있습니다.

  1. 페이지에서 이미지나 링크 등의 요소를 선택합니다.

    전체 페이지에 비헤이비어를 첨부하려면 문서 창의 왼쪽 아래 모서리에 있는 태그 선택기에서 <body> 태그를 클릭합니다.

  2. [윈도우] > [비헤이비어]를 선택합니다.
  3. 플러스(+) 버튼을 클릭한 다음 [비헤이비어 추가] 메뉴에서 액션을 선택합니다.

    메뉴에 흐리게 표시된 액션은 선택할 수 없습니다. 현재 문서에 필요한 오브젝트가 없기 때문에 관련 액션이 흐리게 표시될 수 있습니다. 예를 들어 문서에 Shockwave 또는 SWF 파일이 없으면 [Shockwave 또는 SWF 제어] 액션이 흐리게 표시됩니다.

    액션을 선택하면 액션의 매개 변수와 명령을 보여 주는 대화 상자가 표시됩니다.

  4. 액션의 매개 변수를 입력하고 [확인]을 클릭합니다.

    Dreamweaver에서 제공하는 모든 액션은 모뎀 브라우저에서 실행됩니다. 일부 액션은 이전 브라우저에서 실행되지 않지만, 오류를 발생하지 않습니다.

    참고:

    대상 요소에 고유한 ID가 필요합니다. 예를 들어 이미지 교체 비헤이비어를 이미지에 적용하려면 이미지에 ID가 필요합니다. 요소에 대해 ID를 지정하지 않으면 Dreamweaver에서 자동으로 지정합니다.

  5. 액션을 트리거하는 기본 이벤트는 [이벤트] 열에 표시됩니다. 원하는 트리거 이벤트가 아닌 경우 [이벤트] 팝업 메뉴에서 다른 이벤트를 선택합니다. [이벤트] 메뉴를 열려면 [비헤이비어] 패널에서 이벤트나 액션을 선택하고 이벤트 이름과 액션 이름 사이에 표시되는 검정색 아래쪽 화살표를 클릭합니다.

비헤이비어 변경 또는 삭제

비헤이비어를 연결한 후 액션을 트리거하는 이벤트를 변경하고, 액션을 추가하거나 제거하고, 액션의 매개 변수를 변경할 수 있습니다.

  1. 비헤이비어가 연결된 오브젝트를 선택합니다.
  2. [윈도우] > [비헤이비어]를 선택합니다.
  3. 원하는 대로 변경합니다.

    • 액션의 매개 변수를 편집하려면 매개 변수 이름을 더블 클릭하거나 이름을 선택하고 Enter 키(Windows) 또는 Return 키(Macintosh)를 누릅니다. 그런 다음 대화 상자에서 매개 변수를 변경하고 [확인]을 클릭합니다.

    • 특정 이벤트의 액션 순서를 변경하려면 액션을 선택하고 위쪽 또는 아래쪽 화살표 버튼을 클릭합니다. 또는 액션을 선택하고 잘라낸 다음 다른 액션 사이에서 원하는 위치에 붙여넣을 수 있습니다.

    • 비헤이비어를 삭제하려면 비헤이비어를 선택하고 마이너스(-) 버튼을 클릭하거나 Delete 키를 누릅니다.

비헤이비어 업데이트

  1. 비헤이비어가 연결된 요소를 선택합니다.
  2. [윈도우] > [비헤이비어]를 선택하고 비헤이비어를 더블 클릭합니다.
  3. 비헤이비어 대화 상자에서 필요한 변경을 수행한 후 [확인]을 클릭합니다.

    페이지에 나타나는 해당 비헤이비어가 모두 업데이트됩니다. 사이트의 다른 페이지에 이러한 비헤이비어가 있으면 페이지마다 비헤이비어를 업데이트해야 합니다.

타사 비헤이비어 다운로드 및 설치

Exchange for Dreamweaver 웹 사이트(www.adobe.com/go/dreamweaver_exchange_kr)에서 다양한 확장 기능을 구할 수 있습니다.

  1. [윈도우] > [비헤이비어]를 선택하고 [비헤이비어 추가] 메뉴에서 [비헤이비어 내려받기]를 선택합니다.

    기본 브라우저가 열리고 Exchange 사이트가 표시됩니다.

  2. 패키지를 찾거나 검색합니다.
  3. 원하는 Extension 패키지를 다운로드하여 설치합니다.

자세한 내용을 보려면 Dreamweaver에서 확장 기능 추가 및 관리를 참조하십시오.

Adobe 로고

내 계정 로그인

빠른 연결

내 앱 보기 내 플랜 관리

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