Dreamweaver에서 Spry 효과 적용

검색
참고:

Spry 위젯은 Dreamweaver CC 이상에서 jQuery 위젯으로 바뀌었습니다. 페이지의 기존 Spry 위젯을 수정할 수는 있지만 새 Spry 위젯을 추가할 수는 없습니다.

Spry 효과 개요

Spry 효과는 JavaScript를 사용하여 HTML 페이지의 거의 모든 요소에 적용할 수 있는 시각적 확장 기능입니다. 효과는 일반적으로 정보를 강조 표시하거나, 애니메이션 전환을 만들거나, 일정 시간 동안 페이지 요소에 시각적인 변화를 주는 데 사용됩니다. 추가 사용자 정의 태그 없이도 HTML 요소에 효과를 적용할 수 있습니다.

참고:

요소에 효과를 적용하려면 해당 요소가 현재 선택된 상태이거나 요소의 ID가 있어야 합니다. 예를 들어 현재 선택되어 있지 않은 div 태그에 강조 표시를 적용하려면 이 div에 유효한 ID 값이 있어야 합니다. 요소에 유효한 ID 값이 없으면 이를 HTML 코드에 추가해야 합니다.

효과를 통해 요소의 불투명도, 비율, 위치 및 스타일 속성(예: 배경색)을 변경할 수 있습니다. 둘 이상의 속성을 조합하여 색다른 시각적 효과를 만들 수 있습니다.

이러한 효과는 Spry를 기반으로 하므로 효과가 적용된 요소를 사용자가 클릭하면 전체 HTML 페이지를 새로 고치지 않은 채 해당 요소만 동적으로 업데이트됩니다.

Spry에 포함된 효과는 다음과 같습니다.

선명하게 하기/희미하게 하기

요소를 선명하게 표현하거나 희미하게 만듭니다.

강조 표시

요소의 배경색을 변경합니다.

가리기

위쪽 또는 아래쪽으로 진행되는 창 가리기를 시뮬레이션하여 요소를 숨기거나 표시합니다.

슬라이드

요소를 위쪽이나 아래쪽으로 이동합니다.

확대/축소

요소의 크기를 늘리거나 줄입니다.

흔들기

왼쪽에서 오른쪽으로 요소 흔들기를 시뮬레이션합니다.

찌그러뜨리기

페이지의 왼쪽 위 모서리로 요소가 사라지도록 합니다.

참고:

효과를 사용하는 경우 코드 보기에서 파일에 여러 행의 코드가 추가됩니다. 그 중 한 행은 SpryEffects.js 파일을 식별하는 데 사용됩니다. 이 파일은 효과를 포함하기 위해 반드시 필요한 파일입니다. 코드에서 이 행을 제거하지 마십시오. 이 행을 제거하면 효과가 적용되지 않습니다.

Spry 프레임워크에서 사용할 수 있는 Spry 효과에 대한 더 자세한 개요는 www.adobe.com/go/learn_dw_spryeffects_kr을 참조하십시오.

선명하게 하기/희미하게 하기 효과 적용

참고:

applet, body, iframe, object, tr, tbody 또는 th를 제외한 HTML 요소와 함께 이 효과를 사용할 수 있습니다.

  1. (선택 사항) 효과를 적용할 내용 또는 레이아웃 요소를 선택합니다.
  2. [비헤이비어] 패널([윈도우] > [비헤이비어])에서 플러스(+) 버튼을 클릭한 다음 메뉴에서 [효과] > [선명하게 하기/희미하게 하기]를 선택합니다.
  3. 대상 요소 메뉴에서 요소의 ID를 선택합니다. 요소를 이미 선택한 경우에는 <현재 선택>을 선택합니다.
  4. [효과 지속 시간] 상자에서 효과를 지속할 시간을 밀리초 단위로 정의합니다.
  5. [희미하게 하기]나 [선명하게 하기] 중에서 적용할 효과를 선택합니다.
  6. [희미하게 하기 시작] 상자에서 효과가 나타날 때의 불투명도를 백분율로 정의합니다.
  7. [희미하게 하기 끝] 상자에서 효과가 끝날 때의 불투명도를 백분율로 정의합니다.
  8. 효과를 반대로 적용할 수 있도록 하려면 즉, 오브젝트를 연속으로 클릭하여 희미한 상태와 선명한 상태를 오갈 수 있도록 하려면 [효과 켜기/끄기]를 선택합니다.

가리기 효과 적용

참고:

HTML 요소 address, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, p, ol, ul, li, applet, center, dir, menu 또는 pre와 함께 이 효과를 사용할 수 있습니다.

  1. (선택 사항) 효과를 적용할 내용 또는 레이아웃 요소를 선택합니다.
  2. [비헤이비어] 패널([윈도우] > [비헤이비어])에서 플러스(+) 버튼을 클릭한 다음 메뉴에서 [효과] > [가리기]를 선택합니다.
  3. 대상 요소 메뉴에서 요소의 ID를 선택합니다. 요소를 이미 선택한 경우에는 <현재 선택>을 선택합니다.
  4. [효과 지속 시간] 상자에서 효과를 지속할 시간을 밀리초 단위로 정의합니다.
  5. [위로 가리기]나 [아래로 가리기] 중에서 적용할 효과를 선택합니다.
  6. [위로 가리기 시작] 또는 [아래로 가리기 시작] 상자에서 가리기 스크롤 시작 지점을 백분율 또는 픽셀 값으로 정의합니다. 이러한 값은 요소의 맨 위를 기준으로 계산됩니다.
  7. [위로 가리기 끝] 또는 [아래로 가리기 끝] 상자에서 가리기 스크롤 끝 지점을 백분율 또는 픽셀 값으로 정의합니다. 이러한 값은 요소의 맨 위를 기준으로 계산됩니다.
  8. 효과를 반대로 적용할 수 있도록 하려면 즉, 오브젝트를 연속으로 클릭하여 위아래로 스크롤할 수 있도록 하려면 [효과 켜기/끄기]를 선택합니다.

확대/축소 효과 적용

참고:

HTML 요소 address, dd, div, dl, dt, form, p, ol, ul, applet, center, dir, menu 또는 pre 등과 함께 이 효과를 사용할 수 있습니다.

  1. (선택 사항) 효과를 적용할 내용 또는 레이아웃 요소를 선택합니다.
  2. [비헤이비어] 패널([윈도우] > [비헤이비어])에서 플러스(+) 버튼을 클릭한 다음 팝업 메뉴에서 [효과] > [확대/축소]를 선택합니다.
  3. 대상 요소 팝업 메뉴에서 요소의 ID를 선택합니다. 요소를 이미 선택한 경우에는 <현재 선택>을 선택합니다.
  4. [효과 지속 시간] 필드에서 효과를 지속할 시간을 밀리초 단위로 정의합니다.
  5. [확대]나 [축소] 중에서 적용할 효과를 선택합니다.
  6. [확대 시작] 또는 [축소 시작] 상자에서 효과가 시작될 때의 효과 크기를 정의합니다. 이는 크기의 백분율 또는 픽셀 값으로 지정합니다.
  7. [확대 끝] 또는 [축소 끝/방향] 상자에서 효과를 마칠 때의 효과 크기를 정의합니다. 이는 크기의 백분율 또는 픽셀 값으로 지정합니다.
  8. [확대 시작]/[축소 시작] 또는 [확대 끝]/[축소 끝/방향] 상자에 대해 픽셀을 선택하면 폭/높이 필드가 표시됩니다. 선택한 옵션에 따라 요소가 가로/세로 비율을 유지한 채 확대 또는 축소됩니다.
  9. 요소의 확대 또는 축소 방향을 페이지의 왼쪽 위 모서리로 할지 페이지의 가운데로 할지 선택합니다.
  10. 효과를 반대로 적용할 수 있도록 하려면 즉, 오브젝트를 연속으로 클릭하여 확대와 축소를 전환할 수 있도록 하려면 [효과 켜기/끄기]를 선택합니다.

강조 표시 효과 적용

참고:

applet, body, frame, frameset 또는 noframes를 제외한 HTML 요소와 함께 이 효과를 사용할 수 있습니다.

  1. (선택 사항) 효과를 적용할 내용 또는 레이아웃 요소를 선택합니다.
  2. [비헤이비어] 패널([윈도우] > [비헤이비어])에서 플러스(+) 버튼을 클릭한 다음 메뉴에서 [효과] > [강조]를 선택합니다.
  3. 대상 요소 메뉴에서 요소의 ID를 선택합니다. 요소를 이미 선택한 경우에는 <현재 선택>을 선택합니다.
  4. [효과 지속 시간] 상자에서 효과를 지속할 시간을 밀리초 단위로 정의합니다.
  5. 강조 표시를 시작하는 데 사용할 색상을 선택합니다.
  6. 강조 표시를 마치는 데 사용할 색상을 선택합니다. 이 색상은 [효과 지속 시간]에 정의한 시간 범위 내에서만 지속됩니다.
  7. 강조 표시가 끝난 후의 요소 색상을 선택합니다.
  8. 효과를 반대로 적용할 수 있도록 하려면 즉, 오브젝트를 연속으로 클릭하여 강조 표시 색상을 순환할 수 있도록 하려면 [효과 켜기/끄기]를 선택합니다.

흔들기 효과 적용

참고:

HTML 요소 address, blockquote, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, iframe, img, object, p, ol, ul, li, applet, dir, hr, menu, pre 또는 table과 함께 이 효과를 사용할 수 있습니다.

  1. (선택 사항) 효과를 적용할 내용 또는 레이아웃 요소를 선택합니다.
  2. [비헤이비어] 패널([윈도우] > [비헤이비어])에서 플러스(+) 버튼을 클릭한 다음 메뉴에서 [효과] > [흔들기]를 선택합니다.
  3. 대상 요소 메뉴에서 요소의 ID를 선택합니다. 요소를 이미 선택한 경우에는 <현재 선택>을 선택합니다.

슬라이드 효과 적용

슬라이드 효과가 제대로 적용되도록 하려면 대상 요소를 고유 ID가 있는 컨테이너 태그로 둘러싸야 합니다. 대상 요소를 둘러싸는 컨테이너 태그는 blockquote, dd, form, div 또는 center 태그여야 합니다.

대상 요소 태그는 blockquote, dd,div, form, center, table, span, input, textarea, select 또는 image 중 하나여야 합니다.

  1. (선택 사항) 효과를 적용할 내용의 컨테이너 태그를 선택합니다.
  2. [비헤이비어] 패널([윈도우] > [비헤이비어])에서 플러스(+) 버튼을 클릭한 다음 메뉴에서 [효과] > [슬라이드]를 선택합니다.
  3. 대상 요소 메뉴에서 컨테이너 태그의 ID를 선택합니다. 컨테이너가 이미 선택된 경우 <현재 선택 항목>을 선택합니다.
  4. [효과 지속 시간] 필드에서 효과를 지속할 시간을 밀리초 단위로 정의합니다.
  5. [위로 슬라이드]나 [아래로 슬라이드] 중에서 적용할 효과를 선택합니다.
  6. [위로 슬라이드 시작] 상자에서 슬라이드 시작 지점을 백분율 또는 픽셀 값으로 정의합니다.
  7. [위로 슬라이드 끝] 상자에서 슬라이드 끝 지점을 백분율 또는 양의 픽셀 값으로 정의합니다.
  8. 효과를 반대로 적용할 수 있도록 하려면 즉, 오브젝트를 연속으로 클릭하여 위아래로 슬라이드 이동할 수 있도록 하려면 [효과 켜기/끄기]를 선택합니다.

찌그러뜨리기 효과 적용

참고:

HTML 요소 address, dd, div, dl, dt, form, img, p, ol, ul, applet, center, dir, menu 또는 pre 등과 함께 이 효과만 사용할 수 있습니다.

  1. (선택 사항) 효과를 적용할 내용 또는 레이아웃 요소를 선택합니다.
  2. [비헤이비어] 패널([윈도우] > [비헤이비어])에서 플러스(+) 버튼을 클릭한 다음 메뉴에서 [효과] > [찌그러뜨리기]를 선택합니다.
  3. 대상 요소 메뉴에서 요소의 ID를 선택합니다. 요소를 이미 선택한 경우에는 <현재 선택>을 선택합니다.

기타 효과 추가

여러 가지 효과 비헤이비어를 동일한 요소에 연결하여 흥미로운 결과를 얻을 수 있습니다.

  1. (선택 사항) 효과를 적용할 내용 또는 레이아웃 요소를 선택합니다.
  2. [비헤이비어] 패널([윈도우] > [비헤이비어])에서 플러스(+) 버튼을 클릭한 다음 [효과] 메뉴에서 효과를 선택합니다.
  3. 대상 요소 메뉴에서 요소의 ID를 선택합니다. 요소를 이미 선택한 경우에는 <현재 선택>을 선택합니다.

효과 삭제

요소에서 하나 이상의 효과 비헤이비어를 제거할 수 있습니다.

  1. (선택 사항) 효과를 적용할 내용 또는 레이아웃 요소를 선택합니다.
  2. [비헤이비어] 패널([윈도우] > [비헤이비어])의 비헤이비어 목록에서 삭제하려는 효과를 클릭합니다.
  3. 다음 중 하나를 수행합니다.

    • 하위 패널 제목 표시줄에서 [이벤트 제거] 버튼(-)을 클릭합니다.

    • 비헤이비어를 마우스 오른쪽 버튼으로 클릭(Windows)하거나 Control 키를 누른 상태에서 클릭(Macintosh)한 다음 [비헤이비어 삭제]를 선택합니다.

Adobe 로고

내 계정 로그인

빠른 링크

내 플랜 모두 보기 내 플랜 관리

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