Spring프레임워크1




1교시
수업준비
자바설치(java se)
자바환경변수 설정
이클립스 설치(java ee버전)
이클립스 인코딩 utf-8설정: general -> workspace -> UTF8

수업방향: 스프링프레임워크로 간단한 게시판 만들어보기
스프링 프레임워크이란?
자바를 기반으로 한, 다양한 어플리케이션을 제작하기 위한 프로그래밍 오픈소스 프레임워크
Rod Johnson 창시
엔터프라이즈 어플리케이션 개발의 복잡성을 줄여주기 위한 목적
POJO(Plain Old Java Object)를 사용해서 가능하게함.

마치 컴퓨터가 CPU, HDD, RAM 등으로 이루어져서 하나의 컴퓨터 기능을 이루는 것처럼,
우리는 스프링을 활용하여 각각의 구성요소를 만들어 연결해서 어플리케이션이 만들예정






우리가 해야할 것!
- 스프림 프레임웍 구성요소
- 구성요소 작성방법
- 구성요소간 설정하는 법


특징
- 자바 객체 관리 경량급 컨테이너
- POJO 방식의 프레임워크
- 제어역전을 지원(Inversion of Control)
- 의존성 주입을 지원(Dependency Injection)
- 관점지향 프로그래밍 지원(AOP: Aspect Oriented Programming)
- 다양한 API제공 및 연동지원: ex) hiebernate, mibatis 등을 간단하게 붙일수 있음











2교시


이클립스에 Spring 설정하기
help -> eclipse marketplace -> 검색: "sts" -> install





설치가 제대로 됬다면,
project 생성 -> other -> "spring" 검색후 아래 사진처럼 나오면 성공한 것임.



일반적 java 코딩(아래)
Class B b = new Class A();  <-- 일반적으로 프로그래머가 주입해서 참조시키는것
스프링은 주입을 자동으로 해줌.

그것을 배우기위해서, 제어역전지원, 의존성지원특징을 배울것임.
의존성 주입객체, 의존성 주입설정을 해보자!



아래 사진의 구조를 스프링은 스프링 컨테이너에 담고 있음



우리는 이 것을 설정하기 위해서, xml에 설정을 입힘.



스프링 설정전 개념을 익히기 위해서 자바 프로젝트로 개념을 익히자.
자바 프로젝트 만들기(자바프로젝트를 만들어서 Spring 프로젝트로 변화시키기)


프로젝트: Day01_Depenedcy_Injection
패키지: di01
아래 클래스



/*
* 선생님 노트
* 스프링 프레임워크에서의 의존성 주입방법:
* 1. 생성자(constructor) 주입방법
* 2. 설정자(setter) 주입
*/

스프링 컨테이너 설정은 Spring Bean Configuration File을 생성해서 함.



파일명을 applicationContext로 하기





di01 패키지작업장
결과



Tire.java
인터페이스 Tire
package di01;
public interface Tire {
    public void roll();
}


ChinaTire.java
package di01;
public class ChinaTire implements Tire{
    @Override
    public void roll() {
       // TODO Auto-generated method stub
       System.out.println("중국 타이어!");
    }
}


KoreaTire.java
package di01;
public class KoreaTire implements Tire{
    @Override
    public void roll() {
       // TODO Auto-generated method stub
       System.out.println("한국 타이어!");
    }
}



Car.java
package di01;
public class Car {
    //  다른객체를 사용하는 클래스, Tire에 의존한다.
    
    private Tire tire //  tire의 객체를 멤버변수로 가지고, 사용도 하고있음.
    public void setTire(Tire tire) {
       this.tire = tire;
    }
    
    //  Car는 Tire에 의존함.
    public void drive() {
       tire.roll();
       System.out.println("자동차가 굴러갑니다.");
    }
    
}


Driver.java
package di01;
public class Driver {
    public static void main(String[] args) {
       // TODO Auto-generated method stub
       // Car 객체 만들어서 객체가 가지는 멤버 변수에 의존성 주입
       Car myCar = new Car();
       Tire tire = new KoreaTire();
       
       myCar.setTire(tire);  //  바로 이부분이 의존성 주입!
       // 의존성주입과정: 객체를 만들고, 대입해주는것을 기존에는 프로그래머가 함.
       // 스프링이 위와 같은 의존성주입과정을 대신해줌.      
       
       myCar.drive();
       
       /*
        * 선생님 노트
        * 다음 di02패키지 작업장에서 의존성 주입을 배워보자.
        * 스프링 프레임워크에서의 의존성 주입방법:
        * 1. 생성자(constructor) 주입방법
        * 2. 설정자(setter) 주입
        */ 
    }
}










3교시
3교시 목표
1. 스프링 컨테이너 객체생성
2. 스프링 컨테이너에서 생성한 bean 꺼내와서 사용하기



먼저 개념 이해
스프링 컨테이너의 설명, 계층 및 종류


container종류: BeanFactory> ApplicationContext> WebApplicationContext


<Bean>태그의 정의, 속성의 종류

scope기본값 singleton 1개의 파일을 계속해서씀.
scope가 prototype이면 요청할때마다 새로 생성해서 만듦.
factory-method: instance를 불러오는 기능
lazy-init: 늦게초기화를 함.



파일(설정 메타데이터)
sts 라이브러리를 marketplace에서 제대로 install했다면, 
프로젝트 -> 마우스 오른쪽 -> new -> other-> Spring bean configuration 하면 생김(xml 파일임)
maven을 이용하여 라이브러리 관리를 함.




실전
이제 실제로 해보기
1번: Configuration 파일은 생성완료했음.
2번: 프로젝트를 Maven이 관리할수 있도록 설정유지
2-1번. 프로젝트를 Maven이 관리할수 있도록 설정변경(maven 설정하기): 프로젝트 우클릭 -> Configure -> Convert to Maven Project -> Finish





2-2번. pom.xml이 생성됨을 확인할 수 있음.


2-3번. pom.xml에 depenecy태그들 추가해서 라이브러리 설치/관리하기
pom.xml의 맨밑에 <dependencies></dependencies>를 기재
아래 사이트 -> spring 검색




context 클릭 -> 4.3.10 release클릭(사람들이 가장 많이 사용추정) -> 상세페이지의 <dependency>태그를 복사
core 클릭 -> 4.3.10 release클릭(사람들이 가장 많이 사용추정) -> 상세페이지의 <dependency>태그를 복사
아래 사진




복사한것을 pom.xml에 만들어둔 <dependencies></dependencies>에 붙여넣기
이클립스 tip 코드스크립트 자동정렬하기: 전체 선택 -> 콘트롤 시프트 f (ctrl + shift + f)

그러면, maven이 라이브러리를 dependency설정값에 따라 다운받게됨.(오래걸리므로 시간이 걸림)


2-4번.
네임스페이스 설정하기: context를 설정하면, 어노테이션(아래)것들을 자동으로 찾아서 컨테이너안에 담을 수 있음
@Component

그러한 것을 찾도록 하는 태그(아래)
<context:component-scan base-package="패키지명"></context:component-scan>태그를 쓸수 있음


위와 같이됬다면, 이제 모든 준비가 끝났음.



이제 컨테이너 생성하기
di02패키지작업장: xml로 빈활용해보기

결과



Car.java
package di02;
public class Car {
    //  다른객체를 사용하는 클래스, Tire에 의존한다.
    
    private Tire tire //  tire의 객체를 멤버변수로 가지고, 사용도 하고있음.
    //  생성자 의존성 주입을 위해서 생성자를 작성
    public Car(Tire tire) {
       this.tire = tire;
    }
    public void setTire(Tire tire) {
       this.tire = tire;
    }
    
    //  Car는 Tire에 의존함.
    public void drive() {
       tire.roll();
       System.out.println("자동차가 굴러갑니다.");
    }
}


인터페이스 Tire.java
package di02;
public interface Tire {
    public void roll();
}


ChinaTire.java
package di02;
public class ChinaTire implements Tire{
    @Override
    public void roll() {
       // TODO Auto-generated method stub
       System.out.println("중국 타이어!");
    }
}



KoreaTire.java
package di02;
public class KoreaTire implements Tire{
    @Override
    public void roll() {
       // TODO Auto-generated method stub
       System.out.println("한국 타이어!");
    }
}



Driver.java
package di02;
import org.springframework.context.ApplicationContext;
import org.springframework.context.support.GenericXmlApplicationContext;
public class Driver {
    public static void main(String[] args) {
       // TODO Auto-generated method stub
       /*
        * di01에서는 직접 자동차 객체도 만들었고
        * 타이어 객체도 직접 만들었지만
        * di02에서는 객체 생성 및 의존성 주입을
        * spring이 하도록 만들자.
        *
        * 객체를 bean이라는 이름으로 Spring container에
        * 가지고 있다가 필요할 때 마다 꺼내서 쓸수 있다.
        *
        * 스프링 컨테이너 객체
        * 1. 스프링컨테이너 객체생성
        * 2. 스프링컨테이너에서 생성한 bean 꺼내와서 사용하기
        */
       
       //  스프링 컨테이너 만들때, di02밑에 있는 applicationContext.xml을 참고해서 만들어라
       ApplicationContext context
        = new GenericXmlApplicationContext("di02/applicationContext.xml");
       
       //  bean태그의 id값 "myCar"를 getBean의 매개변수로 넣어주기
       //  object를 반환하므로, Car클래스로 형변환시켜주기
       Car myCar1 = (Car)context.getBean("myCar");
       
       // 아래처럼 형변환안하고, 매개변수로 클래스를 입력해도됨.
       Car myCar2 = context.getBean("myCar", Car.class);
       
       myCar1.drive();
       
       myCar2.drive();
    }
}



applicationContext.xml
<?xml version="1.0" encoding="UTF-8"?>
    <!-- beans 정의: bean을 담을수 있는 태그 -->
<!-- 선생님 설명
    스프링 프로젝트의 구성요소
    1. 스프링 컨테이너 설정파일
      - 스프링 컨테이너가 가져야할 객체(bean)의 정보
      - 각 객체간의 의존성 설정
    2. 스프링 컨테이너
    3. 컨테이너 사용부분
 -->
    <!-- bean 만들기
       class 안에는 full package명을 넣을 것
    -->
    <bean id="tire" class="di02.ChinaTire"></bean>
    <!--
    ex) 설정자(setter)로 의존성 주입예시
    <bean id="myCar" class="di02.Car">
       <property name="tire" ref="tire"></property>
    </bean>
     -->
    <!--  -->
    <bean id="myCar" class="di02.Car">
       <constructor-arg ref="tire"></constructor-arg>
    </bean>
    
    <!-- 사용법1. 설정자(setter)로 의존성 주입하기
       <property>이용
       property태그의 name속성에 setter의 이름에서 set제외하고, 맨앞글자를 소문자로 변경.
       ex) setTire() -> tire가 됨.
       name="tire"
       property태그의 ref속성에 주입하고자하는 객체(bean)의 id값을 넣기
       ref="tire"
    -->
    
    
    <!-- 사용법2. 생성자(constructor)로 의존성 주입하기
       <constructor-arg>이용
     -->
</beans>







di03패키지작업장(어노테이션으로 빈활용-설정자)
어노테이션으로 빈객체 만들기
빈으로 등록하고자하는 클래스로 이동해서 @Component를 붙이기
ex) Class Car 
@AutoWired를 클래스 Car 의 setTire(Tire tire)매소드(setter)위에 적기
applicationContext 생성, 설정


결과


Car.java
package di03;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.stereotype.Component;
//  bean 객체를 만들어야 하는 클래스임을 표시.
//  @Component("myCar") <-처럼 bean태그의 id속성 값을 지정할수도 있음.
@Component
public class Car {
    //  다른객체를 사용하는 클래스, Tire에 의존한다.
    
    //  Autowired 위치: 생성자 위, Setter 위, 변수 위
    @Autowired
    private Tire tire //  tire의 객체를 멤버변수로 가지고, 사용도 하고있음.
    //  생성자 의존성 주입을 위해서 생성자를 작성

    // 생성자 주입방법도 마찬가지로 Autowired하면됨.
    // qualifier()를 쓸수없음.
//  @Autowired
//  public Car(Tire tire) {
//     this.tire = tire;
//  }
    
    
    //Autowired : 타입매칭을 통해서 의존성 주입할 객체를 찾아옴
    //스프링컨테이너 안에서 적당한 객체(타입이 매칭되는 bean)를 가져와서 주입
    //그런데 매칭되는 타입이 2개 이상이다 >> 어떤 bean을 참조 해야할지 모르기때문에 에러 발생
    //같은 타입이 2개라면 이름을 정해주어야 한다. : Qualifier
    //@Autowired
    //@Qualifier("koreaTire")
    //public void setTire(Tire tire) {
    //  this.tire = tire;
    //}
    
    // applicationContext에 정의된 Tire 클래스 유형의 bean을 못찾게된다면,
    // Car클래스가 빈으로 생성안되게됨.
    // 이때,@Autowired(required = false)를 기재하게된다면=> 못찾으면(없으면) 그냥 무시하고 Car 만들어라라는 뜻임.
//    @Autowired(required = false)
//    public void setTire(Tire tire) {
//        this.tire = tire;
//    }
    
    //  Car는 Tire에 의존함.
    public void drive() {
       tire.roll();
       System.out.println("자동차가 굴러갑니다.");
    }
}



인터페이스 tire.java
package di03;
public interface Tire {
    public void roll();
}



ChinaTire.java
package di03;
public class ChinaTire implements Tire{
    @Override
    public void roll() {
       // TODO Auto-generated method stub
       System.out.println("중국 타이어!");
    }
}



KoreaTire.java
package di03;
import org.springframework.stereotype.Component;
@Component
public class KoreaTire implements Tire{
    @Override
    public void roll() {
       // TODO Auto-generated method stub
       System.out.println("한국 타이어!");
    }
}


driver.java
package di03;
import org.springframework.context.ApplicationContext;
import org.springframework.context.support.GenericXmlApplicationContext;
public class Driver {
    public static void main(String[] args) {
       // TODO Auto-generated method stub
       // @에노테이션을 이용한 bean 생성 및 의존성 주입
       
       // 1. 어떤 클래스를 이용해서 bean 객체를 만들겠다고 설정
       // 2. 어떤 패키지에서 bean객체를 만들겠다라고 설정 -> xml 작성
       // 3. 생성될 때 의존성에 대한 설정 -> annotation
       
       ApplicationContext context
        = new GenericXmlApplicationContext("di03/applicationContext.xml");
       //  Annotation으로 bean을 생성할때, 이름을 정해주지 않으면,
       // 클래스 이름 Car 첫글자를 소문자로 바꾼이름을 사용
       Car myCar = context.getBean("car", Car.class);
       
       myCar.drive();
    }
}


applicationContext.xml
<?xml version="1.0" encoding="UTF-8"?>
    
    <!-- @Component annotation이 있으면 bean 객체를 만들기. -->
    <!-- annotation 사용하시려면 namespace에서 context체크해놓기 -->
    <!-- <context:component-scan base-package="">생성하기-->
    <!-- base-package="di03" 패키지명 넣기 -->
    <context:component-scan base-package="di03"></context:component-scan>
</beans>












오후수업

오늘 목표&한것 재정리

java jdk설치
eclipse 다운
STS 설치
Maven 프로젝트 변경
라이브러리 다운로드 - mvnrepository.com

Spring 설정파일 생성: Spring bean configuration file(스프링 컨테이너 설정 메타 데이터 만들기)

  1. bean 생성하기 -xml, annotation
  2. bean 의존성 주입, xml, annotation
  3. bean의 대표적인 속성값 이용해보고 확인하기



개념설명다시





이러한 느슨한 결합을 통해서 비슷한 유형을 찾아서 출력해주기도 함.(설정도 가능)



















실습

java jdbc이용해서 실습해보기(사실 안쓰는거지만.... 복습을 위해서)
mysql설치: default로 설정하기(), next, excute눌러주기, repair, install, close등을 계속 눌르기
















시작 -> 검색 -> "mysql" 후, MySQL 5.6 Command Line Client 실행
root 암호 치기
정상적으로 설치되었다면, 아래처럼 나옮.
show databases;를 쳐서 기능작동 확인




create database spring;
use spring;
spring database 만들고 사용선언





나중에 사용할건 아니지만, 테스트용으로 테이블 생성하기
create table user( id varchar(20), name varchar(20), pass varchar(20) );
만든다음 만들어졌는지 user의 스키마 구조 확인
desc user;




자료를 한개 넣어주자



실습을 위해, Java jdbc만들어서 예전방식의 db연동을 설정해보기
UserDao 클래스 만들기


실습전 잠깐 상식(아래)






maven에 mysql 연동하기





사람들이 많이 사용하는 5.1.38의 dependency 복사해서 pom.xml에 추가





아래 xml부분을 pom.xml의 depenecy태그 추가

<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>5.1.38</version>
</dependency>

    <modelVersion>4.0.0</modelVersion>
    <groupId>Day01_Dependency_Injection</groupId>
    <artifactId>Day01_Dependency_Injection</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <build>
        <sourceDirectory>src</sourceDirectory>
       <resources>
           <resource>
               <directory>src</directory>
               <excludes>
                   <exclude>**/*.java</exclude>
               </excludes>
           </resource>
       </resources>
       <plugins>
           <plugin>
               <artifactId>maven-compiler-plugin</artifactId>
               <version>3.7.0</version>
               <configuration>
                  <source>1.8</source>
                  <target>1.8</target>
               </configuration>
           </plugin>
       </plugins>
    </build>
    <dependencies>
       <dependency>
           <groupId>org.springframework</groupId>
           <artifactId>spring-core</artifactId>
           <version>4.3.10.RELEASE</version>
       </dependency>
       <dependency>
           <groupId>org.springframework</groupId>
           <artifactId>spring-context</artifactId>
           <version>4.3.10.RELEASE</version>
       </dependency>
       
       <dependency>
           <groupId>mysql</groupId>
           <artifactId>mysql-connector-java</artifactId>
           <version>5.1.38</version>
       </dependency>
    </dependencies>
</project>



lifecycle 패키지 작업방:

DAO에 연결을 해주는 멤버변수를 가지게 하기위해서 클래스를 따로 하나 만들어주자.


Interface ConnectionProvider
package lifecycle;
import java.sql.Connection;
import java.sql.SQLException;
public interface ConnectionProvider {
    public Connection getConnection() throws ClassNotFoundException, SQLException;
}





위 ConnectionProvider를 인터페이스 상속받는 ConnectorA, ConnectorB를 만들기
왜? 만약에 오라클db, mysql들에서 자료를 가져오게 설정해두면, 쉽게 db연결부분을 조정할수 잇음

connectorA.java
package lifecycle;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
public class ConnectorA implements ConnectionProvider{
    @Override
    public Connection getConnection() throws ClassNotFoundException, SQLException {
       // TODO Auto-generated method stub
       
       //  만들어둔 database이름: spring
       String url = "jdbc:mysql://localhost:3306/spring";
       String user = "root";
       String pwd = "admin";
           
        Class.forName("com.mysql.jdbc.Driver");
       System.out.println("드라이버 로딩성공!!");
           
       // DriverManager.getConnection(url, user,pwd);를 사용해야함.
       // Connection 객체를 만들고, 위 getConnection을 담아주기
       // 이게 성공하면, 이제 DB에 연결할 수 있음
       Connection conn = DriverManager.getConnection(url, user,pwd);
       
       return conn;
    }
}



ConnectorB.java
package lifecycle;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
public class ConnectorB implements ConnectionProvider {
    @Override
    public Connection getConnection() throws ClassNotFoundException, SQLException {
       // TODO Auto-generated method stub
       
       //  만들어둔 database이름: spring
       String url = "jdbc:mysql://localhost:3306/spring";
       String user = "root";
       String pwd = "admin";
           
        Class.forName("com.mysql.jdbc.Driver");
       System.out.println("드라이버 로딩성공!!");
           
       // DriverManager.getConnection(url, user,pwd);를 사용해야함.
       // Connection 객체를 만들고, 위 getConnection을 담아주기
       // 이게 성공하면, 이제 DB에 연결할 수 있음
       Connection conn = DriverManager.getConnection(url, user,pwd);
       
       return conn;
    }
}


ConnectionTest.java
package lifecycle;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
public class ConnectionTest {
    public static void main(String[] args) throws ClassNotFoundException, SQLException {
       //드라이버 로딩
       //연결(url, user, password): DriverManager라는 클래스가 가지고 있는 getConnection()을 이용할 예정
       
       //  만들어둔 database이름: spring
       String url = "jdbc:mysql://localhost:3306/spring";
       String user = "root";
       String pwd = "admin";
       
        Class.forName("com.mysql.jdbc.Driver");
       System.out.println("드라이버 로딩성공!!");
       
       // DriverManager.getConnection(url, user,pwd);를 사용해야함.
       // Connection 객체를 만들고, 위 getConnection을 담아주기
       // 이게 성공하면, 이제 DB에 연결할 수 있음
       Connection conn = DriverManager.getConnection(url, user,pwd);
       
       
    }
}


UserDAo.java
package lifecycle;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import vo.User;
public class UserDao {
    // DAO: Data Access Object:
    // 데이터 베이스에 있는 데이터를 조회하거나 변경, 삽입, 삭제하는 기능
    // 드라이버로딩
    // 연결
    // 구문객체생성
    // SQL
    // 실행
    
    ConnectionProvider conProvider;
    // 내가 필요할때마다 연결을 얻어오면 됨.
    
    public void setConnectionProvider(ConnectionProvider conProvider) {
       this.conProvider = conProvider;
    }
    
    //  굳이 init과 destroy라고 매소드명을 적을 필요는 없지만, 테스트를 위해 아래와 같이 만들기
    //  applicationContext.xml의 UserDao 빈파일의 속성을 설정해주기
    public void init() {
        System.out.println("UserDao 사용준비 완료");
    }
    public void destroy() {
        System.out.println("UserDao 소멸");
    }
    
    
    public User selectOne(String id) {
       User user = null;
       String sql = "select * from user where id= ?";
       // PreparedStatement: Statement가 너무 불편해서, 조금 개선해서 만든 구문객체
       // 변수값을 쉽게 만들수 있음.
       
       // 선언은 밖에해야지 나중에 close할수 있음
       Connection conn = null;
       PreparedStatement pstmt = null;
       ResultSet rs = null;
       
       try {
           conn = conProvider.getConnection();
           pstmt = conn.prepareStatement(sql);
           
           pstmt.setString(1, id);
           
           pstmt.executeQuery();
           
           // execute, executeQuery, executeUpdate
           // execute: DDL db의 설정값 변경시 주로 사용. select도 실행이 되긴함.
           // executeQuery: select
           // executeUpdate: update, delete, insert
           
           rs = pstmt.executeQuery();
           
           if(rs.next()) {
               
               user = new User();
               //  결과셋에 있는 문자열 가지고 와라
               user.setId( rs.getString(1) );
               //  user.setId( rs.getString("id") );  db 테이블의 속성명(컬럼명)으로도 가능
               user.setName( rs.getString(2) );
               user.setPass( rs.getString(3) );
               
           }
           
           
           
       } catch (ClassNotFoundException | SQLException e) {
           // TODO Auto-generated catch block
           e.printStackTrace();
       }
       
       
       return user;
       
    }
}




UserDAoTest.java
package lifecycle;
import org.springframework.context.ApplicationContext;
import org.springframework.context.support.AbstractApplicationContext;
import org.springframework.context.support.GenericXmlApplicationContext;
import vo.User;
public class UserDaoTest {
    public static void main(String[] args) {
       // TODO Auto-generated method stub
       // 스프링 컨테이너 생성
       ApplicationContext context
        = new GenericXmlApplicationContext("lifecycle/applicationContext.xml");
       
       UserDao dao = context.getBean("userDao", UserDao.class);
       UserDao dao1 = context.getBean("userDao", UserDao.class);
       
       User user = dao.selectOne("id1");
       System.out.println(user);
       
       //  destroy()매소드에 있는 System.out.println("UserDao 소멸"); 출력하기위해 한건데, 안됨.ㅡㅡ
       // ( (AbstractApplicationContext)context ).close();
       
       // scope: prototype: getBean() 될때마다 새롭게 만들어냄.
       // scope: singleton: getBean() 될때 계속 같은 객체를 반환
       
       System.out.println(dao);
       System.out.println(dao1);
    }
}


applicationContext.xml
<?xml version="1.0" encoding="UTF-8"?>
    <bean id="userDao" class="lifecycle.UserDao" init-method="init" destroy-method="destroy" scope="singleton">
       <property name="connectionProvider" ref ="cp"></property>
    </bean>
    <bean id="cp" class="lifecycle.ConnectorA"></bean>
</beans>


User.java
package vo;
public class User {
    // table user에 데이터를 넣고 빼기위한 모델 클래스
    // 모델클래스 아래의 의미를 가지고, 통상 vo, dto라고 불림
    // VO:Value Object, DTO:Data Transfer Object
    
    private String id;
    private String name;
    private String pass;
    public User() {
       super();
    }
    public User(String id, String name, String pass) {
       super();
       this.id = id;
       this.name = name;
       this.pass = pass;
    }
    
    public String getId() {
       return id;
    }
    public void setId(String id) {
       this.id = id;
    }
    public String getName() {
       return name;
    }
    public void setName(String name) {
       this.name = name;
    }
    public String getPass() {
       return pass;
    }
    public void setPass(String pass) {
       this.pass = pass;
    }
    
    // 객체에 멤버변수를 쉽게 출력하기위한 메서드 오버라이딩
    @Override
    public String toString() {
       return "User [id=" + id + ", name=" + name + ", pass=" + pass + "]";
    }
}

성공결과









아래 추가 설명부분

scope: prototype일때, 객체생성시 다른것을 생성함.

<?xml version="1.0" encoding="UTF-8"?>
    <bean id="userDao" class="lifecycle.UserDao" init-method="init" destroy-method="destroy" scope="prototype">
       <property name="connectionProvider" ref ="cp"></property>
    </bean>
    <bean id="cp" class="lifecycle.ConnectorA"></bean>
</beans>


package lifecycle;
import org.springframework.context.ApplicationContext;
import org.springframework.context.support.AbstractApplicationContext;
import org.springframework.context.support.GenericXmlApplicationContext;
import vo.User;
public class UserDaoTest {
    public static void main(String[] args) {
       // TODO Auto-generated method stub
       // 스프링 컨테이너 생성
       ApplicationContext context
        = new GenericXmlApplicationContext("lifecycle/applicationContext.xml");
       
       UserDao dao = context.getBean("userDao", UserDao.class);
       UserDao dao1 = context.getBean("userDao", UserDao.class);
       
       User user = dao.selectOne("id1");
       System.out.println(user);
       
       //  destroy()매소드에 있는 System.out.println("UserDao 소멸"); 출력하기위해 한건데, 안됨.ㅡㅡ
       // ( (AbstractApplicationContext)context ).close();
       
       // scope: prototype: getBean() 될때마다 새롭게 만들어냄.
       // scope: singleton: getBean() 될때 계속 같은 객체를 반환
       
       System.out.println(dao);
       System.out.println(dao1);
    }
}




scope:singleton일때, 객체생싱마다 같은 객체를 반환



<?xml version="1.0" encoding="UTF-8"?>
    <bean id="userDao" class="lifecycle.UserDao" init-method="init" destroy-method="destroy" scope="singleton">
       <property name="connectionProvider" ref ="cp"></property>
    </bean>
    <bean id="cp" class="lifecycle.ConnectorA"></bean>
</beans>


package lifecycle;
import org.springframework.context.ApplicationContext;
import org.springframework.context.support.AbstractApplicationContext;
import org.springframework.context.support.GenericXmlApplicationContext;
import vo.User;
public class UserDaoTest {
    public static void main(String[] args) {
       // TODO Auto-generated method stub
       // 스프링 컨테이너 생성
       ApplicationContext context
        = new GenericXmlApplicationContext("lifecycle/applicationContext.xml");
       
       UserDao dao = context.getBean("userDao", UserDao.class);
       UserDao dao1 = context.getBean("userDao", UserDao.class);
       
       User user = dao.selectOne("id1");
       System.out.println(user);
       
       //  destroy()매소드에 있는 System.out.println("UserDao 소멸"); 출력하기위해 한건데, 안됨.ㅡㅡ
       // ( (AbstractApplicationContext)context ).close();
       
       // scope: prototype: getBean() 될때마다 새롭게 만들어냄.
       // scope: singleton: getBean() 될때 계속 같은 객체를 반환
       
       System.out.println(dao);
       System.out.println(dao1);
    }
}

















홈서버용 조립PC 만들기1_조립순서, 간단이해



조립순서
메인보드 -> cpu 삽입 -> cpu 쿨러 결합(열그리스를 조금 발라주기) -> RAM메모리카드 삽입 -> 그래픽카드 삽입 -> IO쉴드를 케이스에 끼우기 -> 메인보드 조립하기 -> ssd 메인보등 연결/케이스에 고정 -> hdd 메인보드 연결/케이스에 고정 -> 파워 서플라이 연결/케이스에 고정 -> CMOS 셋업




핵심부품목록


CPU
사람머리의 생각하는 역할(연산)


CPU 쿨러
CPU의 열을 식혀주는 장치


메인보드
사람의 몸(머리, 팔, 다리가 붙어있으며, 연결해주는 곳)
각 부품들과 호환성과 안전성을 따져야함.


RAM
사람의 일시적인 기억을 저장하는 역할
CPU 명령을 처리하는 역할로 RAM 용량이 크면 속도 빨라짐


그래픽카드(GPU 또는 VGA로 불림)
사람의 시신경같은 부분
모니터 화면 출력하는 일을 함.


HDD(하드디스크)
사람의 장기적인 기억을 저장하는 역할(느림)
가격이 저렴하지만 속도가 느림


SSD
사람의 장기적인 기억을 저장하는 역할(빠름)
가격이 비싸지만 속도가 빠름.


케이스
사람의 골격, 피부(외형)


파워 서플라이
사람의 에너지 공급역할.
부품을 많이 달릴수록 높은 전력의 파워 서플라이를 사용해야함.
높은 전력의 파워 서플라이는 전기세가 많이 나감


그 밖에 ODD, 모니터, 키보드와 마우스 




티스토리 블로그 운영 총망라1 (A to Z)_무단 스크랩 마우스 오른쪽클릭 복사 방지(플러그인/javascript)


티스토리 회원가입은 운영진 또는 기존 블로거의 초대장을 받아야지만 운영이 가능하다.
핸드폰에 티스토리 어플을 설치하고, 회원가입하는 방법도 있다.

여기서는 회원가입은 완료되었다는 전제하에 진행하겠다.



일단 마우스 오른쪽 클릭 복사가 뭐냐면..
블로그 글을 선택 복사 후 메모장에 붙여넣기하면 자료가 복사가 된다는 것이다.
그리고, 이것을 출처를 밝히지 않고 자신의 창작물(?)로 활용하신다는 것....




무단으로 복사해서 출처도 밝히지 않고 스크랩하시는 분이 없었으면 좋겠다.
하지만, 그렇지 않다는 거....
그리고 햐~ 그걸 막는 방법을 또 연구해야한다는 거...







각설하고...
2가지 방법이 있다.
첫번째 플러그인 사용
단점: 플러그인 설치를 해도, 일부 브라우저에서는 플러그인 효과가 없다.
즉, 마우스 오른쪽 복사/붙여넣기가 가능하다.

그래도, 일단 플러그인을 적용해두자.

블로그 관리화면으로 이동
플러그인 버튼 클릭






마우스 오른쪽 클릭 방지 클릭






적용 클릭






두번째 방법
스크립트를 추가해서 하는 방법으로 마우스 오른쪽 복사 자체가 안된다.

스킨편집을 눌러준다.





html편집을 클릭해준다.




<head></head>안에 아래 스크립트를 추가해준다.
<!--복사방지 스크립트 시작-->
<script type="text/javascript">
var omitformtags=["input", "textarea", "select"]
omitformtags=omitformtags.join("|")
    
function disableselect(e){
    if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)
        return false
}

function reEnable(){
    return true
}

if (typeof document.onselectstart!="undefined")
    document.onselectstart=new Function ("return false")
else{
    document.onmousedown=disableselect
    document.onmouseup=reEnable
}
</script>    
<!--복사방지 스크립트 끝-->





기존 <body>의 속성에 아래 부분을 추가해준다.
oncontextmenu="return false" onselectstart="return false" ondragstart="return false">




화면 우측 상단에 저장클릭해준다.




이제 블로그 글위에 마우스를 가져다되면, 마우스 오른쪽 버튼을 클릭할수 없게된다.


읽고 도움이되셨다면, 좋아요 부탁드립니다.









모달윈도우 modal window-태그자동생성
핵심 point
특정 class에 css를 짜둔다.
특정태그를 변수에 담아서 생성하고, append, html 등으로 붙여서 화면에 뛰운다.


클릭전 화면






클릭후 화면





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
      <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <meta http-equiv="Content-Style-Type" content="text/css" />
            <meta http-equiv="Content-Script-Type" content="text/javascript" />
            <title>modalWindow</title>
            <script type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="../libs/jquery.easing.1.3.js"></script>
       
        <style type="text/css">
html,body{
      margin:0;
      padding:0;
      height:100%;
}
h1{
      margin:20px 50px;
      font-size:large;
      border-left:10px solid #7BAEB5;
      border-bottom:1px solid #7BAEB5;
      padding:10px;
      width:600px;
}
ul{
      width:700px;
}
ul li{
      float:left;
      list-style-type:none;
}
ul li img{
      border:0;
      margin:10px;
}
div#glayLayer{
      display:none;
      position:fixed;
      left:0;
      top:0;
      height:100%;
      width:100%;
      background:black;
      opacity:0;
}
* html div#glayLayer{
      position:absolute;
}
#overLayer{
      display:none;
      position: fixed;
      top:50%;
      left:50%;
      margin-top:-244px;
      margin-left:-325px;
}
* html #overLayer{
      position: absolute;
}
</style>       
<script type="text/javascript">
      $(document).ready(function(e) {
            
            $("<div id='glayLayer'></div><div id='overLayer'></div>").appendTo($("body"))
            // body 마지막에 배경을 가려주는 glayLayer 와 이미지를 보여주는 overLayer 를 생성  ( 배경색이나 각속성은 CSS스타일에서 미리적용 )
            // 미리코드에 넣어두는것보다는 스크립트로 생성 ( 웹접근성 준수 )
            
            $("a.modal").bind("click", onClick); // 섬네일이미지 ( 클래스이름 .modal) 를 클릭하면 onClick 함수실행
            $("#overLayer").bind("click", onRemove);
            // 큰이미지를 보여주는 overLayer 를 다시클릭하면 사라지게 해주는 onRemove 함수실행             
            
    });     
      
      function onClick(){
            $("#glayLayer").show(); // glayLayer를 보여지게해서 배경을 흐리게한다.
            $("#glayLayer").animate({opacity:0.9},300,"easeOutCubic");
            $("#overLayer").show(); // 큰이미지를 보여주는 overLayer 도 보여준다.
            $("#overLayer").html("<img src="+$(this).attr("href")+">")
            // 보여준 overLayer에 클릭한 a테그의 경로를 얻어와서 해당되는 큰이미지를 넣어준다.     
            return false;      // a링크가 적용안되도록
      }
      function onRemove(){
            $("#overLayer").hide(); // 기존 overLayer 를 사라지게 해준다.
            $("#glayLayer").animate({opacity:0},300,"easeOutCubic", function(){
                  $("#glayLayer").hide(); // 기존 glayLayer의 투명도를 0으로 에니메이션 해주고 끝나면 사라지게 한다.
                  // 주의) 사라지게 하지않으면 다시 섬네일이미지가 클릭적용이 안된다 .( glayLayer 가 가려서 )
            })
            
      }
      
      
      
      
</script>
      </head>
      <body>            
            <ul>
                  <li><a href="images/photo1.jpg" class="modal"><img src="images/photo1_thum.jpg" alt=""  /></a></li>
                  <li><a href="images/photo2.jpg" class="modal"><img src="images/photo2_thum.jpg" alt="" /></a></li>
                  <li><a href="images/photo3.jpg" class="modal"><img src="images/photo3_thum.jpg" alt="" /></a></li>
                  <li><a href="images/photo4.jpg" class="modal"><img src="images/photo4_thum.jpg" alt="" /></a></li>
                  <li><a href="images/photo5.jpg" class="modal"><img src="images/photo5_thum.jpg" alt="" /></a></li>
                  <li><a href="images/photo6.jpg" class="modal"><img src="images/photo6_thum.jpg" alt="" /></a></li>
                  <li><a href="images/photo7.jpg" class="modal"><img src="images/photo7_thum.jpg" alt="" /></a></li>
                  <li><a href="images/photo8.jpg" class="modal"><img src="images/photo8_thum.jpg" alt="" /></a></li>
            </ul>
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
      </body>
</html>







toolTip 설명화면-function(e), setTimeout, clearTimeout

핵심 point
마우스를 특정 링크 위에 갖다되면, tooltip(설명화면)이 마우스 옆에 나타난다.
시간이 지나면 자동으로 사라진다.

핵심 기술
function(e){
    e.pageX  //  이렇게 쓰이며, 이벤트가 발생한 x 좌표를 나타냄
    e.pageY  //  이렇게 쓰이며, 이벤트가 발생한 y 좌표를 나타냄
}

setTimeout  :  몇초동안 이벤트가 지속됨

clearTimeout  :  Timeout setting한것을 제거해줌


최초화면




마우스 올린 화면





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
      <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <meta http-equiv="Content-Style-Type" content="text/css" />
            <meta http-equiv="Content-Script-Type" content="text/javascript" />
            <title>tooltip</title>
            <script type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="../libs/jquery.easing.1.3.js"></script>
            <script type="text/javascript">
                  
                  var $sample;
                  var $tooltip;
                  var timer;
                  
                  $(document).ready(function(e) {
                        
                        $sample=$("#sample");
                        $tooltip=$("div.tooltip");
                        $tooltip.css({opacity:0, display:"none"})// 툴팁박스의 초기값을 안보이게 설정           
                        
                        $sample.bind("mouseenter",onOver);
                        $sample.bind("mousemove",onMove);
                        $sample.bind("mouseleave",onOut);                                 
              
            });
            
                  function onOver(e){
                        //alert(e.pageX) // 마우스의X좌표를 출력해본다.
                        $tooltip.show(); // 툴팁을 보여주게
                        $tooltip.css({left:e.pageX+10, top:e.pageY+10}); // 툴팁의좌표를 마우스의 좌표의 10간격을 두고 지정       
                        // 중요) e.pageX : 페이지에서(body)부터의 마우스 x좌표
                        // 주의) 함수에서 e (이벤트를 반드시 붙여야 e.pageX,  e.pageY 를 인식 )
                        $tooltip.stop();
                        $tooltip.animate({opacity:0.8},500,"easeOutCubic"); // 툴팁의 투명도를 0.8 로 에니메이션
                        timer=setTimeout(onOut,3000); // 중요) setTimerout() 함수 : 일정한시간후에 함수를 실행   
                  }
                  function onMove(e){
                        $tooltip.css({left:e.pageX+10, top:e.pageY+10});      
                        // 마우스를 움직일때도 툴팁의좌표를 마우스의 좌표의 10간격을 두고 따라다니게 지정  
                  }
                  function onOut(){
                        clearTimeout(timer); // 진행되고있는 setTimeout을 멈춘다.
                        $tooltip.stop();
                        $tooltip.animate({opacity:0},500,"easeOutCubic", function(){
                              $tooltip.hide();                          
                        });
                        // 마우스가 아웃되면 툴팁의 투명도를 0 으로에니메니션 주고 사라지게함
                  }
                  
                  
                  
            </script>
            <style type="text/css">
body{
      background:#777;
      color:white;
}
a{
      color:#00CCFF; display:block; float:left; margin-right:5px;
}
h1{
      width:80%;
      margin:10px auto;
}
p{
      margin:10px 10%; text-align:justify;
}
div.tooltip{
      position:absolute;
      line-height:1.5;
      color:white;
      width:200px;
      background:#FF9900;
      border:2px solid white;
      padding:1em;
      font-size:small;
      
}
            </style>
      </head>
      <body>
            <h1>tooltip sample</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed quam ac risus auctor pulvinar. Nullam tellus lorem, volutpat sit amet eleifend quis, semper pellentesque nunc. Aliquam eu tortor nec nisl suscipit vehicula et eu sapien. Maecenas at pretium diam. Proin non luctus diam. Pellentesque risus nisi, scelerisque eu ultricies quis, <a href="#" id="sample">tooltip sample</a> luctus rhoncus dui. Proin pharetra aliquet justo, vel scelerisque lorem scelerisque eget. Praesent pharetra magna sit amet diam sagittis ac dictum nunc imperdiet. Pellentesque posuere vulputate fermentum. Vivamus fringilla commodo elit, in ornare libero imperdiet sed.</p>
            <p>Proin adipiscing faucibus felis eget auctor. Duis sed ante turpis. Cras sit amet euismod est. Vivamus tempus nibh sed odio pulvinar nec varius leo dignissim. Morbi nunc dui, rutrum vitae porttitor quis, semper in augue. Maecenas feugiat neque sit amet nisl euismod in imperdiet lorem iaculis. Suspendisse a convallis augue. Fusce faucibus sollicitudin dui, lobortis semper lacus elementum et. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis ullamcorper ipsum sit amet libero aliquet feugiat. Nulla facilisi. Cras tincidunt convallis felis, sed vulputate lorem blandit eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque tortor leo, dapibus et vulputate in, laoreet sit amet odio. Nulla facilisi. Maecenas sit amet purus eu magna pellentesque sodales. In in velit sit amet sapien pharetra placerat non quis ante. Curabitur nisl tellus, aliquet quis facilisis non, congue eu lectus. Aenean lacinia, magna ut mattis aliquet, nisl augue posuere massa, ac bibendum nisi quam eu est.</p>
            <p>Morbi faucibus condimentum dolor sed tristique. Suspendisse vel diam at purus sagittis pretium. Nulla dapibus arcu metus. Sed vulputate adipiscing dapibus. Nullam interdum turpis vitae massa venenatis pulvinar. Nulla commodo convallis augue ullamcorper facilisis. Nullam viverra sollicitudin mauris eget euismod. Suspendisse nec orci felis, non viverra quam. Nunc blandit neque arcu. Aenean dignissim auctor tortor, non hendrerit nisi semper sit amet. Donec vel quam sed arcu dignissim tempus. Sed lacus erat, cursus dapibus porta non, suscipit in odio. Morbi consequat condimentum lorem, dignissim interdum dui condimentum ac. Integer eros diam, lobortis in molestie vitae, ullamcorper eget enim. Pellentesque vel velit odio, non tincidunt turpis. Ut suscipit convallis odio, rhoncus vehicula dolor dignissim in. Phasellus consequat, turpis ut imperdiet tempus, turpis neque bibendum risus, non tempor nisl eros a risus. Aenean mi libero, placerat sed suscipit ut, tincidunt a mi.</p>
       
        <div class="tooltip">이것은ASCII.jp<br /><strong>Web제작현장에서 사용한 jQuery<br />UI디자인 입문</strong><br />의 샘플 프로그램입니다.</div>
      </body>
</html>





드래그 팝업 dragPopup - mousedown, mouseup, mousemove


요즘은 팝업창을 div로 해서 많이 구현함.
drag해서 팝업창이 이동하고 종료버튼 누르면 사라지게 하기





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
      <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <meta http-equiv="Content-Style-Type" content="text/css" />
            <meta http-equiv="Content-Script-Type" content="text/javascript" />
            <title>dragPopup</title>
            <script type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="../libs/jquery.easing.1.3.js"></script>       
            <script type="text/javascript">
                  
                  var $popup;
                  var $dragBar;
                  var downX;
                  var downY;
                  
                  $(document).ready(function(e) {
               
                        $popup=$("#floatWindow");
                        $dragBar=$("#floatWindow dt");
                        
                        $popup.css("opacity", 0);
                        $popup.hide();    
                        
                        $(".open").bind("click", onShow);
                        $(".close").bind("click", onHide);                    
                        
                        $dragBar.bind("mousedown", onDown);
                        $(document).bind("mouseup", onStop);            
                        
            });
                  
                  function onShow(){
                        
                        $popup.show();
                        $popup.animate({"opacity":1}, 300, "easeOutCubic");              
                        
                  }
                  
                  function onHide(){                        
                        
                        $popup.animate({"opacity":0}, 300, "easeOutCubic",function(){
                              
                              $(this).hide();
                              
                        });
                        
                  }
                  
                  function onDown(e){
                        
                        downX=e.pageX-$popup.position().left
                        downY=e.pageY-$popup.position().top
                        
                        //  누른다음에 이동해야되므로, 이벤트를 onDown()임의 함수 내에 걸어둚.
                        $(document).bind("mousemove", onMove);
                        
                  }
                  
                  function onMove(e){
                        
                        //  마우스가 이동한 좌표에 최초 마우스가 클릭된 지점의 값을 빼주어야지, 최초클릭된 부분의 좌표가 그대로 반영되어 이동됨.
                        $popup.css({"left":e.pageX-downX, "top":e.pageY-downY})
                                                
                  }
                  
                  function onStop(){
                        
                        $(document).unbind("mousemove", onMove);
                        
                  }
                  
            </script>
            <style type="text/css">
#floatWindow{
      
      position:absolute;
      width:500px;
      height:400px;
      top:100px;
      left:100px;
      
}
#floatWindow a.close{
      position:absolute;
      right:20px;
      top:1px;
}
#floatWindow a.close img{
      border:none;
}
#floatWindow dl{
      width:100%;
      height:100%;
      background:url("./images/floatWindow.png");
      margin:0;
}
#floatWindow dl dt{
      height:25px;
      line-height:25px;
      text-indent:1em;
      color:white;
      font-weight:bold;
      cursor:move;
}
#floatWindow dl dd{
      margin:0;
      padding:2em;
      line-height:1.5;
      text-indent:1em;
}
            </style>
      </head>
      <body>
            
            <a class="open">플로우팅 윈도우 표시</a>
            
            <div id="floatWindow">
                  <a class="close"><img src="./images/close.png" alt="닫힘" /></a>
                  <dl>
                        <dt>jQuery를 이용하여 플로우팅 윈도우 만들기</dt>
                        <dd>이번에는 jQuery를 이용하여 플로우팅 윈도우..(중략)...윈도우를 표시할 수 있습니다.</dd>
                  </dl>
            </div>
      </body>
</html>




슬라이드퀵메뉴 slideQuickMenu - scroll, resize, scrollTop

스크롤하면, 슬라이드효과로 퀵메뉴가 화면의 특정 좌표에 계속 붙어 있음









<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>slideQuickMenu</title>
<div id="quick_menu" style="position:absolute; width:75px; height:235px;">
    <img src="images/quick.gif" alt="" />
</div>
<script type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../libs/jquery.easing.1.3.js"></script>
<script type="text/javascript">
      
      var $quickMenu;
      var topPosition=300;
      var leftPosition=100;
      
      $(document).ready(function(e) {
       
            $quickMenu=$("#quick_menu");
            
            $quickMenu.css({"left":$(document).innerWidth()/2+leftPosition, "top":topPosition});
            
            $(window).bind("scroll", onScroll);
            $(window).bind("resize", onResize);
            
            
    });
      
      function onScroll(){
            
            $quickMenu.stop();
            $quickMenu.animate({"top":$(document).scrollTop()+topPosition}, 1000, "easeOutCubic");
            
            
      }
      
      function onResize(){
            
            $quickMenu.css({"left":$(document).innerWidth()/2+leftPosition, "top":topPosition});
            
      }
      
      
            
 </script>
</head>
<body>
<div id="wrap" style="width:70%;">
<br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</body>
</html>







Dot도트 모양의 슬라이드 반응형 - border-radius




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>슬라이드이미지 _버튼</title>
<script type="text/javascript" src="../../libs/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../../libs/jquery.easing.1.3.js"></script>
<style type="text/css">
html,body{
      height:100%;
}
body,p,ul,li{
      margin:0px; padding:0px; list-style:none;
}
body{
      background:url(../images/index_back.gif);
}
div#slide_wrap{
      width:100%; height:80%;  background:#CCC; margin-top:100px; 
}
div#slide_center{
      width:80%; height:100%; margin:0px auto; position:relative; left:0px; top:0px;
      overflow:hidden;
      
}
ul#img_list{
      position:absolute; left:0px; top:0px;
}
ul#img_list li{
      float:left;
}
ul#img_list li img{
      display:block;
}
ul#dot_list{
      position:absolute; left:50%; bottom:3%;
}
ul#dot_list li{
      width:30px; height:30px; float:left; margin-right:10px; border-radius:15px; background:#FFF;
}
</style>
<script type="text/javascript">
      var $slideWrap;
      var $slideCenter;
      var $imgList;
      var $images;
      var $dotList;
      var $dot //  도트
      var imgWidth //  이미지의 너비
      var imgNum //  이미지의 총개수
      var overNum = 0 //  선택된 도트의 번호
      var myInterval;
      var intervalPlay = false //  false일때 자동넘김 멈춤  true일때 자동넘김 시작
            
      //  반응형이기때문에, $(document).ready 가 아니라
      //  $(window).load 임
      $(window).load(function(){
            
            $slideWrap = $("#slide_wrap");
            $slideCenter = $("#slide_center");
            $imgList = $("#img_list");
            $images = $("#img_list img");
            $dotList = $("#dot_list");
            $dot = $("#dot_list li");
            imgNum = $images.size();
            
            //  alert(imgNum);
            
            imgReset();
            
            //  첫번째 보여지는 이미지 클릭된 것처럼 보여지기 위해서 background-color을 빨간색으로 나타내기
            showDot(0);
            
            //  도트 슬라이드 작동원리
            //  선택된 도트의 개수만큼 이미지list의 left 좌표가 너비*개수 만큼 이동해야함
            $dot.bind("click", onOver);
            
            myInterval = setInterval(onPlay, 1000);
            
            $slideWrap.bind("mouseleave", onInterval);
            
      });
      
      //  반응형: 화면 사이즈가 변할때마다 작동함
      $(window).resize(function(){
            
            imgReset();
            
            //  리사이징 할때도, 선택된 dot에 따라 영향을 받아 left 값이 바뀌어야함
            $imgList.css("left", -imgWidth*overNum);
            
      });
      
      //  선택된 dot의 색은 빨간색으로 그이외의 dot는 흰색으로 나타내게 하기
      function showDot(newMenu){
            
            //  전 dot의 색을 흰색으로 바꾸기
            $dot.css("background-color", "white");
            //  선택된 dot만 빨간색으로 보이기
            $dot.eq(newMenu).css("background-color", "red");
            
      }
      
      //  리사이즈 할때마다 반응형처럼 보여주기 위한 초기 세팅작업들
      function imgReset(){
            
            imgWidth = $slideCenter.innerWidth();
            //  alert(imgWidth);
            
            //  모든 이미지들의 너비를 slideCenter의 innerWidth로 통일
            $images.css("width", imgWidth);
            
            //  슬라이드랩의 높이를 이미지들의 높이와 같게 하기
            $slideWrap.css("height", $images.innerHeight());
            
            //  dot tip!
            //  dot모양을 표현해주기 위해서, 이미지의 40분의 1로 나타내는 걸로 상정하기
            //  border-radius는 dot의 절반 크기로 주어야만 동그라미 모양이 됨
            $dot.css({"width": (imgWidth/40), "height": (imgWidth/40), "border-radius": (imgWidth/40)/2});
            
            //  imgList의 크기를 이미지 너비 * 이미지의 개수 만큼 넓혀주기
            $imgList.css("width", imgWidth * imgNum);
      }
      
      //  도트가 선택되면 작동할 이벤트 정의함수
      function onOver(){
                  
            overNum = $dot.index($(this));
            //alert(overNum);
            
            //  슬라이드가 자연스럽게 넘어가는 이벤트
            onSlide(overNum);
            
            //  interval 작동멈추게 하기
            clearInterval(myInterval);
            intervalPlay = true;
      };
      
      //  슬라이드되는 효과이벤트를 정의하는 함수
      function onSlide(newNum){
            
            $imgList.animate({"left": - imgWidth*newNum}, 500, "easeOutExpo");
            
            //  도트도 선택된게 빨간색으로 바뀌게 해야함
            showDot(newNum);
      }
      
      function onPlay(){
            
            overNum = overNum + 1;
            
            if(overNum >= imgNum){
                  
                  overNum = 0;
            }
            
            onSlide(overNum);
      }
      function onInterval(){
            
            if(intervalPlay){
                  myInterval = setInterval(onPlay, 1000);
                  intervalPlay = false;
            }
            
      }
</script>
</head>
<body>
      <div id="slide_wrap">
  
        <div id="slide_center">
            
                  <ul id="img_list">
                  <li><img src="../images/img1.gif" alt="" /></li>
                    <li><img src="../images/img2.gif" alt="" /></li>
                    <li><img src="../images/img3.gif" alt="" /></li>
                    <li><img src="../images/img4.gif" alt="" /></li>       
                </ul>      
               
                  <ul id="dot_list">
                  <li></li>
                    <li></li>
                    <li></li>
                    <li></li>          
                </ul>           
           
        </div>
       
        <span id="prev_btn">이전보기</span>
        <span id="next_btn">다음보기</span>
         
    </div>

</body>
</html>







TabMenu 탭메뉴-addClass, removeClass

주요 핵심 Point
특정 class에 css를 미리 작성해두고, 스크립트로 클래스명을 추가, 제거하며 화면상에 바뀌는 효과를 가진다.


tab 이미지




tab_selected 이미지





탭메뉴 실행화면




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
      <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <meta http-equiv="Content-Style-Type" content="text/css" />
            <meta http-equiv="Content-Script-Type" content="text/javascript" />
            <title>tabMenu</title>
            <script type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
            <script type="text/javascript">
                  
                  var $tab;
            
                  $(document).ready(function(e) {
                        
                $("ul.panel li").hide(); // 모든보여질내용을 안보이게 초기값적용
                        $("#tab1").show(); // 처음보여줄내용만 보이게 적용
                        
                        $tab=$("ul.tab li a");                    
                        $tab.bind("click",onClick);               
            });
                  
                  function onClick(){                       
                        $tab.removeClass("selected");
                        // 기존에활성된탭메뉴를 비활성화배경이미지처리와 텍스트처리 시킴 ( 클래스에 속성을 미리지정하고 클래스를 변경하여 스타일 지정 )
                        $(this).addClass("selected"); // 클릭한 탭메뉴만 활성화배경이미지 처리와 텍스트 칼라변경                       
                        // 중요) 클래스의 background-position 속성을 미리다르게 지정해놓고 클릭할때 클래스를 변경하면
                        //배경이미지 뿐만아니라 배경이미지에 타이틀도 포함시켜 바꿀수있다. (현제는 타이틀을 텍스트로 처리 )                
                        
                        $("ul.panel li").hide(); // 기존활성화된내용은 비활화 시킴
                        $($(this).attr("href")).show(); // 클릭한 탭메뉴의링크경로를 얻어내서 해당되는 id의 내용만 활성화 시킴
                        return false;     // a링크명령이 적용되지못하게 한다.
                  }
                        
            </script>
            <style type="text/css">
*{
      margin:0;
      padding:0;
}
#container{
      width:500px;
      margin:50px auto;
}
ul.tab{
      padding:0;
}
ul.tab li{
      list-style-type:none;
      width:100px;
      height:40px;
      float:left;
}
ul.tab li a{
      outline:none;
      background:url("./images/tab.jpg");
      display:block;
      color:blue;
      line-height:40px;
      text-align:center;
      height:40px;
}
ul.tab li a:link{
      font:normal 12px Arial, Helvetica, sans-serif; color:#000000; text-decoration:none;
      line-height:40px;
}
ul.tab li a.selected{
      background:url("./images/tab_selected.jpg");
      text-decoration:none;
      color:#069;
      cursor:default;
}
ul.panel{
      clear:both;
      border:1px solid #9FB7D4;
      border-top:none;
      padding:0;
}
ul.panel li{
      list-style-type:none;
      padding:10px;
      text-indent:1em;
      color:#333;
      background:#FFFFFF;
}
            </style>
      </head>
      <body>
            <div id="container">
                  <ul class="tab">
                        <li><a href="#tab1" class="selected">JavaScript</a></li>
                        <li><a href="#tab2">CSS</a></li>
                        <li><a href="#tab3">HTML</a></li>
                        <li><a href="#tab4">jQuery</a></li>
                        <li><a href="#tab5">XHTML</a></li>
                  </ul>
                  <ul class="panel">
                        <li id="tab1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue elit eu mauris sollicitudin dictum. Phasellus nec felis ut arcu placerat tincidunt. Vestibulum luctus mauris ac ante molestie eleifend. Quisque dapibus nulla ac purus volutpat posuere a quis nisl. Nam condimentum purus vitae nibh feugiat imperdiet. Cras purus mi, egestas vitae imperdiet volutpat, suscipit nec odio. Maecenas elementum aliquam metus nec ultrices. Suspendisse potenti. Praesent lobortis gravida massa in volutpat. Nunc id mauris id orci congue malesuada. Aliquam vel mauris risus, sit amet laoreet sapien. Maecenas varius gravida purus vel pharetra. Sed quis leo id mi laoreet accumsan. Vestibulum ac mauris purus, nec rutrum sem. Sed euismod magna a lacus consectetur in mattis quam suscipit. Phasellus nec enim libero. Donec sit amet justo diam. In hac habitasse platea dictumst. Sed nibh libero, iaculis eget aliquet eu, rhoncus nec ligula.
                        </li>
                        <li id="tab2">
Nam cursus molestie erat, a sodales erat sollicitudin ut. Maecenas nec urna mi, eu congue turpis. Duis vitae volutpat lorem. Ut vulputate tempor elit, vitae iaculis elit sollicitudin at. Ut gravida fermentum tempor. Mauris metus ante, volutpat et porta a, malesuada vel purus. In lobortis ullamcorper lorem eu malesuada. Nullam sollicitudin, urna eu euismod suscipit, eros sapien adipiscing arcu, sit amet ultricies lacus elit sed urna. Nam scelerisque, nulla eu mollis elementum, ipsum tortor ullamcorper felis, eget laoreet diam turpis dignissim metus. In eget lectus sit amet mi pretium pellentesque varius vitae augue. Integer mattis, elit nec adipiscing rhoncus, elit tellus congue sapien, et auctor mi nisi in purus. Curabitur commodo, neque sed ornare porta, purus magna rhoncus eros, quis consectetur ipsum erat ac mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce sed turpis tortor, quis euismod enim. Integer faucibus venenatis egestas. Etiam eu metus et sem bibendum fermentum. Sed dui ante, sollicitudin at tincidunt at, pretium sit amet diam. Nunc porttitor tristique est sed pulvinar. Fusce eu ligula vitae orci venenatis sagittis sed quis ipsum.
                        </li>
                        <li id="tab3">
Pellentesque in metus leo. Praesent porta, dolor nec mattis ullamcorper, velit purus mollis enim, nec tincidunt magna massa ornare elit. In ipsum enim, pellentesque vitae gravida ultrices, aliquet nec ante. Mauris sed nunc ut ligula dictum convallis vel et nunc. Aenean eget enim vitae nulla lacinia consequat. Quisque blandit, ante vel sodales sollicitudin, neque ante elementum leo, ut consequat dui risus ut purus. Vestibulum viverra lacus at felis dignissim bibendum. Maecenas interdum nisl eu metus porta luctus. Suspendisse nulla neque, ultricies nec facilisis nec, mollis id sapien. Donec nec quam et felis pulvinar fringilla a non orci. Maecenas tincidunt magna a sem faucibus eu interdum magna aliquam. Suspendisse a diam lorem, nec malesuada sapien. Nam a scelerisque velit. Integer commodo malesuada odio, sit amet rutrum ante viverra ut. In egestas, arcu id pretium tempus, ligula nibh interdum enim, non bibendum velit felis sed augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent augue eros, posuere pharetra pharetra eu, feugiat eu velit.
                        </li>
                        <li id="tab4">
Vestibulum a quam scelerisque odio ultricies mollis eget a leo. Morbi dictum, velit lobortis hendrerit tincidunt, lacus nisl rhoncus felis, commodo sollicitudin magna augue non est. Nunc in felis quis purus dignissim blandit vel ut erat. In hac habitasse platea dictumst. Nullam euismod auctor rhoncus. Proin et sem ac neque placerat vulputate. Nullam consequat purus eget libero posuere pulvinar. Aenean luctus luctus leo nec vehicula. Praesent eleifend nibh sed neque vestibulum hendrerit. Nulla suscipit vehicula sem, quis congue ligula gravida vel. Aliquam risus urna, pretium eget porttitor hendrerit, gravida at libero. Curabitur nec luctus risus. Etiam ullamcorper fringilla nisl hendrerit convallis. Duis in nibh tellus. Donec porta nibh id purus mollis sodales. Nam eget libero vel metus congue ultricies ut vitae nibh. Sed ac justo ac eros luctus ullamcorper ut tincidunt nibh. Fusce dapibus bibendum urna, id tempor turpis sodales sed. Nam dui purus, posuere vel placerat eu, posuere non magna.
                        </li>
                        <li id="tab5">
Vestibulum consequat consequat aliquet. Aenean ut nunc dolor, vel dictum mauris. Proin neque eros, tincidunt at faucibus a, dapibus sit amet tellus. Etiam rutrum pharetra risus porta ullamcorper. Nunc convallis orci at massa suscipit porta. Sed interdum suscipit dui, eu sodales odio fermentum vitae. Nunc vitae dui metus, a laoreet ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed eu mauris mi, non blandit tortor. Ut fringilla cursus justo id porta. Sed in nibh nulla. Aenean consectetur arcu vel eros facilisis ac luctus lectus placerat. Fusce risus dui, adipiscing ut tempus non, malesuada quis velit.
                        </li>
                  </ul>
            </div>
      </body>
</html>






Steemit 블로그 개설하기2


아래와 같이 메일 통보과 온다.
"아래 링크를 눌러서 계정생성을 끝내라"



최초 생성된 비밀번호를 확인하고 저장한다.
잃어버리면 계정을 찾을수 없게 되기때문에, 저장하자.
Continue





방금저장했던 다시 입력하고 재확인하자.
Continue




가입이 완료되었다.
계정이 생성된것이다.



로 들어가서, 화면 우측상단의 Login 클릭
아이디, 비번을 치고 로그인해보자.





제대로 로그인 되었다면, 아래와 같은 화면이 나온다.
아직 follow한 이력이 없다.




다음에는
Explore Trending Articles, Read The Quick Start Guide, Browse The FAQ를 클릭해서 읽어봐야겠다. 


'블로그 운영 Know-how > Steemit 운영 Know-how' 카테고리의 다른 글

Steemit 블로그 개설하기1  (0) 2018.03.25


Steemit 블로그 개설하기1

최근 steemit이란 블로그가 유명세를 타고 있다.
steemit에 있는 블로거들끼리 서로 추천을 눌러주면, 그에 따른 보상으로 steem 가상화폐가 주어지기 때문이다.
시세에 따라 이 화폐의 현금가치는 바뀐다.
기존 블로거의 수입은 광고였다.
티스토리, 워드프레스, 개인 사이트형 블로그에 에드센스, daum, dable 등의 광고들을 붙여서 수입원을 창출했다.

steemit은 기존의 광고형 수익이 아닌 다른 차원의 수익형 블로그를 만들어낸것이다.
컨텐츠가 많은 블로거는 steemit을 운영해보는 것도 나쁘지 않을 것 같다.

그렇기에 앞으로 운영해볼 생각이다.




일단 가입무료, 블로그 개설 무료이기에 시작해 본다.
위 주소로 들어간다.
Sign up을 클릭해준다.





Username을 입력하고, 유효성이 자동검사되면, 초록색 체크가 된다.
Continue 클릭




이메일을 입력한다.
Continue







자신의 이메일에 메일이 하나오는데, 링크를 클릭해서, 인증을 완료한다.
그러면, 아래의 핸드폰 인증화면으로 바뀐다.






문자 메시지에 인증번호가 온다.
문자로 받은 인증번호를 PC화면에 입력후, Continue하면 아래와 같은 화면이 나온다.
영어로 설명하기를... 
"steemit 운영진에서 계정생성 검토할 시간을 달라는 이야기다.
검토완료되면, 링크를 줄테니 기달려달라."라는 뜻이다.
기달리자.








'블로그 운영 Know-how > Steemit 운영 Know-how' 카테고리의 다른 글

Steemit 블로그 개설하기2  (0) 2018.03.26


서브네비게이션 메뉴 focus 이벤트

메인메뉴 버튼 이미지들




실제 화면




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<style type="text/css">
body,p,ul,li{
     margin:0px; padding:0px; list-style:none;
}
body{
     background:url(img/index_back.gif);
}
div#header_wrap{
     width:100%; height:122px; background:url(img/header_bg.gif) repeat-x;
}
div#header_center{
     width:980px; height:122px; margin:0px auto; position:relative; left:0px; top:0px;
     /* 반응형일경우는 해상도가 980px 보다 작을때는 메뉴구조를 새로 바꾸는 것이 좋다 ( 예) 네비게이션 전체를 사라지게 하고 메뉴버튼으로 보이게 */
}
     
span#logo{
     position:absolute; left:0px; top:20px;
}
ul#mainMenu_list>li{
     float:left; margin-right:50px; position:relative; left:0px; top:0px;
}
ul#mainMenu_list{
     position:absolute; left:250px; top:30px;
}
div.mainMenu{
     height:20px; overflow:hidden; position:relative; left:0px; top:0px;
}
div.mainMenu>a{
     position:relative; left:0px; top:0px; /* a테그를 움직이게 하므로 반드시 position 값이 존재해야 한다. */
}
div.subMenu{
     width:300px; position:absolute; left:0px; top:65px;
}
ul.subMenu_list>li{
     float:left; margin-right:10px;
}
</style>
<script type="text/javascript">
     
     var $mainMenu;
     var $subMenu;
     var overNum;
     
     //  실제로 sub메뉴가 다양할 경우, 바로 밑에 생기면, 모양이 이상하므로,
     //  left 값을 여러개 넣어서 바꿔줌
     var subPosition = [-100,-80,0,-20,100];  
     
     $(document).ready(function(){
          
          $mainMenu = $(".mainMenu>a");
          $subMenu = $(".subMenu");
          
          //  처음에는 안보이게 해주기
          $subMenu.css("opacity", 0);
          $subMenu.hide();
          
          $mainMenu.bind("mouseenter", onOver);
          $mainMenu.bind("focus", onOver);
   
     //  맨 마지막 sub메뉴에서 탭키 눌렀을때, 화면 사라지게 이벤트 걸기
         $(".subMenu_list").last().children().last().bind("focusout", onOut);
     
     //  메뉴 밖으로 벗어나면 메뉴 활성 사라지게 이벤트 걸기
     $("#header_center").bind("mouseleave", onOut);
    
     });
     function onOver(){
   
     //  mainMenu들 중에서 해당 over된 mainMenu의 번호를 알아내기
         overNum=$mainMenu.index($(this));
         //alert(overNum)
        
         //  최초 세팅으로 over되기 전으로 해놓기    
         mainOut();
         subOut();
        
         //  over이벤트 걸어주기
         mainOver($(this));
         subOver($(this));
   
     }
 
     function onOut(){
   
          mainOut();
          subOut();
   
     }
     
     function mainOver(newMenu){
          
          newMenu.stop();
          //  1장의 메인버튼 이미지 사진이 hover느낌전후과 위아래로 붙어있으므로, 이것을 top을 통해서 전환 시켜줌
          newMenu.animate({"top":-25}, 300, "easeOutCubic");
          
     }
     
     function mainOut(){
          
          $mainMenu.stop();
          //  1장의 메인버튼 이미지 사진이 hover느낌전후과 위아래로 붙어있으므로, 이것을 top을 통해서 전환 시켜줌
          $mainMenu.animate({"top":0}, 300, "easeOutCubic");
     }
     
     function subOver(newMenu){
          
          newMenu.parent().next().show();
          newMenu.parent().next().stop();
          newMenu.parent().next().animate({"left":subPosition[overNum], "opacity":1}, 300, "easeOutCubic");
     }
     
     function subOut(){
          
          $subMenu.stop();
          $subMenu.animate({"left":0, "opacity":0}, 300, "easeOutCubic", function(){
              $(this).hide() //  opacity가 0인 것은 실제로 존재는 하기때문에 사라지게 하기
          })
     }
     
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>서브메뉴네비게이션_웹접근성</title>
</head>
<body>
     <div id="header_wrap">
     <div id="header_center">
          <span id="logo"><a href="#"><img src="img/logo.png" alt="" /></a></span>
          <ul id="mainMenu_list">
              <li>
                   <div class="mainMenu">
                        <a href="#"><img src="img/menu0.png" alt="" /> </a>                  
                  </div>
                    <div class="subMenu">
                        <ul class="subMenu_list">
                             <li><a href="#"><img src="img/love_01_off.png" alt="" /></a></li>
                            <li><a href="#"><img src="img/love_02_off.png" alt="" /></a></li>
                            <li><a href="#"><img src="img/love_03_off.png" alt="" /></a></li>                   
                        </ul>                
                    </div>       
                </li>
               
                <li>
                   <div class="mainMenu">
                        <a href="#"><img src="img/menu1.png" alt="" /> </a>                  
                    </div>
                    <div class="subMenu">
                        <ul class="subMenu_list">
                             <li><a href="#"><img src="img/love_01_off.png" alt="" /></a></li>
                            <li><a href="#"><img src="img/love_02_off.png" alt="" /></a></li>
                            <li><a href="#"><img src="img/love_03_off.png" alt="" /></a></li>                   
                        </ul>                
                    </div>       
                </li>
               
                <li>
                   <div class="mainMenu">
                        <a href="#"><img src="img/menu2.png" alt="" /> </a>                  
                    </div>
                    <div class="subMenu">
                        <ul class="subMenu_list">
                             <li><a href="#"><img src="img/love_01_off.png" alt="" /></a></li>
                            <li><a href="#"><img src="img/love_02_off.png" alt="" /></a></li>
                            <li><a href="#"><img src="img/love_03_off.png" alt="" /></a></li>                   
                        </ul>                
                    </div>       
                </li>
               
                <li>
                   <div class="mainMenu">
                        <a href="#"><img src="img/menu3.png" alt="" /> </a>                  
                    </div>
                    <div class="subMenu">
                        <ul class="subMenu_list">
                             <li><a href="#"><img src="img/love_01_off.png" alt="" /></a></li>
                            <li><a href="#"><img src="img/love_02_off.png" alt="" /></a></li>
                            <li><a href="#"><img src="img/love_03_off.png" alt="" /></a></li>                   
                        </ul>                
                    </div>       
                </li>
               
                <li>
                   <div class="mainMenu">
                        <a href="#"><img src="img/menu4.png" alt="" /> </a>                  
                    </div>
                    <div class="subMenu">
                        <ul class="subMenu_list">
                             <li><a href="#"><img src="img/love_01_off.png" alt="" /></a></li>
                            <li><a href="#"><img src="img/love_02_off.png" alt="" /></a></li>
                            <li><a href="#" id="last_subMenu"><img src="img/love_03_off.png" alt="" /></a></li>                   
                        </ul>                
                    </div>       
                </li>
               
           
           
           
            </ul>       
       
        </div>   
    </div>
</body>
</html>









반응형 슬라이드-resize, setInterval

슬라이드 기능이 화면을 줄였을때 반응형으로 작동하게 만들기








<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>슬라이드이미지 _버튼</title>
<script type="text/javascript" src="../../libs/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../../libs/jquery.easing.1.3.js"></script>
<style type="text/css">
html,body{
     height:100%;
}
body,p,ul,li{
     margin:0px; padding:0px; list-style:none;
}
body{
     background:url(../images/index_back.gif);
}
div#slide_wrap{
     width:100%; height:80%;  background:#CCC; margin-top:100px;
}
div#slide_center{
     width:80%;  margin:0px auto; position:relative; left:0px; top:0px;
}
ul#img_list{
     position:absolute; left:0px; top:0px; width:100%;
}
ul#img_list li{
     float:left;
}
ul#img_list li img{
     display:block; width:100%;
}
span#prev_btn{
     position:absolute; left:-5px; top:40%;
}
span#next_btn{
     position:absolute; right:-5px; top:40%;
}
</style>
<script type="text/javascript">
  var $slideWrap;
  var $slideCenter;
  var $imgList;
  var $imgs //  슬라이드 이미지들
  var $btnImg  //  버튼 이미지
  var imgNum //  슬라이드 이미지의 총 개수
  var imgWidth //  해당 슬라이드안의 1개 이미지의 너비
  var imgHeight //  해당 슬라이드안의 1개 이미지의 높이
  var currentPosition //  현재 움직여줄 ul의 좌표
  var myInterval //  interval 담을 변수
 
  //  반응형 jquery는 document ready가 아니라, window ready이다.
  $(window).load(function(){
          
          $slideWrap = $("#slide_wrap");
          $slideCenter = $("#slide_center");
          $imgList = $("#img_list");
          $images = $("#img_list img");
          
          //  #slide_center 아래 span 아래 img들
          $btnImg = $("#slide_center span img");
          
          resizeReset();
                    
          //  최초 세팅: 맨마지막 사진을 첫번째 사진 앞에다가 붙여주기
          $imgList.children().last().prependTo($imgList);
          
          //  자동적으로 슬라이드가 next버튼 누른 것처럼 변하게 하는 interval 만들기
          myInterval = setInterval(onNext, 2000);
          //  사진에서 마우스가 떠나면, 슬라이드 넘기는 이벤트 멈추기
          $slideWrap.bind("mouseleave", onPlay);
          //  사진에서 마우스가 올라가면, 슬라이드 넘기는 이벤트 시작 
          $slideWrap.bind("mouseenter", onStop);
          
          $("#prev_btn").bind("click", onPrev);
          $("#next_btn").bind("click", onNext);
  });
 
  function onStop(){
          
          clearInterval(myInterval);
          //alert("myInterval1: " + myInterval);
  }
 
  function onPlay(){
     
          myInterval = setInterval(onNext, 2000);         
  }
 
  function onNext(){
     
          currentPosition = $imgList.position().left;
          //  left를 이미지 사진만큼 이동해주면, 사진이 바뀌는 효과를 갖게됨
          $("#img_list:not(:animated)").animate({"left":currentPosition-imgWidth}, 300, "easeOutCubic", function(){
              
              //  맨첫번째 이미지가 이미지리스트의 맨 마지막에 이동하기
               $imgList.children().first().appendTo($imgList);
              //  사진이 이동한만큼 위치도 당겨주어야함
              $imgList.css("left", -imgWidth);
          });
  }
 
  function onPrev(){
     
          currentPosition = $imgList.position().left;
          //  left를 이미지 사진만큼 이동해주면, 사진이 바뀌는 효과를 갖게됨
          
          $("#img_list:not(:animated)").animate({"left":currentPosition-imgWidth}, 300, "easeOutCubic", function(){
              
              //  맨 마지막 이미지가 이미지리스트의 맨 처음에 이동하기
               $imgList.children().last().prependTo($imgList);
              //  사진이 이동한만큼 위치도 당겨주어야함
              $imgList.css("left", +imgWidth);
          });
  }
 
  //  window를 resize할때(화면의 크기가 재조정 될때)
  $(window).resize(function(){
          
          resizeReset();
          
  });
 
  //  반복되는 내용을 함수화 해서, 이렇게 정리해서 사용
  function resizeReset(){
     
          imgWidth = $slideCenter.innerWidth();
          //alert(imgWidth);
                    
          //  슬라이드 돌릴 이미지들의 크기를 전부 imgWidth 크기만큼 바꿔야함
          $images.css("width", imgWidth);
          
          //  반응형이기때문에 이미지 높이도 맞추어줘야함
          imgHeight=$images.height();
          
          //  슬아이드 화면 전체의 높이 세팅
          $slideCenter.css("height",imgHeight);
          
          //  슬아이드를 감싸는 전체의 높이 세팅
     $slideWrap.css("height", imgHeight);
          
          //  슬라이드 화면을 이미지의 높이만큼 바꿔야함
          $slideWrap.css("height", $images.innerHeight());
          
          //  슬라이드 버튼도 이미지를 기준으로 너비의 20분의 1로 만듦
          $btnImg.css("width", imgWidth/20);
          
          //  이미지 개수
          imgNum = $images.size();
          //alert(imgNum);
          
          //  이미지 리스트의 너비가 전체 이미지 너비 * 개수
          $imgList.css("width", imgWidth * imgNum);
                    
          //  최초 세팅: 맨마지막 사진을 첫번째 사진 앞에다가 붙여주기
          //$imgList.children().last().prependTo($imgList);
          //  최초 세팅: 첫번째 사진이 보여야하므로 위치를 사진의 너비만큼 왼쪽으로 이동
          $imgList.css("left", - imgWidth);
     
  }
   
   
</script>
</head>
<body>
     <div id="slide_wrap">
  
       <div id="slide_center">
          
          <ul id="img_list">
              <li><img src="../images/img1.gif" alt="" /></li>
                <li><img src="../images/img2.gif" alt="" /></li>
                <li><img src="../images/img3.gif" alt="" /></li>
                <li><img src="../images/img4.gif" alt="" /></li>       
          </ul>      
               
            <span id="prev_btn"><img src="../images/leftbtn.png" alt="" /></span>
            <span id="next_btn"><img src="../images/rightbtn.png" alt="" /></span>
           
           
        </div>
       
       
         
    </div>
</body>
</html>




3dept의 메뉴네비게이션 이벤트 걸기
mouseenter, mouseleave

tip
li부모태그에 mouseover했다가, 자식태그로 마우스가 이동하면, mouseout으로 인식해버림.
이것을 보완할 이벤트
mouseenter
mouseleave
자식태그로 이동해도 부모태그에서 mouseout한것으로 인식안함




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>slideNavi</title>
<script type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../libs/jquery.easing.1.3.js"></script>
<style type="text/css">
*{
       margin:0;
       padding:0;
       list-style-type:none;
}
#container{
       margin:100px auto;
       width:537px;
}
ul.menu li{
       float:left;
       width:179px;
       height:48px;
       background:url("images/btn.png");
       position:relative;
}
* html ul.menu li{
       display:inline;
       zoom:1;
}
*+html ul.menu li{
       display:inline;
       zoom:1;
}
ul.menu li a{
       display:block;
       width:100%;
       height:100%;
       line-height:48px;
       text-indent:30px;
       font-weight:bold;
       color:#CFDFB5;
       text-decoration:none;
       position:relative;
}
ul.menu li a:hover{
       background:url("images/btn_over.png");
}
ul.sub{
       display:none;
}
* html ul.sub{
       zoom:1;
       position:relative;
}
*+html ul.sub{
       zoom:1;
       position:relative;
}
ul.sub li{
       float:none;
}
ul.sub li ul.sub{
       position:absolute;
       /* 두번째 서브메뉴는 부모의 위치를 기준으로 잡아야 함 */
       left:179px;
       top:0;
}
ul.menu{
       zoom:1;
}
ul.menu:after {
       height:0;
       visibility:hidden;
       content:".";
       display:block;
       clear:both;
}
</style>
<script type="text/javascript">
       var $mainMenu //  메뉴네비게이션들 전부 담을 변수
       
       $(document).ready(function(){
              
              //  메뉴네비게이션들 전부 담을 변수
              $mainMenu = $(".menu li");
              
              //  hovertl slidedown 이벤트 걸기
              //  tip
              /* 
               *
               * li부모태그에 mouseover했다가, 자식태그로 마우스가 이동하면, mouseout으로 인식해버림.
               * 이것을 보완할 이벤트: mouseenter, mouseleave
               * 자식태그로 이동해도 부모태그에서 mouseout한것으로 인식안함
               */
              
              $mainMenu.bind("mouseenter", onOver);
              
              $mainMenu.bind("mouseleave", onOut);
              
       });
       
       function onOver(){
              
              //  추가 tip :not(:animated)는 이벤트의 중복을 막기위해서
              $(this).children(".sub:not(:animated)").slideDown(300, "easeOutExpo");
       }
       
       function onOut(){
              
              //  추가 tip :not(:animated)는 이벤트의 중복을 막기위해서
              $(this).children(".sub:not(:animated)").slideUp(300, "easeOutExpo");
       }
</script>            
</style>
       </head>
       <body>
              <div id="container">
              <ul class="menu">
                     <li><a href="#">메뉴A</a>
                           <ul class="sub">
                                  <li><a href="#">서브메뉴A</a></li>
                                  <li><a href="#">서브메뉴A</a></li>
                                  <li><a href="#">서브메뉴A</a><!--
                                         --><ul class="sub">
                                                <li><a href="#">서브메뉴A2</a></li>
                                                <li><a href="#">서브메뉴A2</a></li>
                                                <li><a href="#">서브메뉴A2</a></li>
                                         </ul><!--
                                  --></li>
                           </ul>
                     </li>
                     <li><a href="#">메뉴B</a>
                           <ul class="sub">
                                  <li><a href="#">서브메뉴B</a></li>
                                  <li><a href="#">서브메뉴B</a>
                                         <ul class="sub">
                                                <li><a href="#">서브메뉴B2</a></li>
                                                <li><a href="#">서브메뉴B2</a></li>
                                                <li><a href="#">서브메뉴B2</a>
                                                       <ul class="sub">
                                                              <li><a href="#">서브메뉴B3</a></li>
                                                              <li><a href="#">서브메뉴B3</a></li>
                                                              <li><a href="#">서브메뉴B3</a></li>
                                                       </ul>
                                                </li>
                                         </ul>
                                  </li>
                                  <li><a href="#">서브메뉴B</a></li>
                           </ul>
                     </li>
                     <li><a href="#">메뉴C</a>
                           <ul class="sub">
                                  <li><a href="#">서브메뉴B</a>
                                         <ul class="sub">
                                                <li><a href="#">서브메뉴C2</a></li>
                                                <li><a href="#">서브메뉴C2</a></li>
                                                <li><a href="#">서브메뉴C2</a></li>
                                         </ul>
                                  </li>
                                  <li><a href="#">서브메뉴B</a></li>
                                  <li><a href="#">서브메뉴B</a></li>
                           </ul>
                     </li>
              </ul>
              </div>
              
       </body>
</html>





위의 mouseenter, mouseleave의 예제 샘플



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>slideNavi</title>
<script type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../libs/jquery.easing.1.3.js"></script>
<style type="text/css">
div#main{
       width: 200px;
       height:200px;
       background:red;
       position:absolute;
       left:200px;
       top:200px;
}
div#sub{
       width:100px;
       height:100px;
       margin: 50px auto;
       background:blue;
}
</style>
<script type="text/javascript">
       $(document).ready(function(){
              
              //  최초 mouse가 over, out되고, 자식태그로 이동시 mouseover/mouseout은 over/out으로 보지만,
              //  mouseenter/mouseleave는 over/out으로 보지 않음.
              $("#main").bind("mouseout", onOut);
       });
       
       function onOut(){
              
              alert('마우스가 아웃되었습니다.');
       }
</script>            
</style>
       </head>
       <body>
              <div id="main">
                     <div id="sub">
                           
                     </div>
              </div>
              
       </body>
</html>





메뉴네비게이션 이미지 이용 애니메이션 걸기
아래의 버튼위에 마우스 올리고 내릴때마다 1장 이미지 png를
overflow:hidden
position: relative
인 상태에서 
top의 위치를 바꿔서, 색상이 변화가 일어나게 해줌

tip
빠른 이벤트변화이므로, 중복을 막기위한 animation 중지는 stop을 이용



아래 png 파일들






<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>animationNavi</title>
<script type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../libs/jquery.easing.1.3.js"></script>
<style type="text/css">
              *{
                     margin:0;
                     padding:0;
              }
              body{
                     background:url(images/index_back.gif);
              }
              ul.menu{                   
                     background:url(images/bg.jpg) repeat-x;
                     width:700px;
                     height:50px;
                     position:absolute;
                     left:50px;
                     top:50px;
                     overflow:hidden;
                     padding-left:80px;
                     border:solid 1px #999;
                     border-radius:10px;
                     box-shadow:2px 2px 2px #333;
              }
              
              ul.menu li{
                     margin-top:10px;                  
                     overflow:hidden;
                     width:120px;
                     height:30px;  
                     float:left;
                     cursor:pointer;
              }
              
              ul.menu li div{            
                     position:relative;
              }
                     
</style>
       
<script type="text/javascript">
       
       var $mainMenu;
       
       $(document).ready(function(){
              
              $mainMenu = $(".menu").children();
              
              $mainMenu.bind("mouseenter", onOver);
              $mainMenu.bind("mouseleave", onOut);
       });
       
       function onOver(){
              //  tip: 이런건 반응이 빠르기때문에, stop으로 이벤트 컨트롤
              $(this).children().stop();
              
              //  해당 mouseover된 li태그의 자식인 div의 위치를 바꿔주기: top
              $(this).children().animate({"top":-30}, 200, "easeOutExpo");
       }
       
       function onOut(){
              //  tip: 이런건 반응이 빠르기때문에, stop으로 이벤트 컨트롤
              $(this).children().stop();
              
              //  해당 mouseover된 li태그의 자식인 div의 위치를 바꿔주기: top
              $(this).children().animate({"top":0}, 200, "easeOutExpo");
       }
       
       
   
       
              
</script>
</head>
       <body>
              <ul class="menu">
                     <li>
                           <div><img src="images/menu_1.png"></div>
                     </li>
                     <li>
                           <div><img src="images/menu_2.png"></div>
                     </li>
                     <li>
                           <div><img src="images/menu_3.png"></div>
                     </li>
                     <li>
                           <div><img src="images/menu_4.png"></div>
                     </li>
                     <li>
                           <div><img src="images/menu_5.png"></div>
                     </li>
              </ul>
       </body>
</html>






아코디언 메뉴-배열





작동원리
각메뉴에 마우스를 올리면 해당메뉴의 높이를 늘려서 안에있는 이미지를  보여주면서
그안에있는 이미지는 동시 올려주어서 타이틀을 안보이게 해준다.

해당 menu_item > menu_item_content > image 2개가 있음 
over하게되면, 메뉴의 높이가 커짐

.accordion_menu .menu_item{
       position:relative;
       height:30px;  
       overflow:hidden;
       cursor:pointer;
}



배열
어떤것은 서브메뉴가 많을 수도 있고, 적을 수도 있고, 없을수도 있음.
즉, 규칙, 사이즈들을 찾기 어려울때 어떻게 해야할까?
이럴때는 배열을 이용한다.

이때, 중요한 함수
index(): 순번구하는 함수


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>accordionMenu</title>
<script type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../libs/jquery.easing.1.3.js"></script>
<style>
@charset "utf-8";
/* CSS Document */
body{
       background:url(../images/index_back.gif);
}
.accordion_menu{
       position:absolute;
       left:100px;
       top:50px;     
       width:300px;
       padding:20px 0;
       
       border-radius:10px;
       box-shadow:2px 2px 2px #333;      
       background-color:#eeeeee;
}
.accordion_menu .menu_item{
       position:relative;
       height:30px;  
       overflow:hidden;
       cursor:pointer;
}
.accordion_menu .menu_item  .menu_item_content{
       position:absolute;
}
.accordion_menu .menu_item  .menu_item_content img{
       display:block;
}
       
</style>
<script type="text/javascript">
       /*
        * 작동원리
              각메뉴에 마우스를 올리면 해당메뉴의 높이를 늘려서 안에있는 이미지를 보여주면서
              그안에있는 이미지는 동시 올려주어서 타이틀을 안보이게 해준다.    
       */
       
       /*
        * 다행이도 레퍼런스로 준비된 menu_1_over.png ~ menu_4_over.png의 사진 높이는 모두 113px이지만,
        * 만약에 이런 이미지 사이즈들이 다를 경우에는 어떻게 해야할까?
        * 어떤것은 서브메뉴가 많을 수도 있고, 적을 수도 있고, 없을수도 있음.
        * 즉, 규칙, 사이즈들을 찾기 어려울때 어떻게 해야할까?
        * 이럴때는 배열을 이용한다.
        */
       
       var $mainMenu;
       //var openHeight = 120;
       var closeHeight = 30;
       
       var openArray=[120, 240, 30, 200, 400] //  순서에 맞게 높이값을 넣은 배열
       var overNum // 마우스 올렸을때 해당 태그의 순번
       
       $(document).ready(function(){
              
              $mainMenu = $(".menu_item");
              
              $mainMenu.bind("mouseenter", onOver);
              $mainMenu.bind("mouseleave", onOut);
       });
       
       function onOver(){
              
              overNum = $mainMenu.index($(this)) //  마우스를 올렸을때 해당 태그의 순번
              //alert(overNum);
              
              //  <div class="menu_item_content">의 높이를 늘려주기
              $(this).stop();
              
              //  이미지들의 크기가 일정할 경우 하는 방법
              //$(this).animate({"height": openHeight}, 300, "easeOutExpo");
              
              //  이미지들으 크기가 다를경우 배열을 이용해서 하는 방법
              $(this).animate({"height": openArray[overNum]}, 300, "easeOutExpo");
              
              //  <div class="menu_item_content"> 아래에 있는 image태그들의 top을 올려주기
              $(this).children().stop();
              $(this).children().animate({"top":-closeHeight},300, "easeOutExpo");
       }
       
       function onOut(){
              
              //  <div class="menu_item_content">의 높이를 줄여주기
              $(this).stop();
              $(this).animate({"height": 30}, 300, "easeOutExpo");
              
              //  <div class="menu_item_content"> 아래에 있는 image태그들의 top을 내려주기
              $(this).children().stop();
              $(this).children().animate({"top":0},300, "easeOutExpo");
       }
</script>
</head>
<body>
       <div class="accordion_menu">
              <div class="menu_item">
                     <div class="menu_item_content">
                           <img src="images/menu_1.png">
                           <img src="images/menu_1_over.png" >
                     </div>
              </div>
              
              <div class="menu_item">
                     <div class="menu_item_content">   
                           <img src="images/menu_2.png">
                           <img src="images/menu_2_over.png" >
                     </div>
              </div>
              
              <div class="menu_item">
                     <div class="menu_item_content">
                           <img src="images/menu_3.png">
                           <img src="images/menu_3_over.png" >
                     </div>
              </div>
              
              <div class="menu_item">
                     <div class="menu_item_content">
                           <img src="images/menu_4.png">
                           <img src="images/menu_4_over.png" >
                     </div>
              </div>
              <div class="menu_item">
                     <div class="menu_item_content">
                           <img src="images/menu_5.png">
                           <img src="images/menu_5_over.png" >
                     </div>
              </div>
              
       </div>
</body>
</html>





2depth 메뉴 네비게이션-동시에 4가지이벤트


레퍼런스 이미지 메인메뉴 파일들png


레퍼런스 이미지 서브메뉴 파일들png



핵심
-탭키로 작동이 되어야함.
-동시에 4가지 모션을 한다.
메인메뉴가 들어가고 나가고
서브메뉴가 들어가고 나가고

mainMenu는 자식태그인 a를 올렸다가 내리는 것    
subMenu는 자식태그인 li를 올렸다가 내리는 것

구조
    <div class="mainMenu">
        <a href="#"><img src="img/menu0.png" alt="" /> </a>                 
    </div>
    <div class="subMenu">
        <ul class="subMenu_list">
            <li><a href="#"><img src="img/love_01_off.png" alt="" /></a></li>
            <li><a href="#"><img src="img/love_02_off.png" alt="" /></a></li>
            <li><a href="#"><img src="img/love_03_off.png" alt="" /></a></li>                   
        </ul>                
    </div>




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<style type="text/css">
body,p,ul,li{
      margin:0px; padding:0px; list-style:none;
}
body{
      background:url(img/index_back.gif);
}
div#header_wrap{
      width:100%; height:122px; background:url(img/header_bg.gif) repeat-x;
}
div#header_center{
      width:980px; height:122px; margin:0px auto; position:relative; left:0px; top:0px;
      /* 반응형일경우는 해상도가 980px 보다 작을때는 메뉴구조를 새로 바꾸는 것이 좋다 ( 예) 네비게이션 전체를 사라지게 하고 메뉴버튼으로 보이게 */
}
      
span#logo{
      position:absolute; left:0px; top:20px;
}
ul#mainMenu_list>li{
      float:left; margin-right:50px; position:relative; left:0px; top:0px;
}
ul#mainMenu_list{
      position:absolute; left:250px; top:30px;
}
div.mainMenu{
      height:20px; overflow:hidden; position:relative; left:0px; top:0px;
}
div.mainMenu>a{
      position:relative; left:0px; top:0px; /* a테그를 움직이게 하므로 반드시 position 값이 존재해야 한다. */
}
div.subMenu{
      width:300px; position:absolute; left:0px; top:65px;
}
ul.subMenu_list>li{
      float:left; margin-right:10px;
}
</style>
<script type="text/javascript">
      var $mainMenu;
      var $subMenu;
      
      $(document).ready(function(){
            
            $mainMenu = $(".mainMenu").children();
            
            $subMenu = $(".subMenu");
            
            $subMenu.css("opacity", 0) //  최초에 subMenu들은 안보여야함.
            $subMenu.hide() //  최초에 subMenu들은 안보여야함.
            
            $mainMenu.bind("mouseenter", onOver);
      });
      
      function onOver(){
            
            //  기본: 처음에는 모든 $mainMenu 사라지게 하기
            $mainMenu.stop();
            $mainMenu.animate({"top":0}, 200, "easeOutExpo");
            
            //  기본: 처음에는 모든 $subMenu 사라지게 하기
            $subMenu.stop();
            $subMenu.animate({"left":0, "opacity":0}, 200, "easeOutExpo", function(){
                  
                  //  opacity가 0이지만, 존재하기때문에 없애주어야함.
                  $(this).hide();
            });
            
            $(this).stop() //  기존의 이벤트가 있다면 멈춰주기
            
            //  마우스가 올라간 $MainMenu의 top 속성을 위로 올려주기
            $(this).animate({"top":-25}, 200, "easeOutExpo");
            
            //  셀럭터 설명
            //  $(this).parent() => 해당 mainMenu
            //  $(this).parent().next() => 해당 subMenu
            $(this).parent().next().show();
            $(this).parent().next().stop();
            $(this).parent().next().animate({"left":-30, "opacity":1}, 200, "easeOutExpo", function(){
                  
            });
            
      }
      
      
      
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>서브메뉴네비게이션_웹접근성</title>
</head>
<body>
      <div id="header_wrap">
      <div id="header_center">
            <span id="logo"><a href="#"><img src="img/logo.png" alt="" /></a></span>
            <ul id="mainMenu_list">
                  <li>
               
                  <div class="mainMenu">
                        <a href="#"><img src="img/menu0.png" alt="" /> </a>                  
                    </div>
                    <div class="subMenu">
                        <ul class="subMenu_list">
                              <li><a href="#"><img src="img/love_01_off.png" alt="" /></a></li>
                            <li><a href="#"><img src="img/love_02_off.png" alt="" /></a></li>
                            <li><a href="#"><img src="img/love_03_off.png" alt="" /></a></li>                   
                        </ul>                
                    </div>       
                   
                </li>
               
                <li>
                  <div class="mainMenu">
                        <a href="#"><img src="img/menu1.png" alt="" /> </a>                  
                    </div>
                    <div class="subMenu">
                        <ul class="subMenu_list">
                              <li><a href="#"><img src="img/love_01_off.png" alt="" /></a></li>
                            <li><a href="#"><img src="img/love_02_off.png" alt="" /></a></li>
                            <li><a href="#"><img src="img/love_03_off.png" alt="" /></a></li>                   
                        </ul>                
                    </div>       
                </li>
               
                <li>
                  <div class="mainMenu">
                        <a href="#"><img src="img/menu2.png" alt="" /> </a>                  
                    </div>
                    <div class="subMenu">
                        <ul class="subMenu_list">
                              <li><a href="#"><img src="img/love_01_off.png" alt="" /></a></li>
                            <li><a href="#"><img src="img/love_02_off.png" alt="" /></a></li>
                            <li><a href="#"><img src="img/love_03_off.png" alt="" /></a></li>                   
                        </ul>                
                    </div>       
                </li>
               
                <li>
                  <div class="mainMenu">
                        <a href="#"><img src="img/menu3.png" alt="" /> </a>                  
                    </div>
                    <div class="subMenu">
                        <ul class="subMenu_list">
                              <li><a href="#"><img src="img/love_01_off.png" alt="" /></a></li>
                            <li><a href="#"><img src="img/love_02_off.png" alt="" /></a></li>
                            <li><a href="#"><img src="img/love_03_off.png" alt="" /></a></li>                   
                        </ul>                
                    </div>       
                </li>
               
                <li>
                  <div class="mainMenu">
                        <a href="#"><img src="img/menu4.png" alt="" /> </a>                  
                    </div>
                    <div class="subMenu">
                        <ul class="subMenu_list">
                              <li><a href="#"><img src="img/love_01_off.png" alt="" /></a></li>
                            <li><a href="#"><img src="img/love_02_off.png" alt="" /></a></li>
                            <li><a href="#" id="last_subMenu"><img src="img/love_03_off.png" alt="" /></a></li>                   
                        </ul>                
                    </div>       
                </li>
               
           
           
           
            </ul>       
       
        </div>   
    </div>
    <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
</body>
</html>










이미지 갤러리
화살표 버튼을 클릭하면, 그림모임페이지가 이동.
thum이미지 클릭시 오른쪽에 크게 표시

작업개요
1. 레아웃구조와 각 id/cass 명 확인
2. 각섬네일 이미지에 보여질 큰이미지의 경로를 a 테그를 이용하여 링크설정 .
3. 각 a 테그를 클릭하면 a 테그의 경로를 얻어내어 메인이미지 앞에 넣어주고 기존에 이미지는 사라지게 한다.
   주의)  a테그를 클릭해서 스크립트를 실행시킨다음 a 테그자제의 링크가 동작안되도록 return false  설정
4. next 버튼을 클릭하면 pageWrap 의 현제 margin 값을 얻어내어 -300px (pageWrap 전체의 가로) 으로 animate 를 적용.
5. prev 버튼을 클릭하면 pageWrap 의 현제 margin 값을 얻어내어 +300px (pageWrap 전체의 가로) 으로 animate 를 적용.

-index(): 해당태그의 순번을 출력함.





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>imgGallery</title>
<script type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../libs/jquery.easing.1.3.js"></script>
<style type="text/css">
*{
    margin:0;
    padding:0;
    border:0;
}
body{
    background:black;
}
#container{
    width:1000px;
    margin:100px auto;
}
#navi{
    width:300px;
    float:left;
}
#navi ul{
    height:460px;
}
#navi li{
    list-style-type:none;
    width:150px;
    float:left;
}
#navi li img{
    border:3px solid white;
}
#navi{
    overflow:hidden;
    position:relative;
    left:0px;
    top:0px;
}
#navi .pageWrap{
    width:900px; position:relative; left:0px; top:0px;
}
#navi .pageWrap .page{
    width:300px;
    float:left;
}
#navi p{
    clear:both;
    width:300px;
    padding:10px 0;
    text-align:center;
}
#navi p img{
    cursor:pointer;
}
#main{
    width:650px;
    float:right;
    
}
#main img{
    position:absolute;
    border:3px solid white;
}
</style>
<script type="text/javascript">
    /*
    작업개요
    1. 레아웃구조와 각 id/cass 명 확인
    2. 각섬네일 이미지에 보여질 큰이미지의 경로를 a 테그를 이용하여 링크설정 .
    3. 각 a 테그를 클릭하면 a 테그의 경로를 얻어내어 메인이미지 앞에 넣어주고 기존에 이미지는
        사라지게 한다.
        주의)  a테그를 클릭해서 스크립트를 실행시킨다음 a 테그자제의 링크가 동작안되도록 return false  설정
    4. next 버튼을 클릭하면 pageWrap 의 현제 margin 값을 얻어내어 -300px (pageWrap 전체의 가로) 으로 animate 를 적용.
    5. prev 버튼을 클릭하면 pageWrap 의 현제 margin 값을 얻어내어 +300px (pageWrap 전체의 가로) 으로 animate 를 적용.
    */
    var $sumImg //  클릭된 이미지
    var $mainWrap //  클릭된 이미지가 보이는 화면
    var $newImg //  새로운 이미지
    
    var clickNum //  클릭한 이미지의 번호
    var pageWidth //  페이지 1장의 너비
    var $pageWrap //  이미지들을 담고 있는 페이지들을 감싸고 있는 것 
    
    var currentPosition //  현재의 좌표
    var endX //  마지노선
    
    $(document).ready(function(){
        
        $sumImg = $(".page li");
        $mainWrap = $("#main");
        
        $sumImg.bind("click", onClick);
        
        
        $pageWrap = $(".pageWrap") //  페이지 감싸지는 부분
        //  페이지가 보이는 화면의 내부 너비: margin, padding, border 0이므로 outter 나 inner든 width 같음
        pageWidth = $("#navi").innerWidth();
        endX=-(pageWidth*$(".page").size()-pageWidth) //  마지노선
        
        
        $(".prev").bind("click", onPrev) //  이전버튼에 이벤트 달기: 페이지가 이동함.
        $(".next").bind("click", onNext) //  다음버튼에 이벤트 달기: 페이지가 이동함.
        
    });
    
    function onClick(){
        
        //  이미지들의 이름이 통일 되어있기때문에, 이미지 개수
        clickNum = $sumImg.index($(this)) + 1 //  index()함수: 해당 순번을 알아내는 함수
        
        //alert(clickNum);
        $newImg = $("<img src='images/photo" + clickNum + ".jpg' />");
        
        $newImg.appendTo($mainWrap) //  메인창 뒤에 붙이기
        
        $mainWrap.children().eq(0).animate({"opacity":0}, 200, "easeOutExpo",function(){
            $(this).remove() //  기존 것 지워주기
        });
        
        return false //  a 링크되는 것 막아주기
    }
    
    function onPrev(){
        
        currentPosition = $pageWrap.position().left;
        //alert(currentPosition);
        
        $pageWrap.animate({"left":currentPosition + pageWidth});
    }   
    
    function onNext(){
        
        currentPosition = $pageWrap.position().left;
        //alert(currentPosition);
        
        $pageWrap.animate({"left":currentPosition - pageWidth});
    }
</script>
    </head>
    <body>
        <div id="container">
         
          
            <div id="navi">
             
              <p><img src="images/btn_prev.jpg" alt="뒤로" class="prev" /> <img src="images/btn_next.jpg" alt="앞으로" class="next" /></p>
                <div class="pageWrap">
                    <div  class="page">
                        <ul>
                            
                            <li><img src="images/photo1_thum.jpg" alt="" /></li>
                            <li><img src="images/photo2_thum.jpg" alt="" /></li>
                            <li><a href="images/photo3.jpg"><img src="images/photo3_thum.jpg" alt="" /></a></li>
                            <li><a href="images/photo4.jpg"><img src="images/photo4_thum.jpg" alt="" /></a></li>
                            <li><a href="images/photo5.jpg"><img src="images/photo5_thum.jpg" alt="" /></a></li>
                            <li><a href="images/photo6.jpg"><img src="images/photo6_thum.jpg" alt="" /></a></li>
                            <li><a href="images/photo7.jpg"><img src="images/photo7_thum.jpg" alt="" /></a></li>
                            <li><a href="images/photo8.jpg"><img src="images/photo8_thum.jpg" alt="" /></a></li>
                        </ul>
                        <p><img src="images/btn_next.jpg" alt="" class="next" /></p>
                    </div>
                    <div  class="page">
                        <ul>
                            <li><a href="images/photo9.jpg"><img src="images/photo9_thum.jpg" alt="" /></a></li>
                            <li><a href="images/photo10.jpg"><img src="images/photo10_thum.jpg" alt="" /></a></li>
                            <li><a href="images/photo11.jpg"><img src="images/photo11_thum.jpg" alt="" /></a></li>
                            <li><a href="images/photo12.jpg"><img src="images/photo12_thum.jpg" alt="" /></a></li>
                            <li><a href="images/photo13.jpg"><img src="images/photo13_thum.jpg" alt="" /></a></li>
                            <li><a href="images/photo14.jpg"><img src="images/photo14_thum.jpg" alt="" /></a></li>
                            <li><a href="images/photo15.jpg"><img src="images/photo15_thum.jpg" alt="" /></a></li>
                            <li><a href="images/photo16.jpg"><img src="images/photo16_thum.jpg" alt="" /></a></li>
                        </ul>
                    
                    </div>
                    <div  class="page">
                        <ul>
                            <li><a href="images/photo17.jpg"><img src="images/photo17_thum.jpg" alt="" /></a></li>
                            <li><a href="images/photo18.jpg"><img src="images/photo18_thum.jpg" alt="" /></a></li>
                            <li><a href="images/photo19.jpg"><img src="images/photo19_thum.jpg" alt="" /></a></li>
                        </ul>
                        <p><img src="images/btn_prev.jpg" alt="뒤로" class="prev" /></p>
                    </div>
                </div>
                
                
                
            </div>
            <div id="main">
       
                <img src="images/photo1.jpg" alt="" />
            </div>
        </div>
    </body>
</html>





슬라이드 이미지 갤러리
왼쪽, 오른쪽 버튼을 누르면 4장이 1개의 슬라이드를 구성하는 슬라이드들이 움직인다.




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sumimg_Slide</title>
<script type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../libs/jquery.easing.1.3.js"></script>
<script type="text/javascript">
    
    var $slideInner //  inner들을 나타내는 변수
    var slideWidth //  슬라이드 너비
    var currentPosition //  슬라이드 현재 위치
    
    $(document).ready(function(){
        $slideInner = $("#slideInner");
        slideWidth = $("#slide").innerWidth();
        
        //alert(slideWidth);
        
        //  초반 세팅1
        //  slideInner의 너비를 column의 개수만큼의 너비로 늘려주기: .column의 개수만큼 너비를 곱해줌.
        $slideInner.css("width", slideWidth * $(".column").size() );
        
        //  초반 세팅2
        //  맨마지막에 있는 이미지를 맨 앞으로 이동시키기
        $slideInner.children().last().prependTo($slideInner);
        
        //  초반 세팅3
        //  맨 마지막 column을 앞으로 이동시켰기에, 1번째 column이 옆으로 이동시켜져있으므로, left속성을 이용해서 원상복귀하기
        $slideInner.css("left", -slideWidth);
        
        $("#slideNext").bind("click", onNext);
        $("#slidePrev").bind("click", onPrev);
        //alert(0);
    });
    
    function onNext(){
        //alert(1);
        currentPosition = $slideInner.position().left;
        
        // 
        //  $("#slideInner:not(:animated)") 을 통해서 중복 클릭 막음
        $("#slideInner:not(:animated)").animate({"left":currentPosition-slideWidth}, function(){
            
            //  맨 첫 column을 slideInner의 맨 뒤로 붙이기
            $slideInner.children().first().appendTo($slideInner);
            $slideInner.css("left", -slideWidth);
        });
    }
    
    function onPrev(){
        //alert(2);
        currentPosition = $slideInner.position().left;
        
        //  $("#slideInner:not(:animated)") 을 통해서 중복 클릭 막음
        $("#slideInner:not(:animated)").animate({"left":currentPosition+slideWidth}, function(){
            
            //  맨 마지막 column을 slideInner의 맨 앞으로 붙이기
            $slideInner.children().last().prependTo($slideInner);
            //  맨뒤에 붙음으로써, left속성을 다시 초기위치로 바꿔주어야함.
            $slideInner.css("left", -slideWidth);
        });
    }
    
    
</script>
<style type="text/css">
*{
    margin:0;
    padding:0;
}
#slideInner{
    position:relative;
    left:0px;
    top:0px;
}
#slideWrap{
    margin:100px auto;
    width:620px;
    height:135px;
    padding:5px;
    background:url("./images/background.gif");
    position:relative;
    
}
#slidePrev{
    position:absolute;
    top:65px;
    left:-8px;
    cursor:pointer;
    z-index:10;
}
#slideNext{
    position:absolute;
    top:65px;
    right:-8px;
    cursor:pointer;
    z-index:10;
}
#slide{
    width:100%;
    height:100%;
}
#slideInner ul.column{
    width:605px;
    height:105px;
    padding:15px 0 15px 15px;
    list-style-type:none;
    float:left;
}
#slideInner ul.column li{
    float:left;
    margin-right:10px;
    display:inline;
}
#slideInner ul.column li img{
    border:none;
}
        </style>
    </head>
    <body>
    
        <div id="slideWrap">
            <p id="slidePrev"><img src="./images/btn_prev.gif" alt="앞으로" /></p>
            <p id="slideNext"><img src="./images/btn_next.gif" alt="뒤로" /></p>
            <div id="slide">
                <div id="slideInner">
                    <ul class="column">
                        <li><a href="#"><img src="./images/photo1_thum.jpg" alt="" /></a></li>
                        <li><a href="#"><img src="./images/photo2_thum.jpg" alt="" /></a></li>
                        <li><a href="#"><img src="./images/photo3_thum.jpg" alt="" /></a></li>
                        <li><a href="#"><img src="./images/photo4_thum.jpg" alt="" /></a></li>
                    </ul>
                    <ul class="column">
                        <li><a href="#"><img src="./images/photo5_thum.jpg" alt="" /></a></li>
                        <li><a href="#"><img src="./images/photo6_thum.jpg" alt="" /></a></li>
                        <li><a href="#"><img src="./images/photo7_thum.jpg" alt="" /></a></li>
                        <li><a href="#"><img src="./images/photo8_thum.jpg" alt="" /></a></li>
                    </ul>
                    <ul class="column">
                        <li><a href="#"><img src="./images/photo9_thum.jpg" alt="" /></a></li>
                        <li><a href="#"><img src="./images/photo10_thum.jpg" alt="" /></a></li>
                        <li><a href="#"><img src="./images/photo11_thum.jpg" alt="" /></a></li>
                        <li><a href="#"><img src="./images/photo12_thum.jpg" alt="" /></a></li>
                    </ul>
                    <ul class="column">
                        <li><a href="#"><img src="./images/photo13_thum.jpg" alt="" /></a></li>
                        <li><a href="#"><img src="./images/photo14_thum.jpg" alt="" /></a></li>
                        <li><a href="#"><img src="./images/photo15_thum.jpg" alt="" /></a></li>
                        <li><a href="#"><img src="./images/photo16_thum.jpg" alt="" /></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
    
</html>





+ Recent posts