jQuery UI CSS Framework 1

jQuery UI Theme를 Customizing하는 방법에 대해서 알아보도록 하겠습니다.

먼저 jQeury UI CSS Framework에 대한 구조를 살펴보고 아래의 2가지 방법을 통해서 Theme를 변경해보도록 하겠습니다.
1. ThemeRoller를 이용한 방법
2. jQuery UI CSS Framework를 직접 변경하는 방법

jQuery UI의 Theme는 표준 스타일과 각 컨트롤의 스타일이 합쳐져서 구성됩니다. jQuery UI Theme중에 'ui-lightness'를 다운받고 압축을 풀어서 themes폴더를 보면 아래 그림과 같습니다.

=> 앞에서 말한 표준 스타일에 해당하는 파일은 'ui.theme.css'입니다. 'ui.core.css'는 Layout Helpers, Icos 등에 대한 클래스들이 존재하고 'ui.base.css'는 'ui.core.css'와 각 컨트롤에 대한 css파일을 import해주는 파일이며 ui.all.css는 'ui.base.css'와 'ui.theme.css'파일을 import해주는 파일입니다. 그리고 마지막으로 'jquery-ui-1.7.2.custom.css'는 이런 모든 파일을 단순히 모아놓은 파일이고 실질적으로 프로젝트를 진행하면서는 이 파일 하나만을 참조해서 사용합니다.
'ui.theme.css'파일을 열어보면 widget이라는 container가 보입니다. 이것은 각 컨트롤마다 공통되는 부분의 스타일을 정의해놓은 클래스입니다. 따라서 ui-widget-header를 변경해주면 jQuery UI 컨트롤인 dialog, datepicker, tabs, progressbar등 모든 컨트롤의 header가 변경됩니다.
개인적으로 가장 재미있는 부분은 바로 icon입니다. images폴더에 보면 하나의 파일에 여러 가지 아이콘 모양이 있는 것이 보입니다. 그리고 똑같은 위치에 색깔만 다른 아이콘 가지고 있는 것을 볼 수 있습니다.

.ui-widget-header .ui-icon {background-image: url(images/ui-icons_ffffff_256x240.png); }   .ui-icon-alert { background-position: 0 -144px; } .ui-icon-info { background-position: -16px -144px; } .ui-icon-notice { background-position: -32px -144px; } .ui-icon-help { background-position: -48px -144px; } .ui-icon-check { background-position: -64px -144px; } .ui-icon-bullet { background-position: -80px -144px; } .ui-icon-radio-off { background-position: -96px -144px; } .ui-icon-radio-on { background-position: -112px -144px; } .ui-icon-pin-w { background-position: -128px -144px; } .ui-icon-pin-s { background-position: -144px -144px; } .ui-icon-play { background-position: 0 -160px; } .ui-icon-pause { background-position: -16px -160px; } .ui-icon-seek-next { background-position: -32px -160px; }

=> icon 역시 widget으로 각 부분(여기서는 header)별로 지정할 수 있습니다. 백그라운 이미지로 하나의 파일을 첨부해주는 것을 볼 수 있으며 파일명에서 그 색깔(ffffff:흰색)을 알 수 있습니다. 그리고 밑을 보면 하나의 파일에 position으로 아이콘을 나타내고 있습니다. 그래서 첨부되는 아이콘 파일은 한 가지이며 그 위치가 모두 동일한 색만 다른 파일 이였던 것입니다. 이런 파일을 만드는 것은 어렵겠지만 이미 만들어진 파일이 있으므로 해당 파일만 변경해주면 jQuery UI에 사용된 모든 아이콘의 색을 변경할 수 있는 것입니다. 바로 css를 사용하는 이유이기도 합니다.

그러면 이제 테마를 변경해보겠습니다.
1. ThemeRoller를 이용한 방법
http://jqueryui.com/themeroller/

아래의 사이트를 가보면 갤러리에 이미 20개정도의 테마가 존재하며 해당 테마를 선택하고 이름에서도 알 수 있듯이 font, header, content 등을 변경하면 오른쪽에 화면에서 적용되는 컨트롤 전부를 볼 수 있습니다. 이렇게 변경한 이후에 download theme 를 클릭하게 되면 변경된 테마로 jQuery UI를 다운받을 수 있습니다.

2. jQuery UI CSS Framework를 직접 변경하는 방법
특정한 스타일로 변경해야 하는 것이 아니라면 ThemeRoller를 이용하면 대부분 해결이 됩니다. 그러나 특정 이미지를 백그라운드 이미지로 하고 싶은 경우처럼 수동으로 변경해야 할 경우도 생길 수 있습니다.
만약에 dialog 컨트롤에 백그라운드 이미지로 특정한 파일을 보여주고 싶다면 어떻게 해야 될까요?

'jquery-ui-1.7.2.custom.css'파일에서 아래의 부분을 변경해주시면 됩니다.

.ui-dialog .ui-dialog-titlebar { padding: .5em .3em .3em 1em; position: relative;  } .ui-dialog .ui-dialog-title { float: left; margin: .1em 0 .2em; } .ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px;margin: -10px 0 0 0; padding: 1px; height: 18px; } .ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; } .ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; } .ui-dialog .ui-dialog-content { border: 0; padding: .5em 1em; background: none; overflow:auto; zoom: 1; } .ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image:none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; } .ui-dialog .ui-dialog-buttonpane button { background-image: url(images/파일명) ; float:right; margin: .5em .4em .5em 0; cursor: pointer; padding: .2em .6em .3em .6em; line-height:1.4em; width:auto; overflow:visible; }

=> dialog 컨트롤이기 때문에 당연히! ui-dialog클래스를 찾아주면 됩니다. 위와 같이 이름만 보아도 알 수 있는 클래스와 그 클래스에 대한 속성들이 나열되어 있습니다. dialog 컨트롤에는 여러 개의 버튼이 올 수 있기 때문에 buttonpane이라는 것도 보이고 titlebar, cotent 등등 변경이 참 쉬워 보입니다. ^^

출처 - http://resisa.tistory.com/99