2015년 6월 30일 화요일

일러스트와 친해지기_4. 패스파인더와 도형구성도구

ps. 이 게시물은 평택대학교 정선호 교수님의
http://www.kocw.net/home/search/kemView.do?kemId=983142



컴퓨터활용
일러스트레이터 CS6의 기능과 사용법 익히기
WWW.KOCW.NET

  강의를 듣고 작성한 독후감 형태 글입니다.
  게시물은 복습하는데 잠깐 보는거고,
  만약 처음 접한다면 위에 강의를 한번 들어보세요


서두 : 패스파인더와 도형구성도구는 방식은 틀리지만
  하는일은 같다. 좀더 세분화된 능력을 보여주는 패스파인더
  요소는 적지만 패스파인더의 기능을 커버 가능한 도형구성도구
  해당 기능을 알아본다.

사용방법 : 객체를 직접선택 도구로 선택 -> 각 메뉴별 실행
   -> 결과 확인
1. 패스파인더
 1) 모양모드 : 2개모드를 합침
  (1) 합치기 : 맨위 색상으로 선택 오브젝트를 1개로 묶음(합침)
  (2) 앞면오브젝트 제외 : 맨밑 오브젝트만 남김
       (중복된 부분도 날림)
  (3) 교차영역 : 모든 부분이 교차하는 부분만 남김
  (4) 교차 영역제외 : 2개 교차는 제외
      , 미교차, 3개이상 교차하는 부분은 포함하여 합침
 2) 패스파인더 모드 : 겹치는 부분을 2개로 나눔
  (1) 나누기 : 겹치는 부분을 새로운 객체로 나눔
       (나누기는 겉보기엔 같으나 그룹을 풀어주면 각각 수정가능)
  (2) 분리하기 : 보여지는 부분대로 분리(중복은 생각하지 않음)
  (3)  병합 : 같은 색상으로 묶어서 분리
  (4) 뒷면으로 자르기 : 가장 윗부분과 겹치는 부분은 남기고
       밑의 부분은 다 날림
  (5) 윤곽선 : 윤곽선만 남기고 다 날림
  (6) 이면 오브젝트 제외 : 위쪽(겹치지 않은) 부분만 남김

2. 도형구성 도구
    : 모양을 병합하거나 삭제해 다른 모양으로 편집함
사용방법 : 대상 객체를 선택 -> 도형구성도구 클릭
   -> 타겟 객체에 오버라이드 -> 2.-1) or 2.-2) or 2.-3) 등 실행
 1) 클릭하기 : 나눠짐
 2) 드래그 : 합쳐짐
 3) 삭제 : [alt] + [클릭]

일러스트와 친해지기_3. 선, 도형도구 다루기

ps. 이 게시물은 평택대학교 정선호 교수님의
http://www.kocw.net/home/search/kemView.do?kemId=983142



컴퓨터활용
일러스트레이터 CS6의 기능과 사용법 익히기
WWW.KOCW.NET

  강의를 듣고 작성한 독후감 형태 글입니다.
  게시물은 복습하는데 잠깐 보는거고,
  만약 처음 접한다면 위에 강의를 한번 들어보세요


1. 선 도구
 1) 단축기 : [\]
 2) 선 그리기
    : 기본은 드래그로 그린다. 하위 메뉴도 동일
      왜 하위 메뉴가 선도구로 그려져서 헷갈리게 하는지는
      좀 의아하지만
 3) 호 그리기
 4) 달팽이모양(나선형)
 5) 표 그리기
 6) 극좌표 그리기
 7) 기타 참고사항
    : 선 패널의 옵션 설정을 통해서 점선 처러 여부
       끝점 상태 처리 등의 옵션을 설정 가능

2. 도형도구 다루기
 1) 사각형 그리기
 2) 모서리가 둥근 사각형 그리기
    : 방향키로 끝점 둥근정도 설정 가능
 3) 원 그리기
    : 기본은 둥근원 방향키로 타원정도 설정가능
 4) 다각형 그리기
    : 기본은 5각형, 방향키로 3각형~ 다각형 선택가능
      + 사각형도 그려진다.
 5) 별 그리기
    : 기본은 각이 5개인 별모양, 방향키로 갯수 설정 가능
 6) 플레어 그리기
    : 기본은 각이 4개인 플레어, 방향키로 기준각 설정 가능
 7) 기타 참고사항
  (1) 방향키로 2)~6) 항목의 옵션 조정이 가능하다.
     : 4), 5), 6) 의 경우 각이 지는 꼭지점수가 변경
     : 1), 2), 3) 의 경우 모서리 둥근정도 혹은 타원 정도가 변경된다.
  (2) 2.-7)-(1) 항목에 대해 [shift] +[드래그]로도 설정가능

2015년 6월 26일 금요일

일러스트와 친해지기_2. 일러에서 그리기요소와 펜도구 사용하기

ps. 이 게시물은 평택대학교 정선호 교수님의
http://www.kocw.net/home/search/kemView.do?kemId=983142



컴퓨터활용
일러스트레이터 CS6의 기능과 사용법 익히기
WWW.KOCW.NET

  강의를 듣고 작성한 독후감 형태 글입니다.
  내용을 알면 읽고 복습하는데 좋고,
  처음 접한다면 위에 강의를 한번 들어보세요


[세번째]
1. 일러스트에서 그리기 요소는?
 1) 패스 or 정점
    : 최소 2개 점으로 이루어진 직선 혹은 곡선
      곡선은 방향성 이라는 속성이 존재함
 2) 새그먼트
    : 정점이 모여 이루어진 하나의 도형?
      아닐수도 있다.
 3) 객체 or 오브젝트
    : 새그먼트가 모여 이루어짐 (보통 하나의 그림 형태)
 4) 고정점
    : 객체는 이 고정점을 중심으로 회전할 수 있음(중심점)

2. 대지 라는 개념이 있음 포샵을 레이어와 다른점은
  대지는 각각 배경을 가지고 있는 하나의 그림임
  대지끼리 작업하거나 합쳐서 보이게 하거나
  합치거나 하는 작업이 가능.

3. 단축키
 1) 색 선택 : 칠색상 부분 더블클릭
 2) 선택 툴 : [V]
 3) 객체 그룹연결 : [객체s 선택] + [G]
 4) 그룹중 하나의 객체만 수정
    : [그룹선택] → [더블클릭] → [더블클릭]
 5) 그룹 내부 정렬
    : [컨트롤패널 정렬 패널 선택후 작업]
 6) 객체를 감추기(작업에서 잠시 제외)
    : [레이어 패널에서 레이어 밑에
      객체 리스트에서 눈모양을 클릭하여 제거]
 7) 객체를 잠그기(작업에서제외 + 보이기)
    : [레이어 패널에서 레이어 밑에
      객체 리스트에서 열쇠모양 클릭하여 제거]

[네번째]

[세번째]
1. 패스 : 1개이상 직선 or 곡선으로 구성됨
 1) 닫힘패스 : 원, 삼각형, 기하학 도형
 2) 열림패스 : 선, 연결되지 않은 도형
 3) 패스 기준점 : 중심(회전, 방향을 잡는) 점

2. 패스의 요소
 1) 정점 : 그냥 점
 2) 세그먼트 : 정점을 연결하는
 3) 방향점 : 곡선(곡선만 적용) 위치, 방향 중심점
 4) 방향선 : 곡선의 각도,위치를 알려주는 선

3. 패스 다루기
 펜(단축키는 p) 로 패스를 관리가능
 1) 펜 그리기
  (1) 직선 : 펜 선택 ->[클릭] -> [클릭] (자동으로 직선연결)
  (2) 곡선 : 펜 선택 ->[클릭] -> [left button dowm]
              +[마우스] -> ↓->  [드래그]
  (3) 곡선 방향변경 : [alt]+[drag]
  (4) 곡선 복사 : [drag]+[alt]
 2) 정점 추가
  (1) 직접선택도구->세그먼트위에 마우스 위치-> 클릭
 3) 정점 삭제
  (1) 직접선택도구->정점위에 마우스 위치-> 클릭
 4) 정점 변경
  (1) 패스 단순화 : 선택 -> 오브젝트-패스-단순화
  (2) 패스 매끄럽게 : 선택 -> 오브젝트-패스-패스매끄럽게
  (3) 채우기 밑에 칠 없음 선택시 곡선 안에 칠을 하지 않음
  (4) 직접선택도구-> 정점위에 마우스 위치-> alt->드래그
 5) 정점복사
    : 정점변환도구-> 정점위에 마우스 위치-> alt->드래그
 6) 패스 늘리기
    : 직접선택도구 -> 크기조절도구-> 다른 고정점 선택
       -> shift.....->드래그
 7) 패스연결하기
    : 직접선택도구 ->세그먼트 2이상 선택
       -> 오브젝트-패스-연결 선택
 8) 패스 끊어내기
    : 직접선택도구 -> 정점선택 -> 패스 자르기(상단 옵션메뉴) 선택

4. 기타 필요한 기능
 1) 색 없음 : 오브젝트 선택 -> 채워지는 색 선택 -> 색 없음 선택
 2) 동일색으로 설정 : 색을 바꿀 오브젝트 선택
      -> 스포이드 툴 선택 -> 바꾸고자하는 색 을 클릭

일러스트와 친해지기_1. 메뉴 알아가기

ps. 이 게시물은 평택대학교 정선호 교수님의
http://www.kocw.net/home/search/kemView.do?kemId=983142

컴퓨터활용
일러스트레이터 CS6의 기능과 사용법 익히기
WWW.KOCW.NET

  강의를 듣고 작성한 독후감 형태 글입니다.
  내용을 알면 읽고 복습하는데 좋고,
  처음 접한다면 위에 강의를 한번 들어보세요

[첫번째]

1. 메뉴구성
 1) 상단 우측 : 메뉴
 2) 상단 가운데 및 좌측 : 툴 옵션 설정도구
 3) 우측 : 옵션 패널
 4) 좌측 위부터 :
  (1) 선택도구
  (2) 그리기 도구
  (3) 변경/색상관련 도구

2. 대지 라는 개념이 있음 포샵을 레이어와 다른점은
   대지는 각각 배경을 가지고 있는 하나의 그림임
   대지끼리 작업하거나 합쳐서 보이게 하거나
   합치거나 하는 작업이 가능

3. 단축키
 1) 화면 확대 : [ctrl]+[+] , [alt]+휠앞으로
 2) 화면 축소 : [ctrl]+[-] , [alt]+휠뒤로

[두번째]

1. 선택도구
  객체 단위별로 선택되어진다.

2. 직접 선택도구
  1), 2) 차이가 있다고 하나 기본적으로 하나의
   모양을 구성하는 요소(정점)을 선택한다.
 1) 직접선택
 2) 그룹선택

3. 마술봉
  클릭한 지점을 기준으로 비슷한 속성끼리 선택함
 1) 마술봉 관련 기능들
  (1) 선택된 상태에서 다른 요소를 추가
     : 이전 요소가 선택된 상태 + [shift] + [클릭]
  (2) 선택한 요소를 제거
     : [alt]+[선택한 요소중 하나를 클릭]
  (2) 마술 옵션 설정
     : [마술봉 도구 더블클릭]
      색상유사성, 선, 투명도, 블랜딩 4가지 옵션 설정 가능
      수치가 높을수록 선택되는 범위가 넓어진다.

4. 올가미
  영역을 드래그하여 선택하는 방법
   마우스 팬과 상성이 맞을것으로 보임

5. 격리모드
 1) 선택된 객체 혹은 정점 만을 수정하는 방법
   격리 모드에서 작업하면 선택 이외의 부분에는 적용되지 않음
 2) 방법
  (1) [객체 혹은 정점 선택] +[double click], [ESC](해제)
  (2) [객체 혹은 정점 선택]
       +[옵션패널의 레이어 기능에서 메뉴 클릭]
       +격리모드 시작 혹은 종료로 제어

6. 단축키_2
 1) 선택한 객체 복사 : [객체 선택] + [alt] + [드래그]
     : 드래그 끝지점에 복사본이 생김
 2) 선택한 객체 이동 : [객체 선택] + [드래그]



2015년 6월 24일 수요일

클래스 디자인 패턴 3. Decoration Pattern_

1. 개념
  1) 정의 : 객체에 추가적인 요건을 동적으로 추가한다.
       본체가 될 수 있는 내용들은 그대로 상속,
       추가되는 내용들을 묶어서 데코레이션 이라는 추상화 객체
       밑에 둔다. 그리고 데코레이션 밑의 생성자를 작성시
       (기존 객체 내용 + 추가사항을 추가)
       객체 정보를 유지하고 덮어쓰기 가능토록 하여
       생성할때 기존 객체 내용이 유지되도록 작성한다.
       결과적으로 같이 상속 받는 클래스이지만 원본 클래스와
       장식 클래스가 하는일이 구별되게 구현된다.

  2) 상속으로 표현하기에 까다로운(옵션처럼 넣어도 되고
       안넣어도 되는) 내용을 관리하는데 용이하다.
      안좋은 점은 클래스가 늘어나고(조금)
       가독성도 안좋아지고 안좋아지고 안좋아지고....
       머리는 복잡해지고 복잡해지고 물론 아래 예제는
       정말 간단한 경우고 






2. 구현
  1) 프로젝트 구성
















  2) 코드
   (1) Beverage (주문 추상화 클래스)

package beverageBase;

public abstract class Beverage {
 protected String description = "no Title";
 
 public String getDescription(){
  return description;
 }
 
 public abstract double cost();

}

   (2) Test 를 위한 main 포함 커피숍 클래스

package coffeeSale;

import decorations.Mocha;
import decorations.Soy;
import decorations.Whip;
import products.DarkRoast;
import products.Espresso;
import products.HouseBlend;
import beverageBase.Beverage;

public class StarbuzzCoffee {
 public static void main(String args[]){
  Beverage beverage = new Espresso();
  
  System.out.println(beverage.getDescription()+"$" + beverage.cost());
  
  Beverage beverage2 = new DarkRoast();
  beverage2 = new Mocha(beverage2);
  beverage2 = new Mocha(beverage2);
  beverage2 = new Mocha(beverage2);
  beverage2 = new Whip(beverage2);
  System.out.println(beverage2.getDescription()+"$" + beverage2.cost());
  
  Beverage beverage3 = new HouseBlend();
  beverage3 = new Soy(beverage3);
  beverage3 = new Mocha(beverage3);
  beverage3 = new Whip(beverage3);
  System.out.println(beverage3.getDescription()+"$" + beverage3.cost());
 }
}

   (3) Decoration 관리를 위한 추상 CondimentDecorator

package decorationA;

import beverageBase.Beverage;

public abstract class CondimentDecorator extends Beverage{
 public abstract String getDescription();
}

   (4) Decoration 클래스 Milk

package decorations;

import beverageBase.Beverage;
import decorationA.CondimentDecorator;

public class Milk extends CondimentDecorator{
 Beverage beverage;
 
 public Milk(Beverage beverage) {
  this.beverage = beverage;
 }

 @Override
 public String getDescription() {
  
  return beverage.getDescription()+", Milk";
 }

 @Override
 public double cost() {
  // TODO Auto-generated method stub
  return .10+beverage.cost();
 }
}

* 원하는 숫자만큼 작성
   (5) 제품 클래스  DarkRoast
package products;

import beverageBase.Beverage;

public class DarkRoast extends Beverage {
 public DarkRoast(){
  
  description = "DarkRoast";
  
 }

 @Override
 public double cost() {
  // TODO Auto-generated method stub
  return .99;
 }
}


* 원하는 숫자만큼 작성

ps. 데코레이션 패턴 관련 링크 
프리젠테이션으로 잘 정리함 적절하게 제가 적절하게 설명하지
   못한 부분때문에 머리 싸매지 마시고 
   아래 링크를 한번 들어가시기 바랍니다.
https://prezi.com/femqnxnjgsoi/decoration-pattern/

클래스 디자인 패턴 2. Observer Pattern_


1. 개념
  1) 한 객체 상태가 바뀌면 해당 객체에 의존하는
      다른 객체들에게도 연락이 가고 자동으로 내용이
      갱신되는 방식으로 1:n 의존성을 정의
     서로 영향을 미치는 객체를 간접적으로 연결

  2) 


   Subject, Observer를 interface로 정의하고
    각각 구현체가 implements 한다.
   Observer구현체가 Subject 구현체에서 정의한 옵저버 등록,
    삭제가 가능하고
   Observer 등록시 Subject 내용 변경시 변경된 내용이
    Observer 구현체로 전달된다.

   이렇게 서로 양 쪽 구현체가 서로에게 영향을 미쳐야 되는 경우
    interface를 통한 결합시 서로 독립적으로 움직 일 수 있다.
    (ConcreateObserver 중 하나는 추가,
      삭제하더라도 이상없이 동작)

   자바에서는 Observer 를 상속받아 여러 이벤트리스너를
     구현해놨다.



2. 구현
  1) 프로젝트 구성



  2) 코드
   (1) 사용 클래스1 CurrentConditionsDisplay.java
package weather;
package callEtc;

import observerA.Observer;
import subjectA.Subject;
import displayA.DisplayElement;

public class CurrentConditionsDisplay implements Observer, DisplayElement{
 private float temperature;
 private float humidity;
 private Subject weatherData;
 
 public CurrentConditionsDisplay(Subject weatherData){
  this.weatherData = weatherData;
  weatherData.registerObserver(this);
 }
 @Override
 public void display() {
  // TODO Auto-generated method stub
  System.out.println("Current conditions: " + temperature
    + ", F degrees and " + humidity + "% humidity");
 }

  @Override
 public void update(float temperature, float humidity, float pressure) {
  // TODO Auto-generated method stub
  this.temperature = temperature;
  this.humidity = humidity;
  display();
 }

}

   (2) 사용클래스2- ForecastDisplay 

package weather;
package callEtc;

import observerA.Observer;
import subjectA.Subject;
import displayA.DisplayElement;

public class ForecastDisplay implements Observer, DisplayElement{
 private float temperature;
 private float humidity;
// private float pressure;
 private Subject weatherData;
 
 public ForecastDisplay(Subject weatherData){
  this.weatherData = weatherData;
  weatherData.registerObserver(this);
//  weatherData.removeObserver(this);
 }
 
 @Override
 public void display() {
  // TODO Auto-generated method stub
  float max;
  float min;
  float avg;
  
  if(temperature< humidity){
   max= humidity;
   min=temperature;
  }else{
   max= temperature;
   min=humidity;
  }
  avg = (max+min)/2;
  
  System.out.println("Avg/Max/Min temperature = " + avg
    + "/" + max + "/"+min);
  
 }
 @Override
 public void update(float temperature, float humidity, float pressure) {
  // TODO Auto-generated method stub
  this.temperature = temperature;
  this.humidity = humidity;
  //this.pressure = pressure;
  display();
 }
}

   (3) interface DisplayElement

package weather;
package displayA;

public interface DisplayElement {
 public void display();

}

   (4) interface Observer 

package weather;
package observerA;

public interface Observer {
 public void update(float temp, float humidity, float pressure);

}

   (5) interface Subject

package weather;
package subjectA;

import observerA.Observer;


public interface Subject {
 public void registerObserver(Observer o);
 public void removeObserver(Observer o);
 public void notifyObservers();
}

   (6) WeatherData 
package weather;
package subjectA;

import java.util.ArrayList;

import observerA.Observer;


public class WeatherData implements Subject{
 private ArrayList observers;
 private float temperature;
 private float humidity;
 private float pressure;
 
 public WeatherData(){
  observers = new ArrayList();
 }
 
 @Override
 public void registerObserver(Observer o) {
  // TODO Auto-generated method stub
  observers.add(o);
 }

  @Override
 public void removeObserver(Observer o) {
  // TODO Auto-generated method stub
  int i = observers.indexOf(o);
  if(i>=0){
   observers.remove(i);
  }
 }

  @Override
 public void notifyObservers() {
  // TODO Auto-generated method stub
  for(int i=0; i< observers.size();i++){
   Observer observer = (Observer)observers.get(i);
   observer.update(temperature, humidity, pressure);
  }
 }
 
 public void measurementsChanged(){
  notifyObservers();
}
 public void setmeaurements(float temperature, float humidity, float pressure){
  this.temperature = temperature;
  this.humidity=humidity;
  this.pressure = pressure;
  measurementsChanged();
 }

}


   (7) TEST 확인용 클래스 

package weather;

import subjectA.WeatherData;
import callEtc.CurrentConditionsDisplay;
import callEtc.ForecastDisplay;

public class WeatherStation {
 public static void main(String[] args) {
  WeatherData weatherData = new WeatherData();
  
  CurrentConditionsDisplay currentDisplay = new CurrentConditionsDisplay(weatherData);
  ForecastDisplay forecastDisplay = new ForecastDisplay(weatherData);
  
  weatherData.setmeaurements(80, 70, 30.4f);
  weatherData.setmeaurements(60, 50, 20.4f);
  
 }

}


  3) 테스트
Current conditions: 80.0, F degrees and 70.0% humidity
Avg/Max/Min temperature = 75.0/80.0/70.0
Current conditions: 60.0, F degrees and 50.0% humidity
Avg/Max/Min temperature = 55.0/60.0/50.0

ps2. Java Design pattern 예제

    Observer 
public interface Observer {
    public abstract void update(NumberGenerator generator);

}


   NumberGenerator 
import java.util.Vector;
import java.util.Iterator;

public abstract class NumberGenerator {
    private Vector observers = new Vector();        // Observer들을 보관
    public void addObserver(Observer observer) {    // Observer를 추가
        observers.add(observer);
    }
    public void deleteObserver(Observer observer) { // Observer를 삭제
        observers.remove(observer);
    }
    public void notifyObservers() {               // Observer에 통지
        Iterator it = observers.iterator();
        while (it.hasNext()) {
            Observer o = (Observer)it.next();
            o.update(this);
        }
    }
    public abstract int getNumber();                // 수를 취득한다.
    public abstract void execute();                 // 수를 생성한다.

}


    RandonNumberGenerator -- number Generator와 동일
import java.util.Random;

public class RandomNumberGenerator extends NumberGenerator {
    private Random random = new Random();   // 난수발생기
    private int number;                     // 현재의 수
    public int getNumber() {                // 수를 취득한다.
        return number;
    }
    public void execute() {
        for (int i = 0; i < 20; i++) {
            number = random.nextInt(50);
            notifyObservers();
        }
    }
}

----- Oberser 구현체
public class DigitObserver implements Observer {
    public void update(NumberGenerator generator) {
        System.out.println("DigitObserver:" + generator.getNumber());
        try {
            Thread.sleep(100);
        } catch (InterruptedException e) {
        }
    }
}


-------- 옵저버 구현체2 GraphjObserver
public class GraphObserver implements Observer {
    public void update(NumberGenerator generator) {
        System.out.print("GraphObserver:");
        int count = generator.getNumber();
        for (int i = 0; i < count; i++) {
            System.out.print("*");
        }
        System.out.println("");
        try {
            Thread.sleep(100);
        } catch (InterruptedException e) {
        }
    }
}


---- 테스트 클래스
public class Main {
    public static void main(String[] args) {
        NumberGenerator generator = new RandomNumberGenerator();
        Observer observer1 = new DigitObserver();
        Observer observer2 = new GraphObserver();
        generator.addObserver(observer1);
        generator.addObserver(observer2);
        generator.execute();
    }
}

결과 : 
DigitObserver:21
GraphObserver:*********************
DigitObserver:40
GraphObserver:****************************************
DigitObserver:7
GraphObserver:*******
DigitObserver:5
GraphObserver:*****
DigitObserver:39
GraphObserver:***************************************
DigitObserver:48
GraphObserver:************************************************
DigitObserver:38
GraphObserver:**************************************
DigitObserver:43
GraphObserver:*******************************************
DigitObserver:35
GraphObserver:***********************************
DigitObserver:32
GraphObserver:********************************
DigitObserver:8
GraphObserver:********
DigitObserver:25
GraphObserver:*************************
DigitObserver:15
GraphObserver:***************
DigitObserver:36
GraphObserver:************************************
DigitObserver:40
GraphObserver:****************************************
DigitObserver:23
GraphObserver:***********************
DigitObserver:0
GraphObserver:
DigitObserver:19
GraphObserver:*******************
DigitObserver:12
GraphObserver:************
DigitObserver:44
GraphObserver:********************************************


3. 기타 

   (1) 위키
https://ko.wikipedia.org/wiki/%EC%98%B5%EC%84%9C%EB%B2%84_%ED%8C%A8%ED%84%B4

   (2) Powerful Programing 옵저버 패턴
       저보다 더 잘정리되어 있습니다.
       내용도 같고 예제도 같음
http://warmz.tistory.com/751


4. 관련패턴

 1) Mediator 패턴



2015년 6월 3일 수요일

Jquery - Qtip 제이쿼리 큐팁에 대해서

워드프레스 수정작업을 부탁받아서 진행하는 도중에
 대상이 되는 플러그인 부분에서 .Qtip 이라는 함수를 쓰던데
 여기에 대해서 한글을 대상으로 찾아봤는데
 많이 다루지 않았음.


결론은 
Jquery 를 확장한 Qtip 이라는 라이브러리이며
 예제처럼 글의 일부에 대한 팁을 보여줄 수 있는데
기능이 생각보다 잘 구성되어 있어 쓰기 좋더라


결론2는
영어로 된 사이트지만 예제가 빠방하고 
  가져다 쓰는 함수가 안정적이라서 굳이 설명문을 작성할 필요가
  없어보인다.

<http://qtip1.com/demo/ 에서 발췌함>

참고사이트

1. qTip : 여기에서 참고할 것은 라이브러리 파일을 다운로드 받는것
            그리고 Demo부분을 확인하고 본인이 구현하고자 하는거에 
            가까운 예제를 받아서 쓰면 된다. 
           Document도 자세하게 제공되지만 예제가 잘 되어 있어서
           굳이 볼 필요는 없어 보인다.
http://qtip1.com

qTip - The jQuery tooltip plugin - Demos - Index


2. 코딩도장 : 제목에서는 최고의 ToolTip 을 판단하지만
          좀더 확장있는 코드를 작성하기 위한 예제가 주어짐
          머리깨고 있을때 참고바람.
http://codingdojang.com/scode/313?orderby=time

최고의 jquery tooltip 플러그인은 무엇인가요? - 코딩도장
tipsy나 Jquery Bubble Popup등을 사용했었지만 qTip을 사용해 본 후에는 이것들을 떠나보낼 수 밖에 없었습니다. ^^


3. qTip2 : 여기에서 참고할 것은 1번과 동일, Demo를 
          씨씨 하여 씨브하면 참 편합니다.
http://qtip2.com


qTip2 - Pretty powerful tooltips
qTip jQuery plugin. The jQuery tooltip plugin.
QTIP2.COM|작성자: CRAIG THOMPSON