페이지에서 위젯을 삽입할 위치에 커서를 놓습니다.
마지막 업데이트 날짜
2026년 4월 30일
jQuery UI 및 모바일 위젯을 사용하여 Dreamweaver 웹 프로젝트에 앱과 유사한 기능을 추가하는 방법에 대해 학습합니다. 코드를 작성하지 않고 아코디언, 탭, 슬라이더 및 자동 완성 상자를 삽입할 수 있습니다.
위젯은 DHTML 및 JavaScript와 같은 언어로 작성된 작은 웹 애플리케이션으로, 웹 페이지 내에 삽입하여 실행할 수 있습니다. 그중에서도 웹 Widget은 데스크탑 환경을 웹 페이지에 복제하는 데 도움이 됩니다.
아코디언, 탭, 날짜 입력기, 슬라이더 및 자동완성과 같은 jQuery UI 위젯은 데스크탑 환경을 웹으로 가져옵니다.
예를 들어 탭 위젯을 사용하면 데스크탑 응용 프로그램의 대화 상자 탭 기능을 복제할 수 있습니다.
Dreamweaver에는 양식 요소를 만드는 데 사용할 수 있는 jQuery 모바일 위젯의 컬렉션과 모바일 웹 앱에서 일반적으로 사용되는 기타 다양한 기능도 포함되어 있습니다. 예를 들어 jQuery 모바일 위젯을 사용하여 텍스트 영역이나 확인란 등의 모바일 친화적인 양식 요소를 추가할 수 있습니다.
jQuery 위젯 삽입
jQuery 위젯을 삽입하면 다음이 코드에 자동으로 추가됩니다.
- 모든 종속 파일에 대한 참조
- 위젯의 jQuery API를 포함하는 스크립트 태그. 동일한 스크립트 태그에 다른 Widget이 추가됩니다.
jQuery Widget에 대한 자세한 내용은 http://jqueryui.com/demos/를 참조하세요.
메모
jQuery 효과의 경우 효과를 추가할 때 jquery-1.8.24.min.js 파일이 자동으로 포함되기 때문에 이 파일에 대한 외부 참조는 추가되지 않습니다.
[삽입] > [jQuery UI]를 선택하고 삽입할 위젯을 선택합니다.
[삽입] 패널을 사용할 경우 [삽입] 패널의 [jQuery UI] 섹션에 위젯이 있습니다.
jQuery 위젯을 선택하면 [속성] 패널에 jQuery 위젯의 속성이 표시됩니다.
라이브 뷰 또는 jQuery 위젯을 지원하는 브라우저에서 jQuery 위젯을 미리 볼 수 있습니다.
jQuery 위젯 수정
수정할 위젯을 선택합니다.
[속성] 패널에서 속성을 수정합니다.
예를 들어 탭 위젯에 탭을 더 추가하려면 위젯을 선택하고 [속성] 패널에서 '+'를 클릭합니다.
모바일 jQuery 위젯 삽입
jQuery 모바일 위젯을 사용하기에 앞서 삽입 > jQuery Mobile > 페이지를 선택하여 jQuery Mobile 페이지를 우선 정의해야 합니다.
jQuery Mobile 파일 대화 상자가 열립니다.
jQuery Mobile 파일 대화 상자의 기본 설정을 변경하거나 그대로 두고 확인을 클릭합니다.
이어서 열리는 페이지 대화 상자에서 ID 필드에 이름을 입력하고 내 모바일 페이지에서 헤더 및 푸터 섹션이 표시되도록 할지 여부에 따라 헤더 및 푸터 옆에 있는 확인란을 선택하거나 선택 해제합니다.
Dreamweaver에서 열리는 페이지에서 헤더, 내용 및 푸터 텍스트를 내 모바일 페이지에서 표시하려는 텍스트, 이미지 및 기타 요소로 대체합니다.
메모
소형 모바일 화면에서 표시되도록 텍스트의 길이는 짧게, 이미지의 크기는 작게 유지하세요.
필요에 따라 기타 jQuery Mobile 위젯을 추가합니다.
장치에서 해당 페이지를 미리 봅니다.
자세한 내용은 여러 장치에서 Dreamweaver 웹 페이지 미리보기를 참조하세요.
jQuery 모바일 페이지 및 모든 관련 파일을 저장합니다.
최신 jQuery 버전에서 jQuery Mobile 테마 미적용
문제
jQuery 3.7.1과 같은 최신 버전의 jQuery를 사용할 때 색상 견본과 패널을 포함한 jQuery Mobile 테마가 적용되지 않습니다. 결과적으로 jQuery 테마가 올바르게 렌더링되지 않거나 예상대로 작동하지 않을 수 있습니다.
원인
jQuery Mobile은 사용 중단되었으며 더 이상 적극적으로 유지 관리되지 않습니다. jQuery 3.x 버전을 지원하지 않아 최신 출시 버전과 호환성 문제가 발생합니다.
해결 방법
jQuery Mobile 기능(테마, 색상 견본, 패널)을 계속 사용하려면 호환되는 이전 버전의 jQuery를 사용하십시오.
추천 버전: jQuery 1.11.1(또는 지원되는 기타 1.x 버전)
예
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
지원되는 jQuery 버전을 추가하십시오. 예: 1.11.1
jQuery Mobile 라이브러리가 jQuery 스크립트 다음에 로드되는지 확인하십시오.
페이지를 다시 로드하고 테마, 색상 견본, 패널이 올바르게 렌더링되는지 확인하십시오.
메모
jQuery Mobile은 더 이상 사용되지 않고 업데이트되지 않으므로 기존 jQuery Mobile 프로젝트에는 호환되는 이전 jQuery 버전을 계속 사용하십시오.
