사용 안내서 취소

내장 JavaScript 비헤이비어 적용

검색

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

Dreamweaver

앱 열기

이 항목을 통해 Adobe Dreamweaver에서 내장 JavaScript 비헤이비어를 적용하는 방법에 대해 살펴보시기 바랍니다.

내장 비헤이비어 사용

Dreamweaver에 포함된 비헤이비어는 모뎀 브라우저에서 실행되도록 작성되었습니다. 이전 버전의 브라우저에서는 비헤이비어가 자동으로 작동하지 않습니다.

참고:

Dreamweaver 액션은 최대한 폭넓은 브라우저에서 실행되도록 주의 깊게 작성되었습니다. Dreamweaver 액션에서 수동으로 코드를 제거하거나 직접 작성한 코드로 바꾸면 브라우저 간 호환성이 사라질 수 있습니다.

Dreamweaver 액션은 브라우저 간 호환성을 최대화하도록 작성되었지만 일부 브라우저는 JavaScript를 전혀 지원하지 않으며 브라우저의 JavaScript 지원 기능을 해제하는 사용자도 많습니다. 따라서 플랫폼 간 호환성을 최대화하려면 JavaScript 기능을 사용하지 않는 사용자도 사이트를 사용할 수 있도록 <noscript> 태그 안에 대체 인터페이스를 넣는 것이 좋습니다.

JavaScript 호출 비헤이비어 적용

[JavaScript 호출] 비헤이비어는 이벤트가 발생할 때 사용자 정의 함수 또는 JavaScript 코드를 실행합니다. 스크립트를 직접 작성하거나 웹에서 무료로 얻을 수 있는 다양한 JavaScript 라이브러리에서 제공하는 코드를 사용할 수 있습니다.

오브젝트를 선택하고 [비헤이비어] 패널의 [비헤이비어 추가] 메뉴에서 [JavaScript 호출]을 선택합니다.
실행할 JavaScript를 정확하게 입력하거나 함수 이름을 입력합니다.

예를 들어 [뒤로] 버튼을 만들려면 if (history.length > 0){history.back()}을 입력할 수 있습니다. 코드를 함수로 캡슐화한 경우에는 함수 이름(예: hGoBack())만 입력합니다.
[확인]을 클릭하고 기본 이벤트가 정확한지 확인합니다.

속성 바꾸기 비헤이비어 적용

[속성 바꾸기] 비헤이비어를 사용하여 div의 배경색 또는 양식의 액션 등 오브젝트 속성 중 하나의 값을 변경할 수 있습니다.

참고:

HTML 및 JavaScript에 매우 익숙한 경우에만 이 비헤이비어를 사용하십시오.

오브젝트를 선택하고 [비헤이비어] 패널의 [비헤이비어 추가] 메뉴에서 [속성 바꾸기]를 선택합니다.
[요소 유형] 메뉴에서 요소 유형을 선택하여 해당 유형에 속하는 식별된 모든 요소를 표시합니다.
[요소 ID] 메뉴에서 요소를 선택합니다.
[속성] 메뉴에서 속성을 선택하거나 상자에 속성 이름을 입력합니다.
[새 값] 필드에 새 속성에 대한 새 값을 입력합니다.
[확인]을 클릭하고 기본 이벤트가 정확한지 확인합니다.

플러그인 확인 비헤이비어 적용

[플러그인 확인] 비헤이비어를 사용하여 지정된 플러그인의 설치 여부에 따라 방문자에게 서로 다른 페이지를 표시할 수 있습니다. 예를 들어 Shockwave가 설치된 방문자에는 특정 페이지를 표시하고 설치되지 않은 방문자에게는 다른 페이지를 표시할 수 있습니다.

참고:

Internet Explorer에서는 JavaScript를 사용하여 특정 플러그인을 검색할 수 없습니다. 그러나 Flash나 Director를 선택하면 페이지에 적절한 VBScript 코드가 추가되어 Windows의 Internet Explorer에서 해당 플러그인을 검색할 수 있습니다. Mac OS용 Internet Explorer에서는 플러그인을 검색할 수 없습니다.

오브젝트를 선택하고 [비헤이비어] 패널의 [비헤이비어 추가] 메뉴에서 [플러그인 확인]을 선택합니다.
[플러그인] 메뉴에서 플러그인을 선택하거나 [입력]을 클릭하고 바로 옆의 상자에 플러그인의 정확한 이름을 입력합니다.

Netscape Navigator의 [About Plug-ins] 페이지에 굵은 글꼴로 표시된 플러그인의 정확한 이름을 사용해야 합니다. Windows에서는 Navigator의 [Help] > [About Plug-ins] 명령을 선택하고, Mac OS에서는 [Apple] 메뉴에서 [About Plug-ins]를 선택합니다.
[발견 시, URL로 이동] 상자에 플러그인이 있는 방문자를 위한 URL을 지정합니다.

원격 URL을 지정하는 경우에는 주소에 http:// 접두어를 포함해야 합니다. 필드를 비워 두면 방문자가 해당 페이지에 멈추게 됩니다.
[그렇지 않으면, URL로 이동] 상자에 플러그인이 없는 방문자를 위한 대체 URL을 지정합니다. 필드를 비워 두면 방문자가 해당 페이지에 멈추게 됩니다.
플러그인 검색이 불가능한 경우 수행할 작업을 지정합니다. 기본적으로 검색이 불가능한 경우 방문자는 [그렇지 않으면] 상자에 나열된 URL로 이동됩니다. 방문자를 처음 URL, 즉 [발견 시, URL로 이동] 텍스트 상자에 지정한 URL로 보내려면 [검색할 수 없는 경우 항상 처음 URL로 이동] 옵션을 선택합니다. 이 옵션을 선택하면 브라우저에서 플러그인이 없다는 사실이 명확하지 않은 경우 방문자에게 플러그인이 있다고 가정하게 됩니다. 일반적으로 플러그인 내용이 페이지에 필수적인 경우 이 옵션을 선택하고 그렇지 않으면 선택하지 않습니다.

참고:

이 옵션은 Internet Explorer에만 적용되며 Netscape Navigator에서는 플러그인 검색이 항상 가능합니다.
[확인]을 클릭하고 기본 이벤트가 정확한지 확인합니다.

AP 요소 드래그 비헤이비어 적용

방문자는 [AP 요소 드래그] 비헤이비어를 사용하여 AP(Absolutely Positioned) 요소를 드래그할 수 있습니다. 이 비헤이비어를 사용하여 퍼즐, 슬라이더 컨트롤 및 기타 이동 가능한 인터페이스 요소를 만듭니다.

방문자가 AP 요소를 드래그할 수 있는 방향(수평, 수직 또는 모든 방향), 방문자가 AP 요소를 드래그할 대상, AP 요소와 대상의 거리가 특정 픽셀 수 이내인 경우 대상에 AP 요소를 스냅할지 여부, AP 요소가 대상에 닿을 때 수행할 작업 등을 지정할 수 있습니다.

방문자가 AP 요소를 드래그하려면 [AP 요소 드래그] 비헤이비어를 호출해야 하므로, onLoad 이벤트를 통해 body 오브젝트에 [AP 요소 드래그]를 연결해야 합니다.

[삽입] > [레이아웃 오브젝트] > [AP Div]를 선택하거나 [삽입] 패널의 [AP Div 그리기] 버튼을 클릭하고 문서 창의 디자인 뷰에서 AP Div를 그립니다.
문서 창 왼쪽 아래 모서리의 태그 선택기에서 <body>를 클릭합니다.
[비헤이비어] 패널의 [비헤이비어 추가] 메뉴에서 [AP 요소 드래그]를 선택합니다.

[AP 요소 드래그]를 사용할 수 없는 경우는 보통 AP 요소가 이미 선택되어 있는 상태이기 때문입니다.
[AP 요소] 팝업 메뉴에서 AP 요소를 선택합니다.
[이동] 팝업 메뉴에서 [제한]이나 [제한 안 함]을 선택합니다.

제한 없는 이동은 퍼즐 및 기타 드래그 앤 드롭 게임에 적합합니다. 파일 서랍, 커튼 및 미니 블라인드 같은 이동 가능한 배경과 슬라이더 컨트롤의 경우 제한된 이동을 선택합니다.
제한된 이동의 경우 [위], [아래], [왼쪽], [오른쪽] 상자에 값을 픽셀 단위로 입력합니다.

값의 기준은 AP 요소의 시작 위치입니다. 사각 영역 내에서 이동을 제한하려면 네 상자 모두에 양수 값을 입력합니다. 수직 이동만 허용하려면 [위]와 [아래]에는 양수를, [왼쪽]과 [오른쪽]에는 0을 입력합니다. 수평 이동만 허용하려면 [왼쪽]과 [오른쪽]에는 양수를, [위]와 [아래]에는 0을 입력합니다.
[왼쪽] 및 [위] 상자에 드롭 대상의 값을 픽셀 단위로 입력합니다.

드롭 대상은 방문자가 AP 요소를 드래그할 지점입니다. AP 요소의 왼쪽 및 위 좌표가 [왼쪽] 및 [위] 상자에 입력한 값과 일치하면 AP 요소가 드롭 대상에 도달한 것으로 간주됩니다. 값의 기준은 브라우저 창의 왼쪽 위 모서리입니다. [현재 위치]를 클릭하면 AP 요소의 현재 위치가 텍스트 상자에 자동으로 입력됩니다.
[스냅 조건] 상자에 픽셀 단위로 값을 입력하여 AP 요소를 대상에 스냅하려면 드롭 대상에 어느 정도 근접해야 하는지 결정합니다.

값이 클수록 방문자가 드롭 대상을 찾기 쉽습니다.
간단한 퍼즐이나 배경 조작의 경우 이 단계에서 작업을 마칠 수 있습니다. AP 요소의 드래그 핸들을 정의하고, 드래그되는 동안 AP 요소의 이동을 추적하고, AP 요소가 드롭될 때 액션을 트리거하려면 [고급] 탭을 클릭합니다.
방문자가 AP 요소의 특정 영역을 클릭해야 AP 요소를 드래그할 수 있도록 지정하려면 [핸들 드래그] 메뉴에서 [요소 내의 영역]을 선택한 다음 드래그 핸들의 왼쪽 및 위 좌표와 폭 및 높이를 입력합니다.

이 옵션은 AP 요소 내 이미지에 제목 표시줄 또는 서랍 손잡이와 같이 드래그를 유도하는 요소가 있는 경우 유용합니다. 방문자가 AP 요소의 아무 위치나 클릭하여 드래그할 수 있도록 하려면 이 옵션을 설정하지 마십시오.
[드래그하는 동안] 옵션 중에서 사용할 옵션을 선택합니다.
- 드래그되는 동안 AP 요소를 쌓인 순서에서 맨 앞으로 이동하려면 [요소를 앞으로 가져오기]를 선택합니다. 이 옵션을 선택한 경우 팝업 메뉴를 사용하여 AP 요소를 맨 앞에 유지할지 또는 쌓인 순서에서 원래 위치로 되돌릴지를 선택합니다.
- [JavaScript 호출] 상자에 JavaScript 코드나 함수 이름(예: monitorAPelement())을 입력하여 AP 요소가 드래그되는 동안 코드나 함수를 반복적으로 실행할 수 있습니다. 예를 들어 AP 요소의 좌표를 모니터하여 텍스트 상자에 "드롭 대상에 가까워지고 있습니다." 또는 "드롭 대상에서 멀리 있습니다." 등의 힌트를 표시하는 함수를 작성할 수 있습니다.
두 번째 [JavaScript 호출] 상자에 JavaScript 코드나 함수 이름(예: evaluateAPelementPos())을 입력하여 AP 요소가 드롭될 때 코드나 함수를 실행할 수 있습니다. AP 요소가 드롭 대상에 도달한 경우에만 JavaScript를 실행하려면 [스냅된 경우에만]을 선택합니다.
[확인]을 클릭하고 기본 이벤트가 정확한지 확인합니다.

드래그할 수 있는 AP 요소에 대한 정보 수집

오브젝트에 [AP 요소 드래그] 비헤이비어를 연결하면 Dreamweaver에서는 MM_dragLayer() 함수를 문서의 head 섹션에 삽입합니다. 이 기능은 AP 요소(즉, “레이어")에 대한 이전 이름 지정 규칙을 유지하므로 이전 버전 Dreamweaver에서 생성된 레이어를 편집할 수 있습니다. 이 함수는 AP 요소를 드래그할 수 있는 요소로 등록할 뿐만 아니라 드래그할 수 있는 각 AP 요소의 세 가지 속성 즉, MM_LEFTRIGHT, MM_UPDOWN 및 MM_SNAPPED를 정의합니다. 직접 작성한 JavaScript 함수에서 이러한 속성을 사용하면 AP 요소의 상대적인 수평 위치, 상대적인 수직 위치 및 AP 요소가 드롭 대상에 도달했는지 여부 등을 파악할 수 있습니다.

참고:

여기에서 제공하는 정보는 숙련된 JavaScript 프로그래머를 위한 것입니다.

예를 들어 다음 함수는 curPosField라는 양식 필드의 MM_UPDOWN 속성 값(AP 요소의 현재 수직 위치)을 표시합니다. 양식 필드는 동적이므로 계속 업데이트되는 정보를 표시하는 데 유용합니다. 즉, 페이지를 완전히 로드한 후에도 내용을 변경할 수 있습니다.

function getPos(layerId){ 
    var layerRef = document.getElementById(layerId); 
    var curVertPos = layerRef.MM_UPDOWN; 
    document.tracking.curPosField.value = curVertPos; 
}

양식 필드에서 MM_UPDOWN 또는 MM_LEFTRIGHT 속성 값을 표시하는 대신 다른 여러 방법으로 두 값을 사용할 수 있습니다. 예를 들어 값이 드롭 영역에 얼마나 가까운지에 따라 양식 필드에 메시지를 표시하는 함수를 작성하거나, 값에 따라 AP 요소를 표시하거나 숨기는 다른 함수를 호출할 수 있습니다.

방문자가 다음 페이지나 작업을 진행하기 전에 해당 AP 요소 모두가 대상에 도달해야 하는 여러 AP 요소가 페이지에 있는 경우에는 MM_SNAPPED 속성을 읽는 것이 특히 유용합니다. 예를 들어 MM_SNAPPED의 값이 true인 AP 요소 수를 계산하는 함수를 작성하여 AP 요소가 드롭될 때마다 호출할 수 있습니다. 스냅된 수가 원하는 숫자에 도달하면 방문자를 다음 페이지로 보내거나 축하 메시지를 표시할 수 있습니다.

URL로 이동 비헤이비어 적용

[URL로 이동] 비헤이비어는 현재 창 또는 지정한 프레임에서 새 페이지를 엽니다. 이 비헤이비어는 한 번 클릭하여 둘 이상의 프레임 내용을 변경하는 데 유용합니다.

오브젝트를 선택하고 [비헤이비어] 패널의 [비헤이비어 추가] 메뉴에서 [URL로 이동]을 선택합니다.
[열기] 목록에서 URL의 대상을 선택합니다.

[열기] 목록에는 기본 창뿐만 아니라 현재 프레임세트의 모든 프레임 이름이 자동으로 나열됩니다. 프레임이 없으면 기본 창이 유일한 옵션입니다.

참고:

이름이 top, blank, self 또는 parent인 프레임이 있으면 이 비헤이비어는 예기치 않은 결과를 초래할 수 있습니다. 브라우저가 이러한 이름을 예약된 대상 이름으로 오해하는 경우도 있기 때문입니다.
[검색]을 클릭하여 열려는 문서를 선택하거나 [URL] 상자에 문서의 경로와 파일 이름을 입력합니다.
다른 프레임에서 문서를 추가로 열려면 2단계와 3단계를 반복합니다.
[확인]을 클릭하고 기본 이벤트가 정확한지 확인합니다.

점프 메뉴 비헤이비어 적용

[삽입] > [양식] > [점프 메뉴]를 사용하여 점프 메뉴를 만들면 Dreamweaver에서 메뉴 오브젝트를 만들고 [점프 메뉴] 또는 [점프 메뉴 이동] 비헤이비어를 연결합니다. 일반적으로 [점프 메뉴] 비헤이비어는 오브젝트에 수동으로 연결할 필요가 없습니다.

다음 두 가지 방법 중 하나로 기존 점프 메뉴를 편집할 수 있습니다.

[비헤이비어] 패널에서 기존 [점프 메뉴] 비헤이비어를 더블 클릭하여 메뉴 항목을 편집 및 재배치하고, 점프할 파일을 변경하고, 해당 파일이 열리는 창을 변경할 수 있습니다.
모든 메뉴의 항목을 편집할 때와 같이 메뉴를 선택하고 [속성 관리자]에서 [목록값] 버튼을 사용하여 메뉴의 항목을 편집할 수 있습니다.

문서에 점프 메뉴 오브젝트가 없으면 오브젝트를 만듭니다.
오브젝트를 선택하고 [비헤이비어] 패널의 [비헤이비어 추가] 메뉴에서 [점프 메뉴]를 선택합니다.
[점프 메뉴] 대화 상자에서 원하는 대로 변경하고 [확인]을 클릭합니다.

점프 메뉴 이동 비헤이비어 적용

[점프 메뉴 이동] 비헤이비어는 [점프 메뉴] 비헤이비어와 긴밀하게 관련되어 있습니다. [점프 메뉴 이동]을 사용하면 [이동] 버튼을 점프 메뉴에 연결할 수 있습니다. 이 비헤이비어를 사용하려면 문서에 점프 메뉴가 이미 있어야 합니다. [이동] 버튼을 클릭하면 점프 메뉴에서 선택한 링크가 열립니다. 점프 메뉴에서 항목을 선택하면 일반적으로 사용자 동작이 없어도 URL이 로드되므로 점프 메뉴에는 보통 [이동] 버튼이 필요하지 않습니다. 그러나 방문자가 점프 메뉴에서 이미 선택한 항목을 다시 선택하면 점프가 발생하지 않습니다. 이는 일반적으로 문제가 되지 않지만, 점프 메뉴가 프레임에 있고 점프 메뉴 항목이 다른 프레임의 페이지로 링크되는 경우에는 [이동] 버튼을 통해 방문자가 점프 메뉴에서 이미 선택한 항목을 다시 선택할 수 있게 하는 것이 좋습니다.

참고:

점프 메뉴에서 [이동] 버튼을 사용하는 경우 [이동] 버튼은 메뉴에서 선택한 항목과 연결된 URL로 "점프 이동"하는 유일한 방법입니다. 점프 메뉴에서 메뉴 항목을 선택하면 사용자가 더 이상 다른 페이지나 프레임으로 자동으로 리디렉션되지 않습니다.

[이동] 버튼으로 사용할 오브젝트(일반적으로 버튼 이미지)를 선택하고 [비헤이비어] 패널의 [비헤이비어 추가] 메뉴에서 [점프 메뉴 이동]을 선택합니다.
[점프 메뉴 선택] 메뉴에서 [이동] 버튼으로 활성화할 메뉴를 선택하고 [확인]을 클릭합니다.

브라우저 창 열기 비헤이비어 적용

[브라우저 창 열기] 비헤이비어를 사용하면 새 창에서 페이지를 열 수 있습니다. 크기, 속성(크기 조절 가능 여부, 메뉴 막대 존재 여부 등) 및 이름을 포함하여 새 창의 속성을 지정할 수 있습니다. 예를 들어 이 비헤이비어를 사용하면 방문자가 축소판 이미지를 클릭할 때 별도의 창에 더 큰 이미지를 열 수 있습니다. 즉, 이 비헤이비어를 사용하면 이미지와 동일한 크기의 새 창을 만들 수 있습니다.

창의 속성을 지정하지 않으면 해당 창을 연 원래 창의 크기와 속성을 사용하여 창이 열립니다. 창의 속성을 지정하면 명시적으로 설정하지 않은 속성은 모두 자동으로 해제됩니다. 예를 들어 창에 속성을 설정하지 않으면 1024×768픽셀로 열리고 내비게이션 바([앞으로], [뒤로], [홈] 및 [새로 고침] 버튼 표시), 위치 툴바(URL 표시), 상태 표시줄(하단에 상태 메시지 표시) 및 메뉴 막대([파일], [편집], [보기] 및 기타 메뉴 표시)가 표시됩니다. 폭을 640, 높이를 480으로 명시적으로 설정하고 다른 속성은 설정하지 않으면 창이 툴바 없이 640×480 픽셀로 열립니다.

오브젝트를 선택하고 [비헤이비어] 패널의 [비헤이비어 추가] 메뉴에서 [브라우저 창 열기]를 선택합니다.
[검색]을 클릭하여 파일을 선택하거나 표시할 URL을 입력합니다.
창의 폭 및 높이 옵션을 픽셀 단위로 설정하고 다양한 툴바, 스크롤 막대, 크기 조절 핸들 등을 통합하는 옵션을 설정합니다. 창을 링크의 대상으로 지정하거나 JavaScript로 제어하려는 경우 창에 공백 또는 특수 문자가 없는 이름을 지정합니다.
[확인]을 클릭하고 기본 이벤트가 정확한지 확인합니다.

팝업 메시지 비헤이비어 적용

[팝업 메시지] 비헤이비어는 지정한 메시지와 함께 JavaScript 경고를 표시합니다. JavaScript 경고에는 [확인] 버튼만 있으므로 이 비헤이비어는 사용자에게 선택 사항을 제공하기 보다는 정보를 제공하는 데 사용됩니다.

유효한 JavaScript 함수 호출, 속성, 전역 변수 또는 다른 표현식을 텍스트에 포함할 수 있습니다. JavaScript 표현식을 포함하려면 표현식을 중괄호({}) 내에 입력합니다. 화면에 중괄호를 표시하려면 앞에 백슬래시(\{)를 입력합니다.

예제:

The URL for this page is {window.location}, and today is {new Date()}.

참고:

브라우저는 경고 메시지의 모양을 제어합니다. 메시지 모양을 보다 자세히 제어하려면 [브라우저 창 열기] 비헤이비어를 사용해 보십시오.

오브젝트를 선택하고 [비헤이비어] 패널의 [비헤이비어 추가] 메뉴에서 [팝업 메시지]를 선택합니다.
[메시지] 상자에 메시지를 입력합니다.
[확인]을 클릭하고 기본 이벤트가 정확한지 확인합니다.

이미지 미리 로드하기 비헤이비어 적용

[이미지 미리 로드하기] 비헤이비어는 비헤이비어나 스크립트로 교체될 이미지와 같이 페이지가 처음 나타날 때 표시되지 않는 이미지를 캐시하여 화면 표시 시간을 단축합니다.

참고:

[이미지 교체] 비헤이비어는 [이미지 교체] 대화 상자에서 [이미지 미리 로드하기] 옵션을 선택하는 경우 강조 표시되는 모든 이미지를 자동으로 미리 로드하므로 [이미지 교체]를 사용할 때는 [이미지 미리 로드하기]를 수동으로 추가하지 않아도 됩니다.

오브젝트를 선택하고 [비헤이비어] 패널의 [비헤이비어 추가] 메뉴에서 [이미지 미리 로드하기]를 선택합니다.
[검색]을 클릭하여 이미지 파일을 선택하거나 [이미지 소스 파일] 상자에 이미지 파일 이름과 파일 경로를 입력합니다.
대화 상자 위쪽의 플러스(+) 버튼을 클릭하여 [이미지 미리 로드하기] 목록에 이미지를 추가합니다.
현재 페이지로 미리 로드할 나머지 모든 이미지에 대해 2단계와 3단계를 반복합니다.
[이미지 미리 로드하기] 목록에서 이미지를 제거하려면 이미지를 선택하고 [마이너스](-) 버튼을 클릭합니다.
[확인]을 클릭하고 기본 이벤트가 정확한지 확인합니다.

프레임의 텍스트 설정 비헤이비어 적용

[프레임의 텍스트 설정] 비헤이비어를 사용하면 프레임의 내용과 서식을 지정한 내용으로 교체하여 프레임의 텍스트를 동적으로 설정할 수 있습니다. 유효한 모든 HTML 코드를 이 내용으로 사용할 수 있습니다. 이 비헤이비어를 사용하여 정보를 동적으로 표시합니다.

[프레임의 텍스트 설정] 비헤이비어는 프레임의 서식을 변경하지만 배경색 보존을 선택하면 페이지 배경색 및 텍스트 색상 속성을 보존할 수 있습니다.

예제:

The URL for this page is {window.location}, and today is {new Date()}.

오브젝트를 선택하고 [비헤이비어] 패널의 [비헤이비어 추가] 메뉴에서 [텍스트 설정] > [프레임의 텍스트 설정]을 선택합니다.
[프레임의 텍스트 설정] 대화 상자의 [프레임] 메뉴에서 대상 프레임을 선택합니다.
[현재 HTML 얻기] 버튼을 클릭하여 대상 프레임의 body 섹션에 있는 현재 내용을 복사합니다.
[새 HTML] 상자에 메시지를 입력합니다.
[확인]을 클릭하고 기본 이벤트가 정확한지 확인합니다.

컨테이너의 텍스트 설정 비헤이비어 적용

[컨테이너의 텍스트 설정] 비헤이비어는 페이지에 있는 기본 컨테이너(텍스트 또는 다른 요소를 포함하는 요소)의 내용과 서식을 지정한 내용으로 바꿉니다. 내용에는 유효한 HTML 소스 코드가 포함될 수 있습니다.

예제:

The URL for this page is {window.location}, and today is {new Date()}.

오브젝트를 선택하고 [비헤이비어] 패널의 [비헤이비어 추가] 메뉴에서 [텍스트 설정] > [컨테이너의 텍스트 설정]을 선택합니다.
[컨테이너의 텍스트 설정] 대화 상자에서 [컨테이너] 메뉴를 사용하여 대상 요소를 선택합니다.
[새 HTML] 상자에 새 텍스트나 HTML을 입력합니다.
[확인]을 클릭하고 기본 이벤트가 정확한지 확인합니다.

상태 표시줄의 텍스트 설정 비헤이비어 적용

[상태 표시줄의 텍스트 설정] 비헤이비어는 브라우저 창 왼쪽 아래에 있는 상태 표시줄에 메시지를 표시합니다. 예를 들어 이 비헤이비어를 통해 상태 표시줄에 링크에 연결된 URL을 표시하는 대신 링크 대상에 대한 설명을 표시할 수 있습니다. 방문자는 상태 표시줄의 메시지를 무시하거나 간과하는 경우가 많으며 상태 표시줄의 텍스트 설정을 제대로 지원하지 않는 브라우저도 있습니다. 따라서 중요한 메시지는 팝업 메시지나 AP 요소의 텍스트로 표시하는 것이 좋습니다.

참고:

Dreamweaver에서 [상태 표시줄의 텍스트 설정] 비헤이비어를 사용하는 경우에는 일부 브라우저에서 상태 표시줄 텍스트를 변경할 때 별도로 조정해야 하므로 브라우저의 상태 표시줄 텍스트가 변경되지 않을 수도 있습니다. 예를 들어 Firefox에서는 JavaScript가 상태 표시줄 텍스트를 변경하도록 [고급] 옵션을 변경해야 합니다. 자세한 내용은 브라우저 설명서를 참조하십시오.

예제:

The URL for this page is {window.location}, and today is {new Date()}.

오브젝트를 선택하고 [비헤이비어] 패널의 [비헤이비어 추가] 메뉴에서 [텍스트 설정] > [상태 표시줄의 텍스트 설정]을 선택합니다.
[상태 표시줄의 텍스트 설정] 대화 상자에서 [메시지] 상자에 메시지를 입력합니다.

메시지는 간결한 것이 좋습니다. 메시지가 상태 표시줄에 다 들어가지 않으면 브라우저에서 메시지가 잘려서 나타납니다.
[확인]을 클릭하고 기본 이벤트가 정확한지 확인합니다.

텍스트 필드의 텍스트 설정 비헤이비어 적용

[텍스트 필드의 텍스트 설정] 비헤이비어는 양식의 텍스트 필드 내용을 지정한 내용으로 바꿉니다.

예제:

The URL for this page is {window.location}, and today is {new Date()}.

이름이 있는 텍스트 필드 만들기

[삽입] > [양식] > [텍스트 필드]를 선택합니다.

Dreamweaver에서 양식 태그를 추가하라는 메시지가 나타나면 [예]를 클릭합니다.
[속성 관리자]에서 텍스트 필드의 이름을 입력합니다. 이름이 페이지에서 고유한지 확인합니다. 서로 다른 양식에 있더라도 같은 페이지에 있는 여러 요소에 같은 이름을 사용하지 마십시오.

텍스트 필드의 텍스트 설정 적용

텍스트 필드를 선택하고 [비헤이비어] 패널의 [비헤이비어 추가] 메뉴에서 [텍스트 설정] > [필드의 텍스트 설정]을 선택합니다.
[텍스트 필드] 메뉴에서 대상 텍스트 필드를 선택한 다음 새 텍스트를 입력합니다.
[확인]을 클릭하고 기본 이벤트가 정확한지 확인합니다.

요소 표시 - 숨김 비헤이비어 적용

[요소 표시 - 숨김] 비헤이비어는 하나 이상의 페이지 요소를 표시하거나 숨기거나 표시 여부를 기본값으로 되돌립니다. 이 비헤이비어는 사용자가 페이지와 상호 작용할 때 정보를 표시하는 데 유용합니다. 예를 들어 사용자가 마우스 포인터를 식물의 이미지 위로 가져갈 때 식물의 성장 계절 및 지역, 필요한 일조량, 최대 성장 크기 등에 대한 자세한 설명을 제공하는 페이지 요소를 표시할 수 있습니다. 이 비헤이비어는 관련 요소를 표시하거나 숨기기만 합니다. 즉, 요소를 숨기더라도 해당 요소가 페이지 흐름에서 실제로 제거되지는 않습니다.

오브젝트를 선택하고 [비헤이비어] 패널의 [비헤이비어 추가] 메뉴에서 [요소 표시 - 숨김]을 선택합니다.

[요소 표시 - 숨김]을 사용할 수 없는 경우는 보통 AP 요소가 이미 선택되어 있는 상태이기 때문입니다. 두 브라우저 모두 4.0 버전에서는 AP 요소가 이벤트를 받지 않으므로 <body> 태그 또는 링크(<a>) 태그 같은 다른 오브젝트를 선택해야 합니다.
[요소] 목록에서 표시하거나 숨길 요소를 선택한 다음 [표시], [숨김] 또는 표시 여부를 기본값으로 복원하는 [복구]를 클릭합니다.
표시 여부를 변경할 나머지 모든 요소에 대해 2단계를 반복합니다. 단일 비헤이비어로 여러 요소의 표시 여부를 변경할 수 있습니다.
[확인]을 클릭하고 기본 이벤트가 정확한지 확인합니다.

이 비헤이비어는 Dreamweaver CS5부터 사용되지 않습니다.

이미지 교체 비헤이비어 적용

[이미지 교체] 비헤이비어는 <img> 태그의 src 속성을 변경하여 한 이미지를 다른 이미지로 교체합니다. 이 비헤이비어를 사용하여 버튼 롤오버를 만들거나 한 번에 여러 이미지를 교체하는 등의 기타 이미지 효과를 만들 수 있습니다. 롤오버 이미지를 삽입하면 [이미지 교체] 비헤이비어가 페이지에 자동으로 추가됩니다.

참고:

src 속성만이 이 비헤이비어의 영향을 받으므로 원본과 동일한 크기(높이 및 폭)의 이미지를 교체해야 합니다. 그렇지 않으면 교체한 이미지가 원본 이미지의 크기에 맞게 축소되거나 확대됩니다.

[이미지 교체 복구] 비헤이비어는 마지막으로 교체된 이미지 세트를 이전의 소스 파일로 복구합니다. [이미지 교체] 비헤이비어를 오브젝트에 연결할 때마다 이 비헤이비어가 자동으로 추가됩니다. [복구] 옵션이 선택된 상태에서 [이미지 교체]를 연결하는 경우에는 [이미지 교체 복구] 비헤이비어를 수동으로 선택할 필요가 없습니다.

[삽입] > [이미지]를 선택하거나 [삽입] 패널의 [이미지] 버튼을 클릭하여 이미지를 삽입합니다.
속성 관리자의 가장 왼쪽에 있는 텍스트 상자에 이미지 이름을 입력합니다.

이미지에 이름을 반드시 지정할 필요는 없습니다. 오브젝트에 비헤이비어를 연결하면 이미지에 자동으로 이름이 지정됩니다. 그러나 모든 이미지 이름을 미리 지정하면 [이미지 교체] 대화 상자에서 이미지를 쉽게 구별할 수 있습니다.
추가 이미지를 삽입하려면 1단계와 2단계를 반복합니다.
오브젝트(일반적으로 교체할 이미지)를 선택하고 [비헤이비어] 패널의 [비헤이비어 추가] 메뉴에서 [이미지 교체]를 선택합니다.
[이미지] 목록에서 소스를 변경할 이미지를 선택합니다.
[검색]을 클릭하여 새 이미지 파일을 선택하거나 [소스 설정] 상자에 새 이미지의 경로 및 파일 이름을 입력합니다.
변경하려는 추가 이미지에 대해 5단계와 6단계를 반복합니다. 여러 이미지를 동시에 바꾸려면 모든 이미지에 같은 [이미지 교체] 액션을 사용합니다. 이렇게 하지 않으면 [이미지 교체 복구] 액션으로 모든 이미지를 동시에 복구할 수 없게 됩니다.
페이지가 로드될 때 새 이미지를 캐시하려면 [이미지 미리 로드하기] 옵션을 선택합니다.

이렇게 하면 이미지를 표시할 때 다운로드로 인해 지연되지 않습니다.
[확인]을 클릭하고 기본 이벤트가 정확한지 확인합니다.

양식 유효성 검사 비헤이비어 적용

[양식 유효성 검사] 비헤이비어는 지정한 텍스트 필드의 내용을 검사하여 사용자가 올바른 형식의 데이터를 입력했는지 확인합니다. 이 비헤이비어를 onBlur 이벤트가 있는 개별 텍스트 필드에 연결하여 사용자가 양식을 작성하는 동안 필드의 유효성을 검사하거나 onSubmit 이벤트가 포함된 양식에 연결하여 사용자가 [전송] 버튼을 클릭할 때 여러 텍스트 필드를 한꺼번에 평가합니다. 이 비헤이비어를 양식에 연결하면 잘못된 데이터가 있는 양식이 전송되는 것을 방지할 수 있습니다.

[삽입] > [양식]을 선택하거나 [삽입] 패널의 [양식] 버튼을 클릭하여 양식을 삽입합니다.
[삽입] > [양식] > [텍스트 필드]를 선택하거나 [삽입] 패널의 [텍스트 필드] 버튼을 클릭하여 텍스트 필드를 삽입합니다.

추가 텍스트 필드를 삽입하려면 이 단계를 반복합니다.
유효성 검사 방법을 선택합니다.
- 사용자가 양식을 작성할 때 개별 필드의 유효성을 검사하려면 텍스트 필드를 선택한 다음 [윈도우] > [비헤이비어]를 선택합니다.
- 사용자가 양식을 전송할 때 여러 필드의 유효성을 검사하려면 문서 창 왼쪽 아래의 태그 선택기에서 <form> 태그를 클릭하고 [윈도우] > [비헤이비어]를 선택합니다.
[비헤이비어 추가] 메뉴에서 [양식 유효성 검사]를 선택합니다.
다음 중 하나를 수행합니다.
- 개별 필드의 유효성을 검사하려면 문서 창에서 선택한 필드를 [필드] 목록에서 선택합니다.
- 여러 필드의 유효성을 검사하려면 [필드] 목록에서 텍스트 필드를 선택합니다.
필드에 일부 데이터가 반드시 포함되어야 하는 경우에는 [필수] 옵션을 선택합니다.
다음 [허용] 옵션 중 하나를 선택합니다.

모두 사용

필수 필드에 데이터가 있는지 검사합니다. 데이터의 유형은 검사하지 않습니다.

이메일 주소 사용

필드에 @ 기호가 있는지 검사합니다.

숫자 사용

필드에 숫자만 있는지 검사합니다.

시작 숫자 사용

필드의 숫자가 특정 범위에 속하는지 검사합니다.
여러 필드의 유효성을 검사하도록 선택한 경우 유효성을 검사할 추가 필드에 대해 6단계와 7단계를 반복합니다.
[확인]을 클릭합니다.

사용자가 양식을 전송하는 시점에서 여러 필드의 유효성을 검사하려는 경우 onSubmit 이벤트가 [이벤트] 메뉴에 자동으로 나타납니다.
개별 필드의 유효성을 검사하려면 기본 이벤트가 onBlur 또는 onChange인지 확인합니다. 그렇지 않은 경우 이러한 이벤트 중 하나를 선택합니다.

두 이벤트 모두 사용자가 필드 밖으로 이동할 때 [양식 유효성 검사] 비헤이비어를 트리거합니다. onBlur는 사용자가 필드를 입력했는지 여부와 관계없이 발생하지만 onChange는 사용자가 필드의 내용을 변경한 경우에만 발생한다는 점이 다릅니다. 필수 필드인 경우 onBlur 이벤트를 사용하는 것이 좋습니다.

유사 검색

쉽고 빠르게 지원 받기

신규 사용자이신가요?