The role of HTML HTML 규칙

jQuery Tools was primarily developed for "normal" HTML developers. You either have an existing website or are starting with a new one and these tools are used to enhance it. The goal here is to use "progressive enhancement" so that browsers that do not support JavaScript at all can still visualize your content.
jQuery Tools은 일반적인 HTML개발자들을 위해 개발되었다. 당신이 웹사이트를 가지고 있던, 또는 새로 만들기 위해 시작을 하던 이 툴들이 그 웹사이트를 더 강화하게 하기 위해 사용된다. 여기서의 목적은 "점진적인 향상"을 사용하기 위한 것이다. 그래서 JavaScript가 지원되지 않는 브라우져에서도 당신의 시각적인 효과는 그대로 볼 수 있어야 한다.

These tools are not bound to any specific HTML structure. For example, tabs can be constructed fromul, ol, dl, div or table elements. The same is true of our other jQuery Tools as well. The most important thing is to understand what you are doing and what HTML element is suitable for which specific situation.
이 툴들은 어떤 규정된  HTML구조에도 종속적으로 연결되지 않았다. 예를 들어
탭은 ul,ol,dl,div또는 테이블 엘리먼트로  구성할 수 있다. 동일한 형태를 jQuery Tools로 더 잘 구현할 수 있는 것은 사실이다. 그러나, 가장 중요한 것은 당신이 무엇을 나타낼것이고 html엘리먼트로 특정된 상황에 가장 적합한 것이 무엇인가를 이해하는 것이다.

All of the tools deal with a root element which is typically a div element, but it does not have to be. For example, a root element for an overlay is the one that contains all overlayed data. In every tool you can have any combination of HTML inside the root element such as images, forms, Flash objects and tables.
모든 tools는 일반적으로 div엘리먼트로 root엘리먼트를 구성한다. 그러나, 이것은
그렇게 할 필요가 없다. 예를 들어, 오버레이를 구성하기 위한 root엘리먼트는 모든 오버레이되는 데이터를 포함하는 하나의 엘리먼트일 뿐이다. 모든 tool을 가지고 이미지나, 폼, 플래쉬객체 또는 테이블과 같은 root엘리먼트 내에 html의 조합가질 수 있다.

The role of JavaScript and jQuery
JavaScript 와 jQuery의 역할

jQuery is a fast and concise JavaScript library that simplifies the development of cross-browser applications. All tools except flashembed are dependent on this library. jQuery skills are not requiredwhen using these tools. People have been using these tools without any prior knowledge about jQuery and even JavaScript itself. Of course, those skills would be a great help, but they are not required.

jQuery는 cross브라우징용 어플리케이션의 개발을 간단히 할 수 있게 해주는 빠른 javascript 라이브러리이다. 모든 Tools는 embed된 flash를 제외한 모든 것은 이 라이브러리에 의존한다. 사람들은 jQuery나 javascript자체에 대한 선우선되는 지식이 없이도 이툴들을 사용해 왔다. 물론, 그런 지식에 대한 skill은 대단히 도움이 되지만 꼭 필수적인 것은 아니다.

If you want to enhance your jQuery and JavaScript skills, the best things to learn about when using these tools would definitely be jQuery selectors and object literals. The first skill is used to select elements from the page to be enhanced with the tools and the latter is used for configuring the tools. Here is an example that introduces you to both of these skills:
만약 당신이 jQuery나 JavaScript의 스킬을 향상시키고자 한다면, 이 tools들을 사용하는데 있어서 배우면 가장 좋은 것은 jQuery 셀렉터나 객체 리터럴의 정의된 부분입니다. 첫번째 스킬(selecter)은 tools을 가지고 page를 강화할 경우에 page로 부터 엘리먼트를 선택할 때 사용된다. 그리고, 후자는 tools를 구성(속성 등)하는 데 사용된다.
여기에 이 두가지의 스킬에 대하여 설명하기 위한 예제가 있다.

  // two jquery selectors and a configuration given as an object literal
  $("#content ul.tabs").tabs("div.panes > div", {
 
  // configuration variables
  current: 'current',
  effect: 'fade'
 
  });

Here we have two jQuery selectors. The first one selects all ul elements whose class name is tabs which are all contained inside an element whose id is "content". This query is similar to CSS selectors and if you know CSS, you will feel at home here. The second selector selects all div elements that are directly nested inside a div whose class name is panes.

여기 예제에 2가지 형태의 jQuery 셀렉터가 있다. 첫번째는 "content"라는 id를 가진 엘리먼트 안에 있는 ul중 tabs라는 class이름을 가진 모든  ul엘리먼트를 선택한다.
이 문법은 CSS 셀렉터와 유사하다. 만약 당신이 CSS를 알고 있다면 당신은 이 부분을 친숙하게 느낄 것이다. 두번째는 class명이 panes인 div아래에(자식 엘리먼트) 위치한 모든 div엘리먼트를 선택한다.

Finally, we have a configuration object starting with { and ending with }. It contains a comma-separated list of name-value pairs. The name is followed by a colon which is followed by a value. The value can be a number, string, boolean, array, function or another object literal. Care must be taken to enclose string values in quotes. That is about it. You use this syntax to configure these tools.
마지막으로 {와 }로 구성되는 속성 객체가 있다. 이 구성값들은 ","콤마로 구성되고 name과 value로 쌍을 이루는 형태로 되어 있다.  ?? name(속성명)은 콜론 다음에 오고 값 다음에 위치한다?? 값은 숫자나 문자, boolean값, 배열, 함수 또는 다른 객체 리터럴이 될 수 있다. 주의할 점은 값은 작은 따옴표(' ')로 묶은 내에 위치해야 한다. 이 내용들이 위의 예제이다. 당신이 이 Tools을 구성하려면 위의 문법을 이용해라.

Execute your scripts when the document is ready
document가 준비되었을 때 ( ready() ) 이 스크립트를 실행해라.

It is important that you execute all your scripts only after the document is ready and scriptable. This can be done by enclosing your JavaScript calls inside a $(document).ready() block as follows:
document가 ready되고 스크립트를 사용할 수 있는 상태가 된 후에 당신의 스크립트 구분을 실행 시켜야 한다는 것은 중요하다. ?? 당신의 스크립트는 다음의 $(document).ready() 사이에 사용될 수 있다.

  $(document).ready(function() {
 
  // put all your JavaScript wizardry here
 
  });

This might be the most important thing in jQuery. Everything inside the block will load as soon as the document is scriptable but before the whole page contents such as images and Flash are loaded. Everything that you stick inside the braces is ready to go at the earliest possible moment. And as opposed to the traditional old-school "onload" attribute in the body tag you can have multiple$(document).ready() blocks on your page.
이것은 jQuery에서 가장 중요한것일 수도 있다. ready블록안의 모든 것들은 문서가 스크립팅이 가능한 상태가 되자마자 로딩될 것이다. ??그러나 페이지 전체의 이미지나 플래쉬 같은 것이 로딩되기 전일 것이다. ?? ??당신이 안전한 버틴목(ready 블록)안에 넣는 모든것들은 최초의 가능한 순간에 사용할 준비가 된다. 그리고 전통적인 구식인 body태그안의 "onload" 속성과는 반대로 당신의 페이지내에 $(document).ready() 블록은 여러개 사용할 수 있다.

You can also use a shorter syntax:

  $(function() {
 
  // same thing here.
 
  });

Which does exactly the same thing but is not so intuitive for a newcomer.
이것은 정확히 동일하게 동작하지만 직관적이지 않다.

Browser Support 지원 브라우져

jQuery Tools have been proven to work with the following browsers:

• Firefox 2.0+
• Internet Explorer 6+
• Safari 3+
• Opera 9+
• Chrome 1+

If you encounter any problem with jQuery Tools and any of these browsers, please report it to thejQuery Tools forum.
만약 당신이 jQuery Tools와 이들 브라우져들을 가지고 어떤 문제에 직면한다면, jQuery Toos forum에 알려주세요.

jQuery Tools and Flowplayer
jQuery Tools 와 Flowplayer

You must have noticed that this project is hosted on the Flowplayer website. This is because some of the tools were initially developed for making widgets that work well with video sites. Scrollablewas made for building playlists and Overlay was made for showing videos over other elements on the page. Little by little those widgets matured to the point where they are now.
당신은 이 프로젝트가 Flowplayer웹사이트에 호스트되어 있는 것을 고지해야만 한다. 위젯을 만들기 위해 초기에 개발된 몇몇 툴들은 Flowplayer(동영상)사이트와 잘 작동되도록 되어 있기 때문이다. 플레이 리스트를 제작하기 위해 만들어진 Scrollable이나 페이지에서 다른 엘리먼트 위에 비디오를 표시하기 위해 만들어진 Overlay. 그들 위젯은 현재 시점까지 조금씩 발전되어 완성되어 왔다.

Today Flowplayer and jQuery Tools have nothing specific to do with each other. Flowplayer is a video player and jQuery Tools is a generic user-interface library for the web. Of course, they can be used together because both are well behaving pieces of software. Here is a quick example of how videos can be overlayed on a page:

오늘날 Flowplayer와 jQuery Tools는 각각 함께 동작되도록 명확히 규정된 어떤것도 없다. Flowplayer는 비디오 플레이어 이고, jQuery Tools는 웹에서 사용되는 일반적인 사용자 인터페이스 라이브러리이다. 물론, 그것들은 함께 사용될 수 있다, 두가지 모두 소프트웨어의 명확히 필수적인 부분이기 때문이다.
여기에 페이지 위에서 비디오가 어떻게 오버레이 되는지 간단한 예제가 있다.

  // install flowplayer into a container element whose id is "player"
  var player = $f("player", "/media/swf/flowplayer/flowplayer-3.2.9.swf");
 
  // setup button action. it will fire our overlay
  $("a.overlayLink").overlay({
 
  // when the overlay is opened, load our player
  onLoad: function() {
  player.load();
  },
 
  // when the overlay is closed, unload our player
  onClose: function() {
  player.unload();
  }
  });

Flowplayer is Open Source software licensed with the GPL 3 open source license. There are also commercial licenses that allow us to focus full time on the development of tools and the player itself. They also allow us to provide the free content delivery network for the users of jQuery Tools. There is currently no possibility of expressing your satisfaction through making a donation; however, if you are interested in showing videos on your site you could consider purchasing aFlowplayer commercial license.
Flowplayer는 GPL5 오픈소스 라이선스를 가지고 있는 오픈소스이다.
물론 우리로 하여금 TOOLS와 PLAYER의 개발에 집중할 수 있도록 돕기위한
상업용 라이선스도 있다. 이런 상업용 라이선스는 jQuery Tools의 사용자들에게 무료 CDN서비스를 제공할 수 있다. 현재 기부를 통해 당신의 만족을 표현(기부영수증?)할 수는 없다. 그러나, 만약 당신의 웹사이트에 보여지는 비디오에 관심이 있다면 상업용 라이선스인 Flowplayer를 고려해서 구매할 수 있다.

Understanding jQuery Tools의 이해

jQuery Tools is a collection of the most important user interface components for the web. These are tabs, accordions, tooltips, overlays, exposing effects and scrollables. They can dramatically improve the usability and responsiveness of your site. They mainly focus on presenting information andvisual appeal. After all, this is exactly what most websites desperately want: to present their content to the reader in an easy and visually pleasing manner.
jQuery Tools은 웹사이트에서 제일 중요한 사용자 인터페이스의 컴포넌트들의 모음이다. 탭이나, 어코디언, 툴팁, 오버레이, 노출되는 효과, 스크롤링등이 있다.
이것들은 당신의 웹사이트의 사용성이나 반응성을 극적으로 향상시킬 수 있다.
그것들은 주로 정보와 시각적 매력을 제시하는데 중점을 둡니다. 결국, 이 관점이 대부분의 웹사이트가 원하는 정확한 관점입니다. 그것이 사이트의 정보를 보는 사용자에게 쉽고 시각적으로 기쁨을 주는 방법으로 컨텐츠를 제공하는 것입니다.

Other JavaScript UI libraries focus on desktop-like features such as drag-and-drop, ranges, sortable tables or draggable windows. They are meant to build "rich internet applications" (RIAs) such as email clients, task managers, CRM software, image organizers or feed viewers. These kinds of applications are very useful within a small group or when used in intranets; however, normal websites are very different in nature. Their purpose is to look good and present information. jQuery Tools are built exactly for that purpose.
다른 javascript UI라이브러리들은 드레그앤드롭이나 범위, 테이블정렬화, 드레그할 수 있는 창과 같이 데스트탑과 같은 기능에 중점을 둔다. 그것들은 이메일 클라이언트, 작업관리자, CRM 소프트웨어 , 이미지관리, 피드뷰어와 같은 RIA를 만드는 것을 의미한다. 이런 종류의 어플리케이션은 작은 그룹이나 인트라넷과 같은 곳에서 사용할 때는 매우 유용하다. 그러나 일반적인 사이트일경우는 본질적으로 다르다.
이런 일반적인 사이트들은 좋게 보이거나 정보를 제공하는데 목적이 있다.
jQuery Tools는 그 목적에 정확히 부합하도록 만들어 졌다.

It is recommended that you start designing your pages without using any JavaScript. There are many examples of highly functional, good looking and user friendly web sites that are not using JavaScript. The purpose of this library is to enhance an existing site with the great possibilities that modern JavaScript techniques have to offer. This is essentially the idea of "progressive enhancement" which is a common design pattern today. You should realize that highly professional sites don't overuse JavaScript just for the fun of it. Scripting is only used when it truly makes the pages more readable and user-friendly. This is where these jQuery Tools come into play.
당신이 javascript를 사용하지 않고 페이지를 디자인하기를 권장한다.
자바스크립트를 사용하지 않고 고가용성이나 좋아보이는 디자인, 사용자 친화적인 웹사이트들에 대한 예는 많이 있다. 이 라이브러리의 목적은 이미 제작되어진 사이트에 현대의 javascript 기술만을 제공해서 뛰어난 가능성을 향상시키는 데 목적이 있다. 오늘날의 일반적인 디자인 패턴에서는 "진보적인 향상"의 개념이 본질적이라고 생각한다. 매우 전문적인 사이트는 단지 재미를 위해서 javascript를 과용하지 않는다는 것을 깨달아야 합니다. 스크립팅은 단지 페이지를 더 읽기 쉽고, 더 사용자 친화적 만들려고 할 때만 사용합니다. 이 것이 jQuery Tools가 등장하게된 배경입니다.

This library is not a framework with a steep learning curve, lots of preliminary work and strict coding rules. You are not tied to any predefined HTML or CSS structures. You can include the library on your pages and start using it immediately. You can freely design the look and feel of your site or you can use any of the designs we present in our demos as a template.
이 라이브러리는 험한 학습 순서나 많은 예비 작업, 엄격한 코딩 규칙등이 있는 프레임웍이 아니다. 당신은 미리정의된 HTML이나 CSS 구조에 얼매이지 않는다. 당신의 페이지에 이 라이브러리를 포함해서 곧바로 시작할 수 있다. 당신의 사이트에 대한 느낌이나 보여지는 그래도 자유롭게 디자인 할 수 있다. 또는 우리의 데모에서 템플릿으로 제공하는 어떤 디자인도 사용할 수 있다.

These tools can be easily combined. Think of scrollables that trigger overlays or overlays that contain scrollables together with tooltips or whatever combination you can imagine. The possibilities are endless. And if that is not enough, you can harness the enormous power of the jQuery library. Many times you see complex JavaScript components implemented that could be done with just a few lines of jQuery code. For many websites, this may be the only JavaScript library necessary.
이 툴들은 쉽게 조합될 수 있다. ???###   #####????
가능성은 무한합니다. 그리고 만약 그것으로도 만족스럽지 않다면, 당신은 jQuery라이브러리의 엄청난 파워를 활용할 수 있습니다.
당신이 자주 보았던 복잡한 javascript 컴포넌트는 jQuery code 단 몇줄 만으로 구현할 수 있다. 이 라이브러리는 많은 웹사이트들을 위해 필수적인 javascript 라이브러리가 될 수 있을 것이다.

The old UNIX design philosophy "tools, not policy" is very important in web design.
오래된 UNIX의 디자인 철학인 "정책이 아닌 도구다"는 웹디자인에서 메우 중요하다.

 jQuery tools 에 대한 소개

Essential tools for modern websites
현재적인 웹사이트를 위한 필수 툴

Let's face it: do you really need drag-and-drop, resizable windows or sortable lists in your web applications?
현실을 직시해 볼때, 당신은 진정으로 당신의 웹어플리케이션내에서 드래그앤드롭, 윈도우 크기조정 또는 리스트의 정렬화가 필요하다고 생각합니까?

Websites are not desktop applications. They are different. What you really need is high usability, striking visual effects and all those "web 2.0" goodies that you have seen on your favourite websites.
  웹사이트는 PC용 어플이 아니다. 그 둘은 다른 것이다. 당신이 진정으로 필요한 것은 높은 유용성과 눈에띠는 시각적인 효과, 그리고 (?) 당신이 관심을 갖는 웹사이트에서 볼여지는 "웹 2.0"이라는 근사한 것들이다.

This library is an answer to this need. All tools can be used together, extended, configured and styled. You'll find your personal way of using the library.
이 라이브러리는 이 요구에 대한 답변이다. 모든 툴은 함께 사용될 수 있고, 확장되고, 구성되고, 스타일화 될 수 있다.
당신은 이 라이브러리의 사용법에 대한 개인적인 방법을 발견할 것이다.

Small size. High performance. Free CDN.
작은 사이즈, 높은 향상성, 무료 CDN(Content Delivery Network)

The UI part of this library weighs 4.45 Kb. This is possible with good programming habits and compressed files
이 라이브러리에서 UI부분은 4.45Kb밖에 안된다.
이 것은 좋은 프로그램습관과 압축형 파일이라 가능하다.

You can pick your own selection of tools from the download page or you can load the most common combinations directly from a free Content Delivery Network (CDN). 당신은 다운로드 페이지에서 툴의 선택사항을 스스로 선택할 수 있고, 또는 무료CDN으로 부터 직접 최상의 조합으로 이루어진 라이브러리를 로드할 수 있다.

The CDN is configured with the proper expire headers and compression settings so that the file loads fast. This CDN can be used in production environments without any charge.
그 CDN은 적절할게 만료되는 헤더와 압축된 설정으로 구성되어 있다, 그래서 그 파일은 빠르게 로드 된다. 이 CDN은 어떠한 사용료도 없이 개발환경에 사용될 수 있다

For beginners 초보자를 위해

A large demo area lets you copy & paste working code directly into your pages.
방대한 데모들은 당신의 작성페이지에 동작되는 코드를 Copy & paste만으로 사용될 수 있다.

From each demo there is a minimal version without redundant HTML, CSS or JavaScript. You can use them as templates and fine tune them to your requirements. They provide a quick way to get started. You are also free to use and modify all the graphics you'll find.
각각의 데모에서는 많은 HTML,CSS,JavaScript 없이 최소한의 버전만 있다. 당신은 그 데모들을 템플릿으로 사용할 수 있고, 또는 개발 요구사항에 맞도록 커스터마이징 할 수 있는 것을 찾을 수 있다. 그 데모들은 시작하기에 빠른 방법을 제공한다. 당신은 또한 이 사이트에서 찾은 모든 그래픽자료를 사용하거나 수정하는데 무료로 이용할 수 있다.

For serious programmers
깊이있게 고민하는 개발자를 위해

Each tool does only what it is supposed to do and nothing else. Tools and not policy.
각각의 툴들은 (?) 제공한는 기능만 사용할 수 있지 그 밖의 기능은 할 수 없다. Tool일 뿐이지 정책이 아니다.

Understandable API design. Clean design patterns. Compact and human readable source code on Github. That's it. 이해할수 있는 API 디자인, 깔끔한 디자인 패턴.
Github상에서 적절하고 읽기 좋은 형태의 소스, 바로 이것이다.

Learn one tool and you also have learned the other tools. 하나의 툴을 배우면 다른 툴드 배운것이나 마찬가지다.