[JQuery] JQuery UI 다운로드

 

홈페이지를 만들때 UI 스타일을 쉽고 빠르게 디자인 할 수 있도록 JQuery UI에 대해 알아보도록 하겠습니다.

 

 

1. JQuery UI 다운로드

 

먼저 JQuery UI를 다운로드 받기 위해 아래 홈페이지 주소로 접속합니다.

 

홈페이지 : http://jqueryui.com/

 

메인 화면 오른쪽에 보면 아래와 같은 화면이 보입니다.

 

 

다운로드시 여러 테마를 저장할 수 있지만, 아직 처음 접하는 것이니 기본적인 버전을 다운로드 받도록 합니다.

 

 

2. 파일 구성

 

다운로드 받은 파일의 압축을 풀면 아래와 같이 나타납니다.

JQuery ui 는 기본적으로 jquery를 포함하고 있습니다.

 

 

demos 폴더는 JQuery 샘플 데모들로 구성되어 있습니다.

demos 폴더 안에 index.html 파일을 실행하면 아래와 같이 각 종류별 리스트가 나오고 클릭을 하면 적용된 화면들을 볼 수 있습니다.

 

 

 

JQuery 의 디자인은 CSS 스타일로 css 파일을 필요로 합니다.

이 파일들은 themes 폴더 안에 저장되어 있습니다.

 

 

3. 적용하기

 

스타일을 적용하기 위해서는 아래와 같이 themes 안에 css 파일을 링크 시켜줍니다.

 

<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">

 

 

기본적으로 JQuery를 사용합니다.

 

<script src="../../jquery-1.9.1.js"></script>

 

 

JQuery UI를 위한 스크립트를 적용시켜 줍니다.

 

<script src="../../ui/jquery.ui.core.js"></script>

 

 

^ㅇ^!!!

 

다음에는 JQueryUI를 통해서 UI를 적용하는 방법을 조금 더 자세히 알아보도록 하겠습니다. ^^