강좌 & 팁
|
[JQuery] JQuery UI
그동안 JQuery 에 대해서 알아봤는데, 이번에는 잠시 주제를 바꿔서 UI 부분을 설명하려고 합니다. 기존에 html에서 UI는 기본 디자인을 쓰거나 CSS 스타일을 적용하거나 이미지를 삽입해서 사용했습니다. 요즘에는 CSS를 사용해서 UI를 디자인 하고 있습니다. 이러한 CSS 스타일을 직접 만드는 경우도 있지만, JQuery UI를 사용하면 편리하게 디자인을 할 수 있습니다.
1. JQuery UI
먼저 JQuery UI 가 무엇을 하는지 확인하기 위해서 홈페이지를 찾아갑니다.
홈페이지 : http://jqueryui.com/
2. 설명
왼쪽 메뉴에 보면 Interactions 과 같이 각 엘리먼트가 상호작용하는 동작과 사용자에게 보여주는 Widgets, Effects 효과등을 볼 수 있습니다.
아래 설명한 것은 Datepicket 위젯으로 날짜 선택을 타이핑이 아닌 UI 형태로 직접 선택하게 해줍니다. 버튼이나 메뉴, 팝업창 등등 구현하기 힘들 위젯들이 JQueryUI를 통하면 쉽게 구현할 수 있다는 것을 알수 있습니다.
위의 내용들은 다음 시간에 좀더 알아보도록 하겠습니다.
3. 테마
JQuery UI 에서는 사용자의 선택의 폭을 넓히기 위해 다양한 테마를 지원하고 있습니다. 홈페이지 상단 메뉴에서 Themes를 선택하면 아래와 같은 화면이 나타납니다.
여기서 왼쪽 다양한 테마를 선택하면 테마에 맞는 색상과 형태로 변경됩니다.
사용자가 원하는 테마가 없는 경우에는 직접 폰트, 색상, 크기 등을 수정해서 다운로드 할 수 있는 항목도 마련되어 있습니다.
^ㅇ^!!!
다음에는 JQueryUI를 통해서 UI를 적용하는 방법을 설명해보도록 하겠습니다. ^^
|
