Dreamweaver에서 Spry 도구 설명 위젯 사용

사용자가 웹 페이지의 특정 요소 위에 마우스 포인터를 올려 놓으면 Spry 도구 설명 위젯에 추가 정보가 표시됩니다. 마우스 포인터를 치우면 추가 내용이 사라집니다. 도구 설명을 더 오랫동안 열어 사용자가 도구 설명 내용과 상호 작용할 수 있도록 설정할 수도 있습니다.

도구 설명 위젯은 다음 세 가지 요소로 구성됩니다.

• 도구 설명 컨테이너. 사용자가 도구 설명을 활성화할 때 표시할 메시지 또는 내용을 포함하는 요소입니다.

• 도구 설명을 활성화하는 페이지 요소

• 생성자 스크립트. Spry에 도구 설명 기능 생성을 알리는 JavaScript입니다.

[도구 설명] 위젯을 삽입하면 Dreamweaver는 div 태그를 사용하여 도구 설명 컨테이너를 만들고, “트리거” 요소(도구 설명을 활성화하는 페이지 요소)를 span 태그로 둘러쌉니다. Dreamweaver에서 기본적으로 이러한 태그를 사용하지만 도구 설명 및 트리거 요소의 태그가 페이지 본문 내에 있는 한 어떠한 태그도 사용할 수 있습니다.

다음은 도구 설명 위젯으로 작업할 때 유의해야 할 사항입니다.

• 다음 도구 설명을 열면 현재 열려 있는 도구 설명은 닫힙니다.

• 사용자가 트리거 영역에 마우스 포인터를 올려 놓는 동안 도구 설명은 계속 유지됩니다.

• 트리거 및 도구 설명 내용에 사용할 수 있는 태그 종류에 대한 제한은 없습니다. (단, 블록 수준 요소는 발생할 수 있는 브라우저 간 렌더링 문제를 방지하기 위해 항상 참조해야 합니다.)

• 기본적으로 도구 설명은 커서 오른쪽에 20픽셀 이하로 표시됩니다. [속성 관리자]의 [수평 오프셋] 및 [수직 오프셋] 옵션을 사용하여 사용자 정의 모양 포인터를 설정할 수 있습니다.

• 현재, 페이지가 브라우저에 로드될 때 도구 설명을 열 수 있는 방법은 없습니다.

도구 설명 위젯에는 아주 작은 CSS가 필요합니다. Spry는 JavaScript를 사용하여 도구 설명을 표시하고, 숨기고 위치를 지정합니다. 표준 CSS 기술을 사용하여 도구 설명 스타일을 페이지에서 원하는 대로 만들 수 있습니다. 기본 CSS 파일에 포함되어 있는 유일한 규칙은 Internet Explorer 6 문제의 해결 방법으로 양식 요소 또는 Flash 오브젝트 위에 도구 설명을 표시할 수 있습니다.

Spry 도구 설명 위젯의 코드에 대한 자세한 분석을 비롯하여 이 위젯이 작동하는 방식에 대한 포괄적인 설명은 www.adobe.com/go/learn_dw_sprytooltip_kr을 참조하십시오.

Spry 도구 설명 위젯을 사용하는 작업에 대한 비디오 자습서를 보려면 www.adobe.com/go/lrvid4046_dw을 참조하십시오.

도구 설명 위젯 삽입

이 작업을 통해 도구 설명 내용의 컨테이너를 사용하여 새로운 도구 설명 위젯 및 도구 설명 트리거 역할을 하는 자리 표시자 문장이 삽입됩니다.

또한 페이지(예: 이미지)에서 기존 요소를 선택한 다음 도구 설명을 삽입할 수도 있습니다. 이때, 선택한 요소는 새 도구 설명 트리거로 작용합니다. 선택 항목에 ID가 없을 경우 Dreamweaver가 ID를 할당할 수 있도록 반드시 전체 태그 요소(예: img 태그 또는 p 태그)를 선택해야 합니다.

도구 설명 위젯 편집 옵션

도구 설명 위젯의 비헤이비어를 사용자 정의할 수 있도록 옵션을 설정할 수 있습니다.

1. 삽입 포인터에 커서를 올려 놓거나 페이지의 도구 설명 내용으로 삽입 포인터를 가져갑니다.

2. 도구 설명 위젯의 파란색 탭을 클릭하여 선택합니다.

3. 도구 설명 위젯 속성 관리자의 옵션을 원하는 대로 설정합니다.

이름

도구 설명 컨테이너의 이름. 컨테이너에는 도구 설명 내용이 들어 있습니다. 기본적으로 Dreamweaver에서는 컨테이너로 div 태그를 사용합니다.

트리거

도구 설명을 활성화하는 페이지 요소. 기본적으로 Dreamweaver에서는 span 태그로 둘러 싸인 자리 표시자 문장을 트리거로 사용하지만, 고유한 ID를 가진 페이지의 요소를 선택할 수 있습니다.

마우스 커서 추적

이 옵션을 선택하면 트리거 요소에 마우스 포인터를 올려 놓는 동안 도구 설명이 마우스를 따라 갑니다.

마우스 아웃 시 숨김

이 옵션을 선택하면 도구 설명에 마우스를 올려 놓는 동안 마우스가 트리거 요소 밖에 있는 경우에도 도구 설명이 계속 열려 있습니다. 이 기능은 도구 설명에 링크 또는 상호 작용 요소가 있는 경우에 유용합니다. 이 옵션이 선택되어 있지 않는 경우, 마우스가 트리거 영역을 벗어나면 도구 설명 요소가 닫힙니다.

수평 오프셋

마우스를 기준으로 도구 설명의 수평 위치를 계산합니다. 오프셋 값은 픽셀이며, 기본 오프셋은 20픽셀입니다.

수직 오프셋

마우스를 기준으로 도구 설명의 수직 위치를 계산합니다. 오프셋 값은 픽셀이며, 기본 오프셋은 20픽셀입니다.

지연 표시

트리거 요소로 들어온 후 도구 설명이 표시되기 전에 지연 시간이 밀리초 단위로 표시됩니다. 기본값은 0입니다.

지연 숨김

트리거 요소를 벗어난 후 도구 설명이 표시되기 전에 지연 시간이 밀리초 단위로 표시됩니다. 기본값은 0입니다.

효과

도구 설명을 표시할 때 사용할 효과의 종류입니다. [가리기]는 위쪽 또는 아래쪽으로 진행되는 창 가리기를 시뮬레이션하여 도구 설명을 표시하거나 숨깁니다. [희미하게 하기]는 도구 설명을 점점 뚜렷하게 하거나 점점 희미하게 합니다. 기본값은 None입니다.