참고:

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

Spry 위젯 정보

Spry 위젯은 사용자 상호 작용을 지원하여 더 풍부한 사용 환경을 제공하는 페이지 요소입니다. Spry 위젯은 다음과 같은 부분으로 이루어져 있습니다.

위젯 구조

위젯의 구조를 정의하는 HTML 코드 블록입니다.

위젯 비헤이비어

사용자가 시작한 이벤트에 위젯이 응답하는 방식을 제어하는 JavaScript입니다.

위젯 스타일

위젯의 모양을 지정하는 CSS입니다.

Spry 프레임워크는 표준 HTML, CSS 및 JavaScript로 작성된 여러 가지 재사용 가능한 위젯을 지원합니다. 이러한 위젯은 손쉽게 삽입한 다음 스타일을 지정할 수 있으며, 위젯의 코드가 가장 단순한 경우에는 HTML과 CSS만으로 이루어집니다. 프레임워크의 비헤이비어에는 사용자가 페이지의 내용을 표시하거나 숨기고, 페이지의 색상 같은 모양을 변경하고, 메뉴 항목과 상호 작용할 수 있도록 하는 등의 여러 가지 기능이 포함됩니다.

Spry 프레임워크의 각 위젯은 고유한 CSS 및 JavaScript 파일에 연결됩니다. CSS 파일에는 위젯의 스타일을 지정하는 데 필요한 모든 사항이 포함되고, JavaScript 파일은 위젯의 기능을 제공하는 데 사용됩니다. Dreamweaver 인터페이스를 사용하여 위젯을 삽입하면 Dreamweaver에서 이러한 파일을 해당 페이지에 자동으로 연결하여 위젯에 필요한 기능과 스타일이 포함되도록 합니다.

특정 위젯에 연결된 CSS 및 JavaScript 파일의 이름은 해당 위젯의 이름에 따라 지정되므로 어떤 파일이 어떤 위젯과 관련되어 있는지 쉽게 파악할 수 있습니다. 예를 들어 아코디언 위젯에 연결된 파일의 이름은 각각 SpryAccordion.css와 SpryAccordion.js입니다. 저장된 페이지에 위젯을 삽입하면 Dreamweaver에서 해당 사이트에 SpryAssets 디렉터리를 만들고 상응하는 JavaScript 및 CSS 파일을 해당 위치에 저장합니다.

Spry 위젯 리소스 및 자습서

Spry 위젯을 사용자 정의하는 방법에 대한 자세한 내용은 다음 온라인 리소스를 참조하십시오.

Spry 위젯 샘플

Dreamweaver에서 Spry 메뉴 막대 사용자 정의

Spry 유효성 검사 위젯(비디오 자습서)

Spry 위젯 삽입

  1. [삽입] > [Spry]를 선택한 다음 삽입할 위젯을 선택합니다.

위젯을 삽입하면 페이지를 저장할 때 Dreamweaver를 통해 필요한 Spry JavaScript 및 CSS 파일이 사이트에 자동으로 포함됩니다.

참고:

[삽입] 패널에서 [Spry] 범주를 사용하여 Spry 위젯을 삽입할 수도 있습니다.

Spry 위젯 선택

  1. 위젯의 파란색 탭 외곽선이 나타날 때까지 위젯 위에 마우스 포인터를 올려놓고 기다립니다.
  2. 위젯의 왼쪽 위 모서리에 있는 위젯의 탭을 클릭합니다.

Spry 위젯 편집

  1. 편집할 위젯을 선택하고 속성 관리자([윈도우] > [속성])에서 원하는 사항을 변경합니다.

특정 위젯을 변경하는 데 대한 자세한 내용은 각 위젯과 관련되는 단원을 참조하십시오.

Spry 위젯 스타일 지정

  1. 사이트의 SpryAssets 폴더에서 위젯의 관련 CSS 파일을 찾은 후 원하는 스타일에 따라 CSS를 편집합니다.

특정 위젯의 스타일을 지정하는 데 대한 자세한 내용은 각 위젯과 관련되는 사용자 정의 단원을 참조하십시오.

참고:

페이지에서 스타일 지정된 다른 요소를 편집할 때와 같은 방식으로 CSS 패널에서 스타일을 편집하여 Spry 위젯의 서식을 지정할 수도 있습니다.

위젯 내려받기

Dreamweaver 설치 시 함께 설치되는 Spry 위젯 외에 다양한 웹 위젯을 사용할 수 있습니다. Adobe Exchange에서는 다른 일반 전문가가 개발한 웹 위젯을 제공합니다.

  1. 응용 프로그램 막대의 [Dreamweaver 확장] 메뉴 에서 [웹 위젯 검색]을 선택합니다.

웹 위젯을 사용하는 작업에 대한 Dreamweaver 엔지니어링 팀의 비디오 개요를 보려면 www.adobe.com/go/dw10widgets_kr을 참조하십시오.

기본 Spry 에셋 폴더 변경하기

저장된 페이지에 Spry 위젯, 데이터 세트 또는 효과를 삽입하면 Dreamweaver에서 해당 사이트에 SpryAssets 디렉터리를 만들고 상응하는 JavaScript 및 CSS 파일을 해당 위치에 저장합니다. JavaScript 및 CSS 파일을 다른 곳에 저장하려면 Dreamweaver에서 Spry 에셋을 저장하는 기본 위치를 변경하면 됩니다.

  1. [사이트] > [사이트 관리]를 선택합니다.
  2. [사이트 관리] 대화 상자에서 사이트를 선택하고 [편집]을 클릭합니다.
  3. [사이트 설정] 대화 상자에서 [고급 설정]을 확장하고 [Spry] 범주를 선택합니다.
  4. Spry 에셋을 저장할 폴더의 경로를 입력하고 [확인]을 클릭합니다. 폴더 아이콘을 클릭하여 위치를 찾을 수도 있습니다.

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

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