Dreamweaver 문서의 디자인 또는 코드 보기에서 jQuery 효과를 적용할 요소를 선택합니다.
마지막 업데이트 날짜
2022년 11월 28일
- Dreamweaver 사용 안내서
- 소개
- Dreamweaver 및 Creative Cloud
- Dreamweaver 작업 영역 및 보기 옵션
- 사이트 설정
- 파일 관리
- 레이아웃 및 디자인
- CSS
- 페이지 내용 및 에셋
- 페이지 속성 설정
- CSS 머리글 속성 및 CSS 링크 속성 설정
- 텍스트 작업
- 텍스트, 태그, 속성 찾기 및 바꾸기
- DOM 패널
- 라이브 뷰에서 편집
- Dreamweaver에서 문서 인코딩
- 문서 창에서 요소 선택 및 보기
- 속성 관리자에서 텍스트 속성 설정
- 웹 페이지 맞춤법 검사
- Dreamweaver에서 가로줄 사용
- Dreamweaver에서 글꼴 조합 추가 및 수정
- 에셋을 사용하여 작업
- Dreamweaver에서 날짜 삽입 및 업데이트
- Dreamweaver에서 즐겨찾기 에셋 만들기 및 관리
- Dreamweaver에서 이미지 삽입 및 편집
- 미디어 오브젝트 추가
- Dreamweaver에서 비디오 추가
- HTML5 비디오 삽입
- SWF 파일 삽입
- 오디오 효과 추가
- Dreamweaver에서 HTML5 오디오 삽입
- 라이브러리 항목을 사용하여 작업
- Dreamweaver에서 아랍어 및 히브리어 텍스트 사용
- 링크 및 내비게이션
- jQuery 위젯 및 효과
- 웹 사이트 코딩
- Dreamweaver에서의 코딩 정보
- Dreamweaver의 코딩 환경
- 코딩 환경 설정
- 코드 색상 표시 맞춤 설정
- 코드 작성 및 편집
- 코드 힌트 및 코드 완성
- 코드 축소 및 확장
- 스니펫으로 코드 재사용
- 코드 린트
- 코드 최적화
- 디자인 뷰에서 코드 편집
- 페이지의 헤드 내용 작업
- Dreamweaver에 서버측 포함 삽입
- Dreamweaver에서 태그 라이브러리 사용
- Dreamweaver에 사용자 정의 태그 가져오기
- JavaScript 비헤이비어 사용(일반 지침)
- 빌트인 JavaScript 비헤이비어 적용
- XML 및 XSLT 정보
- Dreamweaver에서 서버측 XSL 변환 수행
- Dreamweaver에서 클라이언트측 XSL 변환 수행
- Dreamweaver에서 XSLT의 문자 엔티티 추가
- 코드 서식 지정
- 제품 간 워크플로
- 템플릿
- Dreamweaver 템플릿 정보
- 템플릿 및 템플릿 기반 문서 인식
- Dreamweaver 템플릿 만들기
- 템플릿에서 편집 가능 영역 만들기
- Dreamweaver에서 반복 영역 및 표 만들기
- 템플릿의 옵션 영역 사용
- Dreamweaver에서 편집 가능 태그 속성 정의
- Dreamweaver에서 중첩 템플릿을 만드는 방법
- 템플릿 편집, 업데이트 및 삭제
- Dreamweaver에서 xml 내용 내보내기 및 가져오기
- 기존 문서에서 템플릿 적용 또는 제거
- Dreamweaver 템플릿의 내용 편집
- Dreamweaver에서 템플릿 태그에 대한 구문 규칙
- 템플릿 영역의 강조 표시 환경 설정
- Dreamweaver에서 템플릿 사용 시 이점
- 모바일 및 멀티스크린
- 다이내믹 사이트, 페이지 및 웹 양식
- 웹 애플리케이션 이해
- 애플리케이션 개발용 컴퓨터 설정
- 데이터베이스 연결 문제 해결
- Dreamweaver에서 연결 스크립트 제거
- 다이내믹 페이지 디자인
- 다이내믹 콘텐츠 소스 개요
- 다이내믹 콘텐츠의 소스 정의
- 페이지에 다이내믹 콘텐츠 추가
- Dreamweaver에서 다이내믹 콘텐츠 변경
- 데이터베이스 레코드 표시
- Dreamweaver에서 라이브 데이터 제공 및 문제 해결
- Dreamweaver에서 사용자 정의 서버 비헤이비어 추가
- Dreamweaver를 사용하여 양식 구성
- 양식을 사용하여 사용자 정보 수집
- Dreamweaver에서 ColdFusion 양식 작성 및 활성화
- 웹 양식 제작
- 양식 요소를 위한 HTML5 지원 개선
- Dreamweaver를 사용하여 양식 개발
- 애플리케이션의 시각적 구성
- 웹 사이트 테스트, 미리보기 및 게시
- 문제 해결
다양한 jQuery 효과를 사용하여 매력적인 웹 사이트를 디자인하십시오. Dreamweaver의 통합 jQuery를 사용하면 코드를 작성할 필요 없이 슬라이더와 같은 효과를 포함시킬 수 있습니다.
jQuery 효과 추가
-
-
Windows > 비헤이비어를 선택하여 비헤이비어 패널을 엽니다.
-
더하기(+) 아이콘을 클릭한 다음 효과[를 클릭 후 원하는 효과를 클릭합니다.
jQuery 효과 추가
jQuery 효과 추가 사용자 정의 패널에 선택된 효과의 설정이 나타납니다.
-
효과를 적용할 대상 요소 및 효과 지속 시간과 같은 설정을 지정합니다.
처음 선택한 요소 또는 다른 페이지 요소를 대상 요소로 지정할 수 있습니다. 예를 들어 사용자가 요소 A를 클릭하여 요소 B를 숨기거나 표시하도록 할 경우 대상 요소는 B입니다.
-
다중 jQuery 효과를 추가하려면 위의 단계를 반복합니다.
다중 효과를 선택하면 [비헤이비어] 패널에 표시된 순서대로 효과가 적용됩니다. 효과의 순서를 변경하려면 패널 상단의 화살표 키를 사용합니다.
Dreamweaver는 관련 코드를 문서에 자동으로 삽입합니다. 예를 들어 '희미하게 하기' 효과를 선택하면 다음 코드가 삽입됩니다.
- jQuery 효과가 작동하는 데 필요한 종속 파일에 대한 외부 파일 참조:
<script src="jQueryAssets/jquery-1.7.2.min.js" type="text/javascript"></script><script src="jQueryAssets/jquery-ui-effects.custom.min.js" type="text/javascript"></script>
- body 태그의 요소에 적용되는 코드는 다음과 같습니다.
<li id="earthFrm" onclick="MM_DW_effectAppearFade($('#earthForms'),'show','fade',1000)"> Earth Forms</li>
- 다음과 같은 코드와 함께 스크립트 태그가 추가됩니다.
<script type="text/javascript"> function MM_DW_effectAppearFade(obj,method,effect,speed) { obj[method](effect, {}, speed); }</script>
이벤트 기반 jQuery 효과
jQuery 효과를 적용하면 기본적으로 [onClick] 이벤트에 효과가 할당됩니다. [비헤이비어] 패널을 사용하여 효과의 트리거 이벤트를 변경할 수 있습니다.
-
원하는 페이지 요소를 선택합니다.
-
Windows > 비헤이비어 패널에서 설정된 이벤트 보기 아이콘을 클릭합니다.
-
현재 적용된 효과와 일치하는 행을 클릭합니다. 첫 번째 열이 이벤트를 선택할 수 있는 드롭다운 목록으로 변경되었습니다.
-
원하는 이벤트를 클릭합니다.
jQuery 효과 제거
-
원하는 페이지 요소를 선택합니다.
선택된 페이지 요소에 현재 적용된 모든 효과가 [비헤이비어] 패널에 나열됩니다.
-
삭제할 효과를 클릭한 다음 삭제 아이콘을 클릭합니다.
