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 요소에 연결할 수 있습니다.
선택한 대상 브라우저에 따라 특정 요소에 지원되는 이벤트가 결정됩니다.
각 이벤트에 둘 이상의 액션을 지정할 수 있습니다. 액션은 [비헤이비어] 패널의 [액션] 열에 나열된 순서대로 발생하며 순서를 변경할 수도 있습니다.
Exchange for Dreamweaver 웹 사이트(www.adobe.com/go/dreamweaver_exchange_kr)에서 다양한 확장 기능을 구할 수 있습니다.
자세한 내용을 보려면 Dreamweaver에서 확장 기능 추가 및 관리를 참조하십시오.
Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.