A Column

검색

검색

Total 42 / 2 page
썸네일

​[이응수의 IT노트] 하둡(Hadoop)의 구성요소

  ​[이응수의 IT노트] 하둡(Hadoop)의 구성요소   ​안녕하세요. 중앙HTA 이응수 강사입니다. 오늘 이응수의 IT노트에서는 하둡의 구성요소를 살펴보도록 하겠습니다.  하둡은 개인의 개발 PC에 테스트 목적으로 설치할 수도 있고, 네트워크상의 서로 다른 서버를 클러스터로 구성해서 설치할 수도 있습니다. 하둡의 설치가 완료되면, 빅데이터를 저장하고, 분석하기 위해서 하둡을 실행하게 되는데, "하둡을 실행한다"라는 의미는여러 개의 데몬(deamon)을 실행하는 것을 말합니다. ​​이 데몬들은 각각 특별한 역할을 수행하는데 하나의 컴퓨터에 모든 데몬이 실행될 수 도 있고, 클러스터로 구성된 환경에서는 네트워크상의 서로 다른 서버에서 실행될 수 도 있습니다. 하둡의 데몬에는 NameNode, DataNode, SecondaryNameNode, JobTracker, TaskTracker 등이 있습니다.  ​하둡은 분산 저장과 분산 연산을 수행하기 위해서 master/slave 구조를 가지고 있습니다. 이런 분산저장시스템을 하둡 파일 시스템(Hadoop File System) 또는 HDFS라고 부릅니다. 하둡은 보통 master 역할을 수행하는 한 대의 NameNode와 slave 역할을 하는 여러 대의 DateNode로 구성됩니다. ​HDFS에서 master 역할을 수행하는 NameNode는 slave인 DateNode에게 읽기/쓰기 작업을 지시하고, HDFS(하둡파일시스템)의 모든 정보를 관리합니다. HDFS에서 파일을 저장하는 방식은 일반적인 파일저장방식과는 차이가 있습니다. HDFS는 파일을 블록 단위로 나누어서 저장합니다. 하나의 블록 크기는 보통 128MB입니다. 크기가 큰 파일은 여러 개의 블록으로 나뉘고 각각의 블록은 여러 DateNode에 흩어져서 저장됩니다. 따라서, 어떤 DataNode가 어떤 블록을 저장하고 있는지 등의 정보를 관리할 필요가 있는데, NameNode가 그 정보를 가지고 있습니다. ​HDFS에서 NameNode와 DataNode가 파일의 블록단위로 나누어서 저장하는 일반적인 모습은 아래와 같습니다. ​    위의 그림처럼 NameNode는 파일의 메타데이터(디렉토리명, 파일명, 복제본 수, 블록의 위치정보)를 저장하고, 파일은 여러 개의 블록으로 나누어져서 여러 대의 DateNode에 블록단위로 저장됩니다. 그림에서 각 블록은 3개의 복사본을 가지게 됩니다. 이로 인해 하나의 DataNode에 장애가 생겨도 사용자는 장애없이 계속 파일을 읽을 수 있게 됩니다. 위의 그림처럼 하둡에서 NameNode는 복수 개 구성되지 않습니다.그래서 하둡클러스터에서 NameNode는 단일장애지점이 됩니다. NameNode에 장애가 생기면 하둡 클러스터의 어떤 파일에도 접근할 수 없게 됩니다.  하둡의 slave노드에는 DataNode 데몬이 존재합니다. DataNode는 사용자가 하둡파일시스템에 파일을 읽거나 쓸때, 이 파일들을 블록단위로 나누어서 저장하거나, 읽는 단순한 기능을 수행합니다. 클라이언트가 하둡파일시스템에서 파일을 읽거나 쓸때 NameNode는 그 파일의 블록이 어느 DataNode에 있는지 클라이언트에게 알려줍니다. 클라이언트는 블록을 읽기위해서 DataNode와 직접 통신해서 파일을 읽거나 씁니다. DataNode는 주기적으로 heartbeat와 자신이 가지고 있는 블록정보를 NameNode로 보고합니다. NameNode는 그 정보를 바탕으로 DataNode의 상태와 블록정보를 관리합니다.  SecondaryNameNode(SNN)는 NameNode의 백업서버가 아닙니다. NameNode는 HDFS의 메타데이터를 메모리에서 처리합니다. HDFS는 메모리에서 처리되는 HDFS의 메타데이터가 유실되지 않게 하기 위해서 editslog와 fsimage 파일을 사용합니다. editslog는 HDFS의 모든 변경이력을 저장하고, fsimage는 메모리에 저장된 메타데이터를 파일시스템이지로 저장한 파일입니다. NameNode가 초기화될 때 fsimage를 메모리로 로딩해서 새로운 메타데이터 파일시스템 이미지를 생성하고, 파일시스템 이미지에 editslog의 변경이력을 적용합니다. ​이때 editslog의 파일 사이즈가 너무 크면 파일시스템 이미지 갱신에 많은 시간이 소요되게 되고, 이 시간동안 HDFS를 대상으로 읽기 쓰기 작업을 할 수 없게됩니다. SNN은 NameNode의 editslog와 fsimage를 다운받아서 fsimage를 갱신하는 역할을 대신 수행하는 데몬입니다. SNN이 fsimage를 갱신하는 과정을 체크포인팅이라고 하고, 체크포인팅은 1시간 마다 주기적으로 일어납니다.  하둡은 데이터의 저장과 관련해서 master/slave구조의 NameNode, DataNode로 구성되어 있는 것과 마찬가지로 데이터의 연산처리과 관련된 데몬도 master/slave 구조를 가지고 있습니다. JobTracker 데몬은 master 역할을 수행하고, TaskTracker는 slave 역할을 수행합니다. JobTracker는 master로서 사용자가 제출한 MapReduce 애플리케이션의 전체 실행을 감독합니다. ​사용자가 MapReduce 애플리케이션을 하둡에 제출하면 JobTracker는 여러 가지 실행계획을 결정하고, 클러스터의 여러 노드에 task를 할당합니다. 여기서 Task는 사용자가 제출한 MapReduce 애플리케이션을 HDFS에서 병렬처리가 가능하도록 분할한 처리단위입니다. JobTracker는 실행되는 모든 Task를 모니터링하고, Task가 실패하면 자동으로 실패한 Task를 실행합니다. 하둡 클러스터에서 하나의 JobTracker 데몬만 존재합니다. JobTracker와 TaskTracker의 관계는 아래 그림과 같습니다.         각 TaskTracker는 각 salve 노드에 할당된 작업의 실행을 담당합니다. 각각의 TaskTracker는 JobTracker가 할당한 개별작업을 실행합니다. 각 slave노드에는 TaskTracker가 하나만 존재하지만, 여러 개의 JVM을 생성해서 다수의 map작업과 reduce작업을 병렬처리할 수 있습니다. TaskTracker는 JobTraker에게 주기적으로 heartbeat를 전송합니다.JobTracker는 TaskTracker로부터 정해진 주기내에 heartbeat가 도착하지 않으면 해당 TaskTracker에 문제가 발생했다고 간주하고, 해당 작업을 하둡 클러스터 내에 위치한 다른 노드에 할당합니다.  지금까지 하둡의 구성요소들과 하둡클러스터의 구조를 간단히 살펴보았습니다. NameNode와 DataNode 데몬은 HDFS에 데이터를 읽고 쓰는 작업과 관련된 데몬 프로그램이고, JobTracker와 TaskTracker는 하둡 클러스터에서 MapReduce 애플리케이션의 병렬처리를 지원하는 데몬 프로그램이라고 할 수 있습니다. ​ 이상 하둡(Hadoop)의 구성요소를 마치도록 하겠습니다.다음에는 MapReduce 프레임워크에 대해서 알아보겠습니다. 어느덧 2017년 9월도 얼마 남지 않았네요.마무리 잘하시고 즐거운 추석 연휴 보내시기 바랍니다.​감사합니다.        <저작권자(c)중앙에이치티에이(주). 무단전재-재배포금지>

2017-09-19

썸네일

[이응수강사의 IT노트] 하둡 (Hadoop) 개발환경 설치 방법

[이응수강사의 IT노트] 하둡 (Hadoop) 개발환경 설치 방법  안녕하세요. 중앙HTA 이응수 강사입니다. 이번 이응수의 IT노트에서는 하둡(Hadoop) 분산환경의 데이터 처리 방식과 하둡(Hadoop) 개발환경 설치과정을 설명하도록 하겠습니다. 먼저 간단하게 하둡(Hadoop)에 대해서 알아보도록 하겠습니다.하둡(Hadoop)은 대용량 데이터를 처리하는 분산 응용 프로그램을 작성하고 실행시키기 위한 오프소스 프레임워크입니다. 하둡(Hadoop)의 장점으로는 다른 분산 컴퓨팅 시스템에 비해서 접근성, 견고성, 확장가능성이 매우 뛰어납니다. 하둡(Hadoop)은 윈도우 PC와 같은 범용 컴퓨터들로 큰 규모의 클러스터 환경을 쉽게 구성할 수 있고, 하드웨어의 빈번한 고장을 가정하고 설계되었기 때문에 하드웨어 고장 발생시 적절한 대응을 할 수 있습니다. 하둡(Hadoop)은 단순히 컴퓨터를 추가함으로써 클러스터 규모를 선형적으로 확장할 수 있고, 분산환경에서 실행되는 병렬코드를 간단하고 빠르게 작성할 수 있습니다. 하둡(Hadoop)의 이런 특징은 초보자도 빠르고 저렴한 비용으로 하둡 클러스터를 쉽게 구성하고, 분산 컴퓨팅 환경에서 실행되는 프로그램을 작성하고 실행해볼 수 있게 합니다. 일반 사용자가 하둡 클러스터와 어떤 식으로 상호작용하는지는 아래의 그림으로 나타낼 수 있습니다. 하둡 클러스터는 네크워크로 연결된 범용 컴퓨터들의 집합체입니다. 데이터의 저장과 처리는 모두 하둡 클러스터 내에서 이루어집니다. 사용자들은 개인 컴퓨터를 통해서 필요로 하는 연산 작업을 하둡 클러스터에 요청하기만 하면 됩니다.  다음으로 하둡 클러스터 내에서 어떻게 데이터를 처리하는지를 설명하겠습니다. 하둡(Hadoop)의 데이터 처리 모델은 MapReduce 프레임워크입니다. MapReduce 프레임워크를 사용해서 데이터를 처리하는 응용프로그램을 작성하면 확장성, 병렬성, 내고장성과 같은 일은 하둡(Hadoop)이 모두 알아서 처리해 주기 때문에 사용자는 데이터를 처리하는 로직의 구현에만 집중하면 됩니다. MapReduce 프레임워크는 크게 매핑(mapping)과 리듀싱(reducing)의 두 단계로 나누어서 처리됩니다.각각의 단계는 mapper와 reducer라는 데이터 처리 메소드로 정의되어 있습니다. mapper는 입력데이터를 필터링하고 reducer가 처리할 수 있는 형태로 데이터를 변형합니다. reducer는 mapper로부터 데이터를 받아서 데이터를 통합하는 작업을 수행합니다. 매핑과 리듀싱은 데이터를 처리할 때 많은 프로그램에서 공통적으로 발견되는 특징을 모델링한 것입니다. 그리고 분산 컴퓨터 환경에서는 여러 대의 컴퓨터를 사용해서 입력데이터를 필터링하고 변형하는 매핑 단계를 수행한 후에 그 결과값을 reducer함수에게 전달하는 과정에서 특별한 처리가 필요합니다. 리듀싱 단계에서 각 컴퓨터들이 독립적으로 작업을 처리하기 위해서는 적절한 크기로 데이터가 분할되어 각 컴퓨터로 전달되어야 합니다. 이 과정을 셔플링(suffling)이라고 합니다. 셔플링 단계에서는 mapper의 출력 데이터를 파티셔닝(partitioning)과 정렬(sorting)을 활용해서 reducer함수의 입력 데이터로 전달합니다. 셔플링과 파티셔닝은 모든 MapReduce 프로그램에서 공통적으로 사용되는 일반적인 단계이기 때문에 하둡의 MapReduce 프레임워크에서는 대부분의 상황에서 사용할 수 있는 기본 기능을 제공하고 있습니다. MapReduce는 위에서 설명한 매핑, 리듀싱, 파티셔닝, 셔플링 단계가 적절하게 동작하게 하기 위해서 특별한 데이터 구조를 사용합니다. MapReduce는 키와 값의 한 쌍으로 구성된 리스트를 데이터의 기본 단위로 사용합니다. MapReduce 프레임워크의 매핑단계와 리듀싱단계의 입력과 출력데이터의 형식은 아래와 같습니다.  입력출력map<k1, v1>list(k2, v2)reduce<k2, list(v2)>list(k3, v3)   그럼, 간단한 단어세기 예제를 통해서 하둡의 MapReduce 프레임워크의 데이터 흐름을 살펴보도록 하겠습니다. 이 예제에서 데이터는 텍스트를 포함하고 있는 파일입니다. 각 단계의 입력데이터는 반드시 키와 값으로 구성되어 있어야 합니다. mapper에 있는 map함수는 키/값(<k1, v1>)으로 이루어진 입력데이터를 전달받아서 하나씩 처리합니다.보통 k1은 파일의 행번호이고, v1은 각 행의 레코드입니다. map함수는 각각의 <k1, v1>을 <k2, v2>형태로 변환합니다. 이 예제에서는 레코드를 공백단위로 잘라서 <word, count>로 변환합니다. 셔플링 단계에서는 mapper의 처리결과를 k2의 값이 같은 경우, 새로운 <k2, list(v2)>의 형태로 가공해서 reducer에 전달합니다. 이 예제에서는 world 단어가 2번 나오는 경우 <world, list(1, 1)>과 같은 형대로 구성됩니다. reducer에 있는 reduce함수는 <k2, list(v2)>의 형태로 전달받은 입력데이터를 집계해서 <k3, v3>의 형태로 출력하는데, 이 예제에서는 <world, list(1, 1)>을 <world, 3>의 형태로 집계해서 파일에 기록합니다. 단어세기 예제에서 살펴본 것처럼 사용자는 데이터 처리에 적합한 형태로 입력데이터를 변형하는 맵함수를 정의하면 MapReduce 프레임워크는 셔플링과 파티셔닝을 사용해서 맵함수의 출력데이터를 정렬하고 병합해서 리듀스 함수로 전달합니다. 리듀스 함수에서는 key별로 병합된 입력데이터를 전달받아서 실질적인 데이터 분석을 수행하는 작업을 구현하면 됩니다.       이번에는 하둡 개발환경의 설치과정을 설명하도록 하겠습니다. 하둡은 독립실행 모드, 가상분산 모드, 완전분산모드 3가지의 실행모드를 가지고 있습니다. 독립실행모드는 하둡의 기본 모드입니다. 하둡 환경설정파일에 아무런 설정하지 않고 실행하면 로컬 장비에서만 실행되는 독립실행 모드가 됩니다. 하둡에서 제공하는 여러 데몬들이 실행되지 않기 때문에 분산환경을 고려한 테스트가 불가능합니다. 가상분산 모드는 한 대의 컴퓨터로 클러스터를 구성하는 것입니다. 하둡의 모든 데몬이 한 대의 컴퓨터에서 실행됩니다. 일반적으로 하둡을 처음으로 공부하는 사람들이 MapReduce 프로그램을 작성하고 테스트해보기 위해서 가상분산 모드로 하둡 개발환경을 구성합니다. 완전분산 모드는 여러 대의 장비로 하둡 클러스터를 구성하는 것입니다. 하둡으로 실제 서비스를 하게 될 경우 완전분산 모드로 구성하게 됩니다. 이번 과정에서 가상분산 모드로 하둡환경을 구성하는 경우에 대한 설명을 하도록 하겠습니다.  하둡은 리눅스 및 다양한 유닉스 계열 운영체제에 설치할 수 있습니다. 윈도우를 사용하는 경우 오라클 VirtualBox를 설치해서 리눅스 가상머신 환경을 구성하도록 합니다. 이번 과정에서는 VirtualBox에 우분투 16.04.3을 설치한 후 하둡을 설치하는 과정을 설명하도록 하겠습니다. VirtualBox의 설치과정과 우분투 설치과정은 아래의 url을 참고하시기 바랍니다. VirtualBox 설치방법 : https://extrememanual.net/7184 VirtualBox에 우분투 설치방법 : https://extrememanual.net/7223  우분투를 포함한 데비안 계열 리눅스는 apt-get(Advanced Packing Tool)이라는 패키지 관리 도구를 제공합니다. apt-get를 활용해서 개발과 관련된 패키지를 설치할 수 있다.  하둡을 설치하기 위해서는 먼저 자바가 설치되어 있어야 합니다. # apt-get으로 패키지 인덱스 정보를 업데이트 합니다. # openjdk를 설치합니다. # 설치된 자바 버전을 확인합니다. # JAVA_HOME을 .bashrc 파일에 등록하도록 하겠습니다. # .bashrc파일의 끝에 JAVA_HOME 환경변수를 추가합니다.    # javac에 대한 절대경로를 설치된 openjdk의 javac로 설정합니다. 다음으로 하둡 사용자 계정을 생성하도록 합니다.# 하둡 사용자 계정을 위한 그룹(hadoop) 생성하겠습니다. # 하둡 사용자(hduser)를 생성하고 hadoop 그룹에 추가합니다.      # 생성된 하둡계정이 sudo 명령어를 실행할 수 있도록 합니다.  다음은 SSH패키지 설치 및 관련 설정을 하겠습니다. 하둡은 클러스터를 구축할 때 master노드와 slave노드로 구성하게 됩니다. master노드는 클러스터에 위치한 slave노드에 접근해서 하둡의 데몬을 실행시켜야 하는데 이러한 접근을 위해서 SSH를 이용합니다. SSH는 표준 공개키 암호화를 이용해서 한 쌍의 키를 생성합니다. 이 키는 사용자를 확인하는데 사용됩니다. # SSH 패키지를 설치합니다.    # 암호를 입력하지 않아도 로그인할 수 있도록 다음과 같이 빈 암호를 가진 SSH키를 생성합니다.      # 생성된 id_rsa.pub 파일을 authorized_keys 파일에 추가합니다.   # SSH를 이용해서 접속할 수 있는지 확인해봅니다.  자바와 SSH설치가 완료되었으면 하둡을 설치하도록 하겠습니다. 본 과정에서는 hadoop-1.2버전을 설치해보도록 하겠습니다. # wget을 이용해서 하둡을 다운받습니다.    # 다운받은 하둡파일을 현재 디렉토리에 압축 해제합니다.   # /usr/local 디렉토리에 hadoop 디렉토리를 생성합니다. # 위에서 압축 해제한 하둡파일을 /usr/local/hadoop 디렉토리로 이동시키고, 디렉토리에 대한 접근권한을 변경합니다. 하둡 파일 설치가 완료되었으면 가상분산모드로 동작하도록 하둡환경파일에 설정정보를 추가해보겠습니다. 하둡 환경설정파일은 하둡설치경로/conf 폴더에 있습니다. 하둡환경 설정 파일은 hadoop-env.sh, core-site.xml, hdfs-site.xml, mapred-site.xml 파일을 수정해야 합니다. hadoop-env.sh는 하둡을 실행하는 셜스크립트에서 필요한 환경변수를 설정합니다. 이 파일에는 JDK 경로등을 설정합니다. core-site.xml은 hdfs와 맵리듀스에서 공통적을 사용할 환경정보를 설정합니다. hdfs-site.xml은 hdfs에서 사용할 환경 정보를 설정합니다. mapred-site.xml은 맵리듀스에서 사용할 환경 정보를 설정합니다.  # hadoop-env.sh에 JDK 설치경로를 추가합니다.    # core-site.xml에 네임노드 주소와 하둡에서 발생하는 임시 데이터를 저장하는 디렉토리를 설정합니다. # 디렉토리는 미리 생성되어 있어야 합니다.  # hdfs-site.xml에 복제본 갯수를 설정합니다.  # mapred-site.xml에 잡트래커 데몬의 주소를 설정합니다. 하둡 환경설정파일의 수정이 완료되면 하둡 네임노드를 초기화합니다. # 하둡 네임노드를 포맷합니다.     하둡 데몬을 실행시키고, 하둡 데몬이 정상적으로 실행되었는지 확인하면 하둡 설치가 완료됩니다. # 하둡 데몬을 실행합니다. # 모든 하둡데몬이 정상적으로 실행되었는지 확인합니다. 네임노드, 보조네임노드, 잡트래커, 데이터노드, 태스크트래커가 정상적으로 실행중인 것을 확인할 수 있습니다. 이것으로 하둡의 가상분산모드 설치가 완료되었습니다. # 모든 하둡 데몬의 종료는 stop-all.sh를 실행하면 됩니다.    설치과정에서 등장하는 하둡의 구성요소들은 다음 글에서 자세히 설명하도록 하겠습니다. 그럼 더운 날씨에 모두들 건강 조심하세요!  <저작권자(c)중앙에이치티에이(주). 무단전재-재배포금지>

2017-08-18

썸네일

[이응수의 IT노트] 빅데이터의 3대요소와 하둡 프로그래밍이란?

 [이응수의 IT노트] 빅데이터의 3대요소와 하둡 프로그래밍이란? 안녕하세요. 중앙HTA의 이응수 강사입니다.오늘부터 빅데이터를 주제로 IT노트를 한장한장 만들어가려고 합니다.평소에 빅데이터에 관심이 많으신 분들의 많은 관심 부탁드립니다. ^^​먼저 빅데이터가 무엇인지 먼저 알아보도록 하겠습니다.1. 빅데이터란? 빅데이터는 기존의 데이터베이스 관리도구를 사용해서 데이터를 수집, 저장, 관리, 분석할 수 있는 역량을 넘어서는 데이터를 말하기도 하고, ​다양한 종류의 데이터로부터 저렴한 비용으로 가치가 있는 정보를 추출하기 위해서 데이터의 수집, 저장, 분석을 지원하는 차세대 기술 및 아키텍처를 말하기도 합니다. 빅데이터를 이해하기 위해서는 빅데이터의 3대 요소에 대해서 알아볼 필요가 있습니다. 아래 그림은 빅데이터의 3대요소를 나타냅니다.​  빅데이터의 3대 요소는 Volume(양), Velocity(속도), Variety(다양성)입니다. ​빅데이터의 3대 요소 중 두 가지 이상만 충족한다면 빅데이터라고 볼 수 있습니다. ​(1) Volume(양)빅데이터는 일반적으로 수십 테라바이트(terabyte) 혹은 수십 페타바이트(petabyte) 이상의 크기를 가집니다. ​기존의 데이터베이스는 이런 대용량의 데이터를 소화하기 힘들기 때문에 확장가능한 분산형 파일시스템을 이용해서 데이터를 저장하고, ​분석하는 컴퓨팅 기법이 필요합니다. 대표적인 기술로 구글의 GFS(Google File System), 아파치 하둡 등이 있습니다. (2) Velocity(속도)빅데이터를 속도 측면에서 접근한 것이 Velocity다. 데이터가 생성되고, 저장되며, 시각화되는 과정이 얼마나 빨리 이루어져야 하는지에 대한 정의입니다.​데이터의 처리방식은 실시간 처리방식과 배치처리 방식으로 나눌 수 있습니다. 수집되는 데이터의 특성에 다양한 수집방법, 분석, 시각화 기술을 사용할 수 있습니다. (3) Variety(다양성)빅데이터는 다양한 종류의 데이터로 구성될 수 있습니다. ​데이터의 종류는 크게 정형화 정도에 따라서 정형 데이터, 반정형 데이터, 비정형 데이터로 나눌 수 있습니다. ​정형 데이터는 고정된 필드에 저장되는 데이터를 의미하며, 데이터베이스에 저장할 수 있는 데이터들이 정형 데이터에 해당됩니다. ​반정형 데이터는 XML, HTML, 로그처럼 고정된 필드는 없지만, 일정한 규칙을 가지고 있는 데이터가 해당됩니다. ​비정형 데이터는 고정된 형식이 없는 데이터를 의미하며, sns나 유투브에 올린 사진과 오디오 데이터들이 이에 해당됩니다. ​빅데이터는 이런 비정형 데이터도 처리할 수 있는 능력을 가지고 있어야 합니다. 2. 하둡하둡은 대용량 데이터를 병렬 분산 처리할 수 있는 자바 기반의 오픈소스 소프트웨어 입니다.​하둡은 분산 파일 시스템인 HDFS(Hadoop Distributed File System)에 데이터를 저장하고, 분산 처리 시스템인 MapReduce로 데이터를 분석합니다. ​하둡은 10 ~ 1000대의 서버로 하나의 클러스터를 구성하여 대용량의 데이터를 저장하고 처리하는 것도 가능합니다. 하둡은 자바 기반으로 개발되었기 때문에 하둡을 설치/운용하기 위해서 특별한 서버나 장비가 필요하지 않습니다. ​하둡은 클러스터를 구성하는 서버 대수를 추가하기만 하면 저장 용량을 확장하거나 분산 처리 성능을 향상시킬 수 있는 스케일 아웃(Scale-out)을 지원합니다. 관계형 데이터베이스가 낮은 대기 시간으로 작은 데이터 셋을 처리하는 것이 목표라면, 하둡은 대용량의 데이터를 대상으로 일괄 처리를 실행한다.  하둡은 아파치 소프트웨어 재단의 최상위 프로젝트 중 하나입니다. ​대규모 데이터 처리를 필요로 하는 많은 개발자들이 개발에 직접 참여하고 있어서 계속 발전하고 있습니다. ​3. 하둡 에코 시스템 하둡 코어 프로젝트는 분산 데이터 저장을 지원하는 HDFS와 데이터 분석처리를 지원하는MapReduce입니다.​하둡의 코어 프로젝트를 지원하는 다양한 서브 프로젝트가 제공되는데, 이를 하둡 에코시스템이라고 합니다. ​하둡 에코시스템은 아래 그림과 같이 다양한 프로젝트로 구성되어 있습니다.​ ​​(1) ​Zoo keeper는 분산 코디네이터입니다. 분산환경에서 서버사이의 상호작용이 필요한 서비스를 제공하고, 하나의 서버에만 서비스가 집중되지 않게 하며, ​​하나의 서버에서 처리한 결과를 다른 서버와 동기화 시킵니다. ​Zoo keeper는 운영서버에 문제가 발생했을 때 대기중인 다른 서버를 운영서버로 전환시켜서 서비스가 지속되도록 하며, 분산환경을 구성하는 환경설정정보를 통합적으로 관리할 수 있게 합니다.​​(2) Oozie는 워크플로우 관리를 지원하는 자바 웹 애플리케이션입니다. MapReduce 작업이나 Pig 작업으로 구성된 워크플로우를 제어합니다.​​(3) Hbase는 HDFS에서 운용되는 컬럼기반 데이터베이스입니다. 실시간 랜덤조회 및 업데이트가 가능하고, 각 프로세스는 데이트를 비동기적으로 업데이트할 수 있습니다.​(4) Pig는 분산 데이터를 처리하는 복잡한 MapReduce 프로그램을 대체하는 피그라틴(Pig Latin)이라는 자체 언어를 제공합니다. 피그라틴은 MapReduce API를 매우 단순화시킨 SQL과 유사한 형태의 언어입니다.​(5) Hive는 하둡 기반의 데이터 웨어아우징 솔루션입니다. SQL과 매우 유사한 HiveSQ 쿼리 언어를 제공합니다. HiveQL를 이용하면 자바를 다룰 줄 모르는 데이터 분석가도 HDFS에 저장된 데이터를 분석할 수 있습니다. HiveQL은 내부적으로 MapReduce Job으로 변환되어 실행됩니다.​(6) Mahout은 하둡기반의 데이터 마이닝 알고리즘을 구현한 오픈소스 프로젝트입니다. 다양한 기계학습 라이브러리를 제공하며, 비즈니스 환경에 맞게 최적화해서 사용할 수 있습니다.​(7) HCatalog는 하둡으로 생성한 데이터를 공유할 수 있는 테이블 및 스토리지 공유 서비스를 제공합니다. 하둡 에코시스템사이의 데이터모델 공유를 지원하기 때문에 상호운영성이 향상됩니다. Hive에서 생성한 테이블이나 데이터모델을 Pig나 MapReduce에서 쉽게 이용할 수 있게 합니다.​​(8) Avro는 RPC(Remote Procedure Call)와 데이터 직렬화를 지원하는 프레임워크입니다. JSON을 이용해서 언어 중립적 스키마을 정의합니다. 한 언어로 직렬화된 데이터를 다른 언어에서 읽을 수 있게 합니다.​(9) Chukwa는 분산환경에서 생성되는 데이터를 HDFS에 안정적으로 저장하는 플랫폼입니다. 분산된 각 서버에 에이전트를 실행하고, 콜렉터가 에이전트로부터 데이터를 받아서 HDFS에 저장합니다. ​​(10) Flume은 Chukwa와 유사합니다. Flume은 전체 데이터 흐름을 관리하는 마스터 서버가 있기 때문에 데이터를 어디서 수집하고, 어떤 방식으로 전송하고, 어디에 저장할 것인지를 동적으로 변경할 수 있습니다.​(11) Scribe는 페이스북에서 개발한 데이터 수집 플랫폼입니다. 데이터를 중앙 집중 서버로 전송하는 방식입니다. 최종 데이터는 HDFS 외에 다양한 저장소에서 활용할 수 있습니다.​(12) Sqoop은 대용량 데이터 전송 솔루션입니다. HDFS, RDBMS, NoSQL 등과 같은 다양한 저장소에 대용량 데이터를 신속하게 전송하는 방법을 제공합니다.(13) Hiho도 Sqoop와 유사한 데이터 전송 솔루션입니다. 하둡에서 데이터를 가져오기 위한 SQL을 지정할 수 있으며, JDBC 인터페이스를 지원합니다. ​(14) Impala는 하둡기반의 분산 쿼리 엔진입니다. 데이터 조회를 위한 인터페이스로 HiveQL를 사용하며, 수초 내에 질의결과를 확인할 수 있습니다.​(15) Tajo는 하둡기반의 데이터 웨어하우스 시스템입니다. MapReduce가 아닌 자체 분산처리 엔진을 사용하며 표준 SQL을 지원합니다. ​(16) HDFS, AWS S3, Hbase, DBMS 등에 저장된 데이터를 표준 SQL로 조회할 수 있고, 다른 종류의 저장소 간의 데이터 조인처리가 가능합니다.​​하둡은 위와 같이 코어프로젝트와 다양한 서브 프로젝트가 존재합니다. 이를 하둡 생태계라고 부르기도 합니다.​다음에는 하둡 서버를 설치하는 방식을 알려드리고, HDFS 아키텍처를 살펴보도록 하겠습니다. 그럼 더운데 수고하시고 좋은 하루 보내세요 ^^​  저작권자(c)중앙에이치티에이(주). 무단전재-재배포금지> 

2017-07-18

썸네일

[송규남의 IT 다이어리] 제이쿼리(jQuery) 열여섯번째 이야기

​[제이쿼리 모바일(jQuery Mobile) 웹 페이지 만들기 두번째이야기]​​​안녕하세요?    중앙HTA강사 송규남 입니다.  이번 강좌에서는 지난 강좌에 이어 계속 jQuery Mobile(제이쿼리 모바일) 에 대해서 알아보겠습니다.     먼저 지난 시간처럼 예제를 만들기 위한 sample1 이란 이름의 폴더를 하나 만들고 sample1폴더안에  css폴더와 js폴더를 만듭니다.  css폴더 에 jquery.mobile-1.4.5.min.css 파일을 넣고,  압축 푼 폴더에 있는  images파일(이미지파일)도 css폴더 안에 넣습니다. js폴더 에는 jquery.mobile-1.4.5.min.js파일 과  jquery.js파일 을 넣습니다.     해당 폴더 안에 test1.html파일 을 만듭니다.  ​디렉토리 구조는 아래와 같습니다.     ​     ​이번 예제는 메뉴를 클릭하면 다음 페이지로 전환이 될 때 다이얼로그형태로 변환되어 페이지가 보이도록 해보겠습니다.   아래와 같은 코드를 작성합니다. ​​    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <style type="text/css">     #bb{top:500px; left:10px;position:fixed;z-index: 999; } </style> <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css"> <script src="http://code.jquery.com/jquery-1.12.1.min.js"></script> <script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="page1" >     <div data-role="header">         <h1>우리우리 동물병원</h1>     </div>     <div role="main" class="ui-content" >         <div style="z-index: 555">             <p><img src="images/6.png"></p>             <a href="#page2" data-rel="dialog"             data-transition="flip" class="ui-btn">애완견정보</a>             <a href="#menupanel" class="ui-btn">메뉴보기</a>                 </div>     </div>     <div id="bb">         </div>     <div data-role="footer" data-position="fixed" style="z-index:100">         <p>찾아오시는길:서울시 종로구 xxx</p>     </div> </div> <div id="page2" data-role="page">     <div data-role="header">         <h3>애완견 이미지</h3>     </div>     <div data-role="main" class="ui-content">         <div>             <img src="images/3.png">             <img src="images/4.png">             <img src="images/5.png">         </div>     </div> </div> </body> </html>     위의 코드 중에 아래의 화살표 부분에 해당하는 코드 data-rel="dialog" 속성을 설정하면 a태그에  링크된 page가 보일 때 다이얼로그 형태로 보이게 됩니다. ​ ​  <div role="main" class="ui-content" >    <div style="z-index: 555">       <p><img src="images/6.png"></p>     <a href="#page2" data-rel="dialog"   <--- 요부분                  data-transition="flip" class="ui-btn">애완견정보</a>             <a href="#menupanel" class="ui-btn">메뉴보기</a>         </div> </div>   ​​[실 행 결 과]             -메뉴를 클릭하면 다이얼로그형태로 출력된다. ​           ​- 여기에 패널을 삽입하는 코드를 추가해 보겠습니다.   - ​패널은 숨어있다가 왼쪽이나 오른쪽에서 밀듯이 나타나는 영역인데요 스마트폰 처럼 화면이 작은 장비에서      메뉴 등을 보여줄 때 많이 사용하는 방법입니다. ​​- ​html파일에 아래처럼 패널로 보이기 위한 메뉴를 작성합니다.        ​​ - 패널은 data-role="panel" 로 지정해서 만들어 주며 header나 main이 아닌 영역에 만들어 줍니다.     data-display 속성을 이용해서 화면에 드러날 때 어떤 방식으로 나타나는지를 정해 줍니다.    "overlay"는 겹쳐져서 보이게 되는 옵션입니다.  ​- ​자 코드를 작성 후 실행해 보시면 메뉴보기 버튼을 누르면 아래와 같이 패널 나타나는 것을 볼 수 있습니다​  ​     ​​ - ​그런데 우리가 테스트를 웹 브라우저를 통해서 하기 때문에 스마트폰에서는 화면이 어떻게 보여지는지 확인하기가  어렵지요? 그래서 저는 크롬에서 Ripple emulator이라는 확장프로그램을 설치했습니다.   Ripple emulator을 설치하면 스마트폰 기종에 따라  어떻게 화면에 보이지는 간단하게 테스트해볼 수 있습니다.   - 크롬 웹스토어 페이지에 접속합니다.   ​​https://chrome.google.com/webstore/       ​ - Ripple emulator를 검색 후 설치합니다.        ​  설치하면 크롬 브라우저에 아래와 같은 아이콘이 생기고 모바일(Mobile)로 보여질 페이지에서 enable을 클릭하면  ​모바일(Mobile) 페이지로 실행해서 볼 수 있습니다.             jQuery Mobile(제이쿼리 모바일) 에 관련된 부분은    http://jquerymobile.com/demos/   사이트에  관련 예제들이 많으니 ​보고 하나하나 따라 해보시면 큰 어려움을 없을 거라고 생각됩니다.         이번 강좌를 마지막으로 jQuery(제이쿼리)강좌 는 모두 마치겠습니다.         ​  ​​ 감사합니다!    저작권자(c)중앙에이치티에이(주). 무단전재-재배포금지>​

2017-04-03

썸네일

[송규남의 IT 다이어리] 제이쿼리(jQuery) 열다섯번째 이야기

[제이쿼리 모바일(jQuery Mobile) 웹 페이지 만들기]      안녕하세요?  중앙HTA 강사 송규남입니다. ​    이번 시간에는 jQuery Mobile(제이쿼리 모바일)에 대해서 알아보겠습니다. ​ 우리가 스마트폰으로 인터넷사이트에 접속하면 화면이 데스크 탑보다 작기 때문에 보기가 힘든 부분이 있거나 마우스로   클릭하면 어렵지 않지만 손가락으로 터치해서 선택하려면 radio button이나 checkbox같은 경우 힘들 수 있습니다.   jQuery(제이쿼리)에서는 모바일 웹 페이지를 만들기 위한 여러 가지 좋은 기능들을 담고 있는   자바스크립트(javascript) 라이브러리 입니다.  jQuery(제이쿼리)사이트로 가서 라이브러리를 다운받습니다.     먼저 jquery.js파일은 존재해야 하고 http://jquerymobile.com/ 사이트로 접속하여 하고 jquery-mobile.js파일을 추가로 받습니다.             http://jquerymobile.com 사이트에서 위 그림의 화살표에 해당하는 버튼을 클릭하여 파일을 다운로드 받아 압축을 풉니다.  압축 푼 폴더에 jquery.mobile-1.4.5.min.js 파일과 폴더에 jquery.mobile-1.4.5.min.css 파일을 이용하여   jQuery Mobile(제이쿼리 모바일)페이지를 만들 수 있습니다.     예제를 만들기 위한 샘플(sample) 이란 이름의 폴더를 하나 만들고 샘플(sample)폴더 안에 css폴더와 js폴더를 만듭니다.   css폴더에 jquery.mobile-1.4.5.min.css 파일을 넣고 압축 푼 폴더에 있는 이미지(images)파일도 css폴더 안에 넣습니다.   js폴더에는 jquery.mobile-1.4.5.min.js파일과 jquery.js파일을 넣습니다.    디렉토리 구조는 아래와 같습니다.             jQuery mobile(제이쿼리 모바일)페이지를 만들기 위한 기본 형태는 아래와 같습니다.      ---------------------------------------------------------<!DOCTYPE html> <html> <head>     <title>Page Title</title>     <meta name="viewport" content="width=device-width, initial-scale=1">     <link rel="stylesheet" href="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.css" />     <script src="http://code.jquery.com/jquery-[version].min.js"></script>     <script src="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.js"></script> </head>  <body>     ...content goes here... </body> </html>     ---------------------------------------------------------   우리는 관련 파일을 직접 다운로드 받았으니 아래와 같은 형태의 HTML파일을 작성 후 샘플(sample)폴더 안에 넣습니다.       ---------------------------------------------------------<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" type="text/css"> <script type="text/javascript" src="js/jquery-1.12.4.js"></script> <script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script> <script type="text/javascript">  </script> </head> <body>  </body> </html>   ---------------------------------------------------------==> jQuery Mobile을 위한 css파일과 js파일을 포함해 줍니다. ※주의할건 js파일을 포함할 때 jquery-1.12.4.js 파일이 jquery.mobile-1.4.5.min.js파일보다 먼저 포함해 줘야합니다.      jQuery(제이쿼리) 사이트에 모바일 관련된 데모예제 코드들이 많이 있습니다.  예제코드들을 따라 해보면 쉽게 모바일 페이지를 만들 수 있습니다.            http://jquery.mobile.com/demos 사이트에서 예제들을 살펴봅니다.  jQuery Mobile(제이쿼리 모바일)에서 기본단위는 페이지(page)입니다.  하나의 HTML파일안에 여러 개의 페이지(page)를 만들어 줄 수 있으며 이때 data-role이라는 속성을 사용합니다.  아래와 같이 하나의 페이지(page)는 header영역, content영역, footer영역을 가질 수 있습니다.      ---------------------------------------------------------  <div data-role="page">      <div data-role="header">         <h1>Page Title</h1>     </div><!-- /header영역 -->      <div role="main" class="ui-content">         <p>Page content goes here.</p>     </div><!-- /content 영역-->      <div data-role="footer">         <h4>Page Footer</h4>     </div><!-- /footer 영역--> </div><!-- /page -->   ---------------------------------------------------------   그럼 위의 코드를 HTML파일에 넣어 볼까요?     --------------------------------------------------------- <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" type="text/css"> <script type="text/javascript" src="js/jquery-1.12.4.js"></script> <script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script> <script type="text/javascript">  </script> </head> <body> <div data-role="page">     <div data-role="header">         <h1>Page Title</h1>     </div><!-- /header -->     <div role="main" class="ui-content">         <p>Page content goes here.</p>     </div><!-- /content -->     <div data-role="footer">         <h4>Page Footer</h4>     </div><!-- /footer --> </div><!-- /page --> </body> </html>   ---------------------------------------------------------​    웹 브라우저로 열어보면 아래와 같은 화면이 나오네요.                아래처럼 하나의 HTML파일에 여러 개의 페이지(page)구성도 가능합니다.    ---------------------------------------------------------  <!-- 첫번째페이지 --> <div data-role="page" id="foo">      <div data-role="header">         <h1>Foo</h1>     </div><!-- /header -->      <div role="main" class="ui-content">         <p>I'm first in the source order so I'm shown as the page.</p>         <p>View internal page called <a href="#bar">bar</a></p>     </div><!-- /content -->      <div data-role="footer">         <h4>Page Footer</h4>     </div><!-- /footer --> </div>      ---------------------------------------------------------<!-- 두번째페이지 --> <div data-role="page" id="bar">      <div data-role="header">         <h1>Bar</h1>     </div><!-- /header -->      <div role="main" class="ui-content">         <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>         <p><a href="#foo">Back to foo</a></p>     </div><!-- /content -->      <div data-role="footer">         <h4>Page Footer</h4>     </div><!-- /footer --> </div> </body>   ---------------------------------------------------------   웹브라우저로 실행을 시켜보면 아래와 같은 화면이 나옵니다. 두 개의 페이지(page)가 모두 보이는 것이 아니라  첫 번째 페이지만 화면에 보이게 됩니다.            Bar라는 문자를 누르면 <div data-role="page" id="bar"> 영역이 페이지형태로 보이게 됩니다.           위와 같이 하나의 HTML페이지에 여러 개의 페이지(page)를 구성하고 페이지이동은 아래처럼 a 태그의 href속성에  page의 id속성을 링크해주면 됩니다.       ---------------------------------------------------------<p>View internal page called <a href="#bar">bar</a></p> ... <div data-role="page" id="bar"> ...   ---------------------------------------------------------   이번 강좌에서는 jQuery Mobile(제이쿼리 모바일)을 하기 위한 기본 page작성 방법 에 대해서 알아보았습니다. ​다음 시간에는 모바일 웹에서 사용하기 위한 여러 UI관련 기능들 을 알아보도록 하겠습니다.  저작권자(c)중앙에이치티에이(주). 무단전재-재배포금지>

2017-01-19

썸네일

[송규남의 IT 다이어리] 제이쿼리(jQuery) 열네번째 이야기

안녕하세요?중앙HAT 강사 송규남입니다.지난 강좌에서는 jQuery(제이쿼리)에서 제공하는 UI에 대하여 알아보았는데요.이번 송규남의 다이어리 14번째 이야기는 jQuery(제이쿼리)에서 제공하는 UI중에서 Draggable에 대해서 알아보겠습니다.jQuery(제이쿼리) 사이트에 가시면 아래처럼 Interactions에 Draggable과 Droppable 메뉴가 있습니다.    순수 자바스크립트로 드래그(Draggable) 앤 드롭(Droppable)을 구현하려면 조금 복잡한데요 jQuery UI에서는 쉽게 드래그앤드롭기능을 구현할 수 있습니다.자 그러면 간단하게 드래그(Draggable) 기능을 구현해 보겠습니다.먼저 아래와 같이 html페이지를 만듭니다. ( jquery(제이쿼리) 관련 자바스크립트 파일과 jquery(제이쿼리) ui관련 css파일은 아래와 같지 않더라도 제대로 링크만 잘 걸리도록 해주시면 됩니다. )<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css"><script type="text/javascript" src="js/jquery-1.11.3.min.js"></script><script type="text/javascript" src="js/jquery-ui.min.js"></script><script type="text/javascript">       //$(function(){은 $(document).ready(function(){ 을 축약해서 쓴 형태입니다.      $(function(){            $("#box1").draggable(); //id가 box1인 요소가 드래그(Draggable) 될 수 있도록 합니다.      });</script></head><body><div id="box1" style="width:200px;height: 80px;background: orange;">      <p>나를 드래그하세요</p></div></body></html>실행시킨후 p로 감싸진 문자열을 드래그(Draggable)  해보세요. 아주 간단하게 드래그(Draggable)  기능이 되죠?여기에 좀더 코드를 좀더 추가해 보겠습니다. 아래와 같이 img를 감싸는 div를 하나 추가합니다.   자바스크립트(javascript) 코드에 아래처럼 코드를 추가합니다.​  draggable하면서 옵션을 설정할 수가 있는데 cotainment속성을 사용해서 드래그(Draggable) 영역을 설정할 수 있습니다.옵션에 대한 설명은 아래와 같습니다.      $("#img1").draggable({                 containment:"parent", //부모영역안에서만 드래그가능                 axis:"x", // 드래그 방향(좌우로만 드래그 )                 stop:function(){ //드래그를 멈추면 function수행                      alert("stop!!!!!!!!");                 }             });    실행해보면 이미지는 x방향으로만 이동되고 드래그만 멈추면 경고창이 뜨는 것을 확인할 수 있습니다.자 그럼 드래그(Draggable) 를 이용한 예제를 하나 만들어 보겠습니다.일단 실행된 화면은 아래와 같습니다. 이미지는 총 10개의 이미지이고 좌우로 드래그(Draggable) 가 가능하고 이전이미지와 다음이미지 버튼을 누르면 앞 또는 뒤로 이동할 수 있도록 하겠습니다.   위의 예제를 만들려면 일단 css에 대한 이해가 있어야 하는데요먼저 이미지슬라이드를 감싸는 부모div는 이미지5개가 보일 크기를 갖고 이미지슬라이드는 10개의 이미지가 보여질 크기를 갖습니다.    파란색영역이 부모이고 이미지 슬라이드는 부모영역을 벗어난 크기를 갖게 합니다. 일단 위와 같은 모양의 html페이지를 만듭니다.<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css"><style>      *{margin:0;padding:0}      #slide ul li img{width:185px;height: 240px}      #slide ul li{list-style: none;float:left;}      /* #slide는 이미지 슬라이드로 만들어지며 이미지 10개의 크기를 담을 width 설정.하나의 img가 185px이므로      1850px로 크기 설정 */#slide{width:1850px;height: 240px;position: relative;left:0px;}     /* slidebox는 이미지 5개의 크기를 담을 width 설정. */      #slidebox{width:925px;height: 240px;position: relative;left:200px;      top:40px;border:4px solid blue;}      .bb{width:500px;text-align: center;margin-top:70px;margin-left: 400px;}</style><script type="text/javascript" src="js/jquery-1.11.1.min.js"></script><script type="text/javascript" src="js/jquery-ui.min.js"></script><script type="text/javascript">        $(function(){             $(".bb a").button();//a태그를 버튼으로 만들기        });</script></head><body><div id="slidebox">     <div id="slide">          <ul>               <li><img src="images/slide1.png"></li>               <li><img src="images/slide2.png"></li>                  <li><img src="images/slide3.png"></li>               <li><img src="images/slide4.png"></li>               <li><img src="images/slide5.png"></li>               <li><img src="images/slide6.png"></li>               <li><img src="images/slide7.png"></li>               <li><img src="images/slide8.png"></li>               <li><img src="images/slide9.png"></li>               <li><img src="images/slide10.png"></li>          </ul>     </div></div><div class="bb">            <a href="#" id="btnPrev">이전이미지</a>            <a href="#" id="btnNext">다음이미지</a></div></body></html> 자바스크립트(javascript) 에 아래의 코드를 추가합니다.$(function(){          $(".bb a").button();         //드래그 방향을 x축으로 하고 드래그 가능한 4개의 좌표를            // 설정한다. 좌표는 아래와 같이 지정한다.          // containment:[x1,y1,x2,y2]          $("#slide").draggable({             axis:"x",             containment:[-725,40,200,40]        });      });      여기까지 하면 이미지가 좌우로 드래그(Draggable) 가 됩니다.여기에 버튼을 눌렀을 때 이미지가 움직이도록 코드를 추가합니다. $("#btnPrev").click(function(event){               event.preventDefault();               //left값 얻어오기               var left=parseInt($("#slide").css('left'));               if(left>=0) return;               //현재 위치에 185를 더해서 이전이미지가 보여지도록 합니다.               left += 185;               var pos=Math.floor(left/185.0)*185;//이동할 위치구하기      // // 이미지슬라이드가 우측방향으로 하나의 이미지크기만큼 이동해서 이전이미지가 보입니다.                              $("#slide").animate({"left":pos},1000);              });             $("#btnNext").click(function(event){             event.preventDefault();             //left값 얻어오기             var left=parseInt($("#slide").css('left'));             if(left<=-925) return;             left -= 185;             var pos=Math.ceil(left/185.0)*185;         // 이미지슬라이드가 좌측방향으로 하나의 이미지크기만큼 이동해서 다음이미지가 보입니다.                   $("#slide").animate({"left":pos},1000);            });      자 잘 실행이 되시나요? 전체 완성된 코드를 다시 한번 보여드립니다<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><link rel="stylesheet" href="css/jquery-ui.min.css" type="text/css"><style type="text/css">       *{margin:0;padding:0}       .buttons{padding:10px;border:2px solid #ff9999;background:#ffcc00;        margin-left:10px;border-radius:5px}       a{text-decoration: none;font-size: 0.8em;font-weight: bold;color:red}       .button:hover{background-color: white;}       #slide ul li img{width: 185px;height: 240px}       #slide ul li{list-style: none;float:left}       /* 자식div : 이미지10개가 담길 크기(185*10) */       #slide{width:1850px;height: 240px;position: relative;left:0px;}       /* 부모div : 이미지가 5개 담길 크기(185*5) */       #slidebox{width:925px;height: 240px;position: absolute;       left:200px;top:40px;overflow: hidden}       .fg-button {     outline: 0;     margin:0 4px 0 0;     padding: .4em 1em;     text-decoration:none !important;     cursor:pointer;     position: relative;     text-align: center;     zoom: 1;     }</style><script type="text/javascript" src="js/jquery-1.11.1.min.js"></script><script type="text/javascript" src="js/jquery-ui.min.js"></script><script type="text/javascript">      $(function(){           //containment:[x1,y1,x2,y2]           $("#slide").draggable({                 axis:"x",                 containment:[-725,40,200,40], //드래그 범주 지정                 cursor:"move"           }); $("#btnPrev").click(function(event){           event.preventDefault();           //left값 얻어오기           var left=parseInt($("#slide").css('left'));           if(left>=0) return;           left += 185;           var pos=Math.floor(left/185.0)*185;//Math.floor():내림값구하기           $("#slide").animate({"left":pos},1000);      });$("#btnNext").click(function(event){event.preventDefault();           //left값 얻어오기           var left=parseInt($("#slide").css('left'));           if(left<=-925) return;           left -= 185;           var pos=Math.ceil(left/185.0)*185; //Math.ceil():올림값구하기           $("#slide").animate({"left":pos},1000);      });   });   </script>   </head>   <body>   <div>       <div id="slidebox" >           <div id="slide">                <ul>                     <!-- img:185*240-->                     <li><img src="images/slide1.png"></li>                     <li><img src="images/slide2.png"></li>                     <li><img src="images/slide3.png"></li>                     <li><img src="images/slide4.png"></li>                     <li><img src="images/slide5.png"></li>                     <li><img src="images/slide6.png"></li>                     <li><img src="images/slide7.png"></li>                     <li><img src="images/slide8.png"></li>                     <li><img src="images/slide9.png"></li>                     <li><img src="images/slide10.png"></li>               </ul>          </div>    </div></div>     <div style="clear: both;position: relative;top:300px;left:200px">        <a href="#" id="btnPrev" class='fg-button ui-state-default ui-corner-all'>이전이미지</a>        <a href="#" id="btnNext" class="button">다음이미지</a>  </div> </body></html>  이러한 소스를 보면서 만들어보시면 드래그(Draggable) 앤 드롭(Droppable) 기능을 구현 할 수 있습니다.“송규남의 다이어리 14번째” 이야기는 여기서 마무리 하겠습니다. 다음 강좌에 봐요 *^^*​저작권자(c)중앙에이치티에이(주). 무단전재-재배포금지>     

2016-10-27

썸네일

[송규남의 IT 다이어리] 제이쿼리(jQuery) 열세번째 이야기

   제이쿼리(jQuery) UI 위젯 "다이얼로그(Dialog)"를 활용한 일정 만드는 법 강의​안녕하세요?중앙HTA강사 송규남입니다.이번 강좌에서는 지난 강좌에 이어 계속 jQuery에서 제공하는 UI에 대해서 알아보겠습니다.jQuery UI 위젯의 다양한 기능들 속에서 그 중에 다이얼로그(Dialog)에 대한 활용 방법을 살펴볼껀데요.먼저 jQuery UI 위젯의 다이얼로그(Dialog)를 다운받아야 겠죠?다이얼로그(Dialog)를 다운 받기 위해~ "http://jqueryui.com/dialog/" 사이트로 로 접속하면 오른쪽 위젯 메뉴중에 Dialog(다이얼로그)가 있습니다. 먼저 jQuery UI 위젯중에서 다이얼로그(Dialog)가 있는데요. http://jqueryui.com/dialog/ 로 접속하면  오른쪽 위젯 메뉴중에 Dialog(다이얼로그)가 있습니다.​  다이얼로그기능을 만들려면 다이얼로그(Dialog)로 보여질 div를 작성후 dialog(다이얼로그) 함수를 이용해서 다이얼로그로 변환시켜 주면 되는데요..일단 왼쪽 Dialog(다이얼로그)메뉴를 클릭하면 샘플코드랑 실행결과가 있습니다. ​샘플코드를 보면 다이얼로그(Dialog)를 아주 간단히 만들수 있다는 것을 알수 있습니다.  코드를 보면,다이얼로그(Dialog)로 보여질 div를 생성후 jQuey코드에서 dailog()함수를 사용해서 간단하게 다이얼로그(Dialog)로 만들었습니다. <div id="dialog" title="Basic dialog"><p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p></div> ===> 다이얼로그(Dialog)로 보여질 div만들기<script>  $( function() {    $( "#dialog" ).dialog();  } );  </script>==> 자바스크립트에서 div를 다이얼로그(Dialog)로 만들기 위의 사용방법을 토대로 간단한 다이얼로그 (Dialog)를 사용한 예제를 만들어 보겠습니다.먼저 실행결과는 아래와 같은데요.일정생성 버튼을 클릭하면 일정을 등록하기 위한 다이얼로그(Dialog)가 보여지고 해당 정보를 입력후 저장버튼을 누르면 모임일정에 추가되도록 만들어 보겠습니다.  지난시간에 했던대로 아래와 같이 파일이 해당 위치에 존재하도록 합니다.​  다이얼로그(Dialog)가 처음부터 보여지지 않고 버튼을 눌렀을때 보여야 합니다.아래처럼 다이얼로그(Dialog)를 만들면 자동열기가 실행되지 않아 다이얼로그(Dialog)가 보여지지 않게 됩니다. $("#dlg").dialog({      autoOpen:false}); 일정등록버튼을 누르면 다이얼로그(Dialog)가 보여지도록 해야하는데 이때는 아래와 같이 작성하면 됩니다.$("#dlg").dialog("open");//다이얼로그열기   <script type="text/javascript">      $(function(){            //일정생성 버튼을 누르면 다이얼로그(Dialog)가 보이도록 함.            $("#btn1").click(function(){                  $("#dlg").dialog("open");//다이얼로그열기            });            $("#dlg").dialog({                  autoOpen:false, //처음실행시에 다이얼로그(Dialog) 안보이게하기.                  buttons:{ //다이얼로그에 붙여질 버튼만들기                        추가:function(){                  //입력된 값들을 모임일정이 보여지는 div(#list) 에 추가되도록 합니다.                             var ename=$("#ename").val();                             var edate=$("#edate").val();                             $("#list").append(ename +":" + edate +"<br>");                             $("#ename").val("");                             $("#edate").val("");                             $("#ename").focus();                        },                        닫기:function(){                             $(this).dialog("close");//다이얼로그 닫기                        }                  }            });            $("#edate").datepicker({                 dateFormat:'yy/mm/dd'            });      });</script></head><body><button id="btn1">일정생성</button><div id="list" style="width:500px;">      <h3>모임일정</h3></div><div id="box"><!-- 다이얼로그로 보여질 DIV 작성 -->        <div id="dlg" title="일정">            <h1>일정정보입력</h1>            <label for="ename">일정이름</label>            <input type="text" id="ename">            <label for="edate">일정날짜</label>            <input type="text" id="edate">      </div></div></body></html> ​잘 작동되시나요?jQuery(제이쿼리) UI에는 많은 편리한 위젯들이 제공됩니다.UI페이지에 메뉴들을 하나씩 클릭하면서 실행코드를 보면 어렵지 않게 위젯들을 사용할 있습니다.    예를 들면 이와 같은 경우는 스마트폰으로 보여지는 웹페이지에서 radio 나 checkbox같은 요소들은 선택하기가 조금 불편하죠.그런경우 Checkboxradio 위젯을 사용해서 아래처럼 요소들의 모양을 바꿀수 있습니다.  소스코드는 아래와 같습니다. <!doctype html> <html lang="en"> <head>   <meta charset="utf-8">   <title>jQuery UI Checkboxradio - Default functionality</title>   <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">   <link rel="stylesheet" href="/resources/demos/style.css">   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>   <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>   <script>   $( function() {     $( "input" ).checkboxradio();   } );   </script> </head> <body> <div class="widget">   <h>Checkbox and radio button widgets</h1>   <h2>Radio Group</h2>   <fieldset>     <legend>Select a Location: </legend>     <label for="radio-1">New York</label>     <input type="radio" name="radio-1" id="radio-1">     <label for="radio-2">Paris</label>     <input type="radio" name="radio-1" id="radio-2">     <label for="radio-3">London</label>     <input type="radio" name="radio-1" id="radio-3">   </fieldset>   <h2>Checkbox</h2>   <fieldset>     <legend>Hotel Ratings: </legend>     <label for="checkbox-1">2 Star</label>     <input type="checkbox" name="checkbox-1" id="checkbox-1">     <label for="checkbox-2">3 Star</label>     <input type="checkbox" name="checkbox-2" id="checkbox-2">     <label for="checkbox-3">4 Star</label>     <input type="checkbox" name="checkbox-3" id="checkbox-3">     <label for="checkbox-4">5 Star</label>     <input type="checkbox" name="checkbox-4" id="checkbox-4">   </fieldset> </div></body></html> 이렇게 하나하나 소스를 보면서 따라해 보면 위젯들을 사용해 훨씬 세련된 웹페이지를 만들수 있겠네요.그럼 이번강좌는 여기서 마무리하겠습니다. 다음 강좌에서 뵈요 *^^*    저작권자(c)중앙에이치티에이(주). 무단전재-재배포금지>   

2016-09-05

썸네일

[송규남의 IT다이어리] 제이쿼리(jQuery) 열두번째 이야기

  제이쿼리(jQuery) UI를 이용한 달력 만드는 방법 강좌      ​안녕하세요? 중앙HTA강사 송규남입니다. ​이번 송규남의 IT다이어리에는 제이쿼리(jQuery)에서 제공하는 UI에 대해서 알아보겠습니다. 자바스크립트(Javascript)로 달력 등을 구현하려면 상당히 어려운데요.제이쿼리(jQuery)에서는 달력, 다이, 드래그앤드롭 등 여러 UI에 관련된 많은 기능들이 지원되고 있습니다. 먼저 제이쿼리(jQuery) 홈페이지에서 UI관련 라이브러리를 다운받아야 하는데요.. << http://www.jquery.com >>으로 접속하셔서 아래의 화살표방향에 있는 이미지를 클릭합니다.    ​링크된 페이지로 들어가서 아래의 화살표방향에 있는 stable버튼을 클릭해서 라이브러리를 다운받습니다.    다운로드 받은 zip파일을 압축을 풀고 images폴더와 jquery-ui.min.js, jquery-ui.css 파일을 선택해서 프로젝트의 해당위치에 넣습니다. ​    이클립스에서 프로젝트 생성 후 아래와 같이 파일을 위치하게 합니다. ​      - WebContent폴더에 html파일을 하나 작성 후 아래와 같이 파일을 포함 후 간단한 코드를 작성해 봅니다. ​<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" href="css/jquery-ui.min.css" type="text/css"> <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> <script type="text/javascript" src="js/jquery-ui.min.js"></script> <script type="text/javascript">     $(document).ready(function(){         $("#mydate").datepicker();     }); </script> </head> <body> <div id="mydate"></div> </body> </html>  - 아래와 같이 웹브라우져로 실행해보면 달력이 화면에 나타나는 것을 볼 수 있습니다.        코드를 보면 아래의 사각형안에 있는 코드가 div에 달력을 표시하는 부분입니다. 달력을 나타내기 정말 쉽쥬~?^^   http://jqueryui.com/ 사이트에 들어가보면 jQuery UI가 제공하는 여러 기능들을 살펴볼 수 있고 Sample코드들이 제공되기 때문에 기능들을 쉽게 구현할 수 있습니다. 그럼 jQuery UI를 사용해서 아코디언기능을 구현해 보겠습니다. html페이지를 하나 추가한후 아래와 같은 구조로 html을 작성합니다.  <div id="accordion">     <h2>jQuery</h2>     <div>         What is jQuery?         jQuery is a lightweight, "write less, do more", JavaScript library.                  The purpose of jQuery is to make it much easier to use JavaScript on your website.                  jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.                  jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.     </div>     <h2>CSS3</h2>     <div>         What is CSS?         CSS stands for Cascading Style Sheets         CSS describes how HTML elements are to be displayed on screen, paper, or in other media         CSS saves a lot of work. It can control the layout of multiple web pages all at once         External stylesheets are stored in CSS files     </div>     <h2>Bootstrap</h2>     <div>         What is Bootstrap?         Bootstrap is a free front-end framework for faster and easier web development         Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins         Bootstrap also gives you the ability to easily create responsive designs     </div> </div>  - 아코디언으로 보여질 전체를 감싸는 div를 하나 주고 그안에 h태그와 div태그로 이루어지는 하나의 섹션으로 보여질 탭을 여러개 만듭니다. 여기에 jquery코드로 아코디언으로 보이게끔하는 코드를 추가합니다. <script type="text/javascript">     $(document).ready(function(){         $("#accordion").accordion();     }); </script> ​- 아래와 같이 아코디언형태로 보이는 것을 확인할 수 있습니다.    사실 아코디언에 관련된 샘플코드가 있기 때문에 참고하고 보시면서 만드시면 되는데요.. http://jqueryui.com/ 사이트에 접속후 Widgets의 Accordion을 선택후 아래의 사각형으로 표시되어 있는 view source를 클릭하면 샘플코드를 확인할 수 있습니다.     ​텍스트 입력 창에도 쉽게 달력기능을 적용할 수 있는데요.. 아래와 같이 코드를 작성합니다. ​​<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" href="css/jquery-ui.min.css" type="text/css"> <!-- jquery파일포함 --> <script type="text/javascript" src="js/jquery-1.12.4.js"></script> <!-- jquery ui 파일포함 --> <script type="text/javascript" src="js/jquery-ui.min.js"></script> <script type="text/javascript">     $(document).ready(function(){         $("#date1").datepicker(); }); </script> </head> <body> 날짜선택 <input type="text" id="date1"><br/>  </body> </html>    ==> 위의 코드는 text에 포커스가 오면 아래처럼 달력이 바로 보여져서 날짜를 선택할 수 있도록 합니다.       위의 달력은 요일이 영문으로 나오고 있습니다. ​여러가지 달력을 나타내는데 옵션을 설정 할 수 있는데요 아래처럼 코드를 작성후 실행해 보세요.  <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" href="css/jquery-ui.min.css" type="text/css"> <!-- jquery파일포함 --> <script type="text/javascript" src="js/jquery-1.12.4.js"></script> <!-- jquery ui 파일포함 --> <script type="text/javascript" src="js/jquery-ui.min.js"></script> <script type="text/javascript">     $(document).ready(function(){         $("#date1").datepicker({ // 달력에 옵션 설정하기             dayNamesMin:["일","월","화","수","목","금","토"], // 요일에 표시되는 형식 설정             dateFormat:"yy-mm-dd", //날짜 형식 설정             monthNames:["1월","2월","3월","4월","5월","6월","7월",              "8월","9월","10월","11월","12월"], //월표시 형식 설정             showOn:"button", //버튼 보이기             buttonText:"달력", //버튼에 보이는 텍스트설정             showAnim:"fold" //애니메이션효과         });     }); </script> </head> <body> 날짜선택 <input type="text" id="date1"><br/>  </body> </html>  - 실행결과를 보면 아래와 같이 지정한 옵션대로 달력모양이 나타나는 것을 확인할 수 있습니다.     이번 강좌는 jQuery UI에 관련된 예제를 몇 개 해보았는데요.. 따라하기 어렵진 않으셨나요? ​그럼 다음 강좌에서 다시 찾아뵐께요!       저작권자(c)중앙에이치티에이(주). 무단전재-재배포금지>    

2016-07-05

썸네일

[송규남의 IT다이어리] 제이쿼리(jQuery) 열한번째 이야기

 제이쿼리(jQuery) 노드찾기(traversing) 방법 강의안녕하세요? 중앙HTA 강사 송규남입니다. 이번 시간에는 제이쿼리(jQuery) 기능 중에 트래버싱(traversing) 기능, 즉 각각의 요소간에 접근방법을 알아보겠습니다. 예를 들면 어떤 요소의 자식요소들이라든지 어떤 요소의 부모요소라든지.. 그러한 요소를 찾아갈 때 여러 가지 방법들이 있습니다. 물론 요소에 id속성을 부여해서 접근해가는 방법이 있지요.. 그 방법이 가장 많이 사용되긴 하지만 때로는 모든 요소를 id를 부여해서 접근해가기 어려운 상황이 있을 수 있습니다. 그런 때는 각 요소간에 traversing방법에 의해 요소를 접근해 갑니다. jquery사이트의 api에 보시면 아래와 같은 메뉴에 해당 기능의 메소드들이 설명되어 있습니다. ​       ​위의 여러 메소드 중에 몇 가지를 사용해 보겠습니다.         아래와 같은 예제를 작성해 봅니다. ​​<!DOCTYPE html>   <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <script type="text/javascript">     $(document).ready(function(){         //div요소중 첫번째 요소에 css적용하기         $("div").first().css("border","3px solid blue");          //div요소중 마지막 요소에 css적용하기         $("div").last().css("border","3px solid green");         //id속성이 ari인 요소의 다음요소에 css적용하기         $("#ari").next().css("color","orange"); //id속성이 ari인 요소의 부모요소에 css적용하기         $("#ari").parent().css("backgroundColor","yellow");         //pp의 자식요소중 .aa에 적용         $("#pp").find(".aa").css("fontSize","30px");         //pp의 모든 자식요소 얻어오기         var child=$("#pp").children();         //alert("자식의 갯수:" + child.length);         //pp의 모든 자식요소의 html값 출력하기         child.each(function(index){             alert("[" +index + "]"+ $(this).html());         });     }); </script> </head> <body> <div id="pp" class="aa">     <div id="ari">아리랑 아리랑 아라리요</div>     <div class="aa">아리랑 고개로 넘어간다.</div>     <div>나를 버리고 가시는 님은</div> </div> <div class="aa">     십리도 못가서 발병난다. </div> </body> </html>  ​실행결과는 아래와 같은데요.. ​          ​​위와 같은 경우가 어떤 경우에 활용될 수 있는지 하나의 예제를 더 만들어 볼게요.  일단 실행결과 화면은 아래와 같습니다. ​     필수입력란에 포커스가 들어오면 해당안내메시지가 span에 출력되도록 하였습니다. 코드는 아래와 같이 포커스가 들어온 요소의 다음요소(span)에 메시지를 출력하면 됩니다.    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css">     label{display:inline-block;width:150px;}     form span{color:red;font-size: 12px;} </style> <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <script type="text/javascript">     $(document).ready(function(){     //클래스속성이 requried요소에 포커스가 들어오면 메시지 span에 출력         $(".required").focusin(function(){             $(this).next().html("필수입력사항입니다");         }); // 클래스속성이 requried요소에 포커스가 나가면 메시지 span에서 지우기         $(".required").focusout(function(){             $(this).next().html("");         });              }); </script> </head> <body> <form action="register.jsp">     <label>아이디(*)</label><input type="text" class="required" id="id"><span></span><br>     <label>비밀번호(*)</label><input type="password" class="required" id="pwd"><span></span><br>     <label>비밀번호확인(*)</label><input type="password" class="required" id="pwd1"><span></span><br>     <label>이메일</label><input type="text"><br>     <input type="submit" value="등록"> </form> </body> </html>  ​예제를 하나 더 만들어 봅니다! - 처음실행화면         - 작은이미지에 마우스가 올라갔을때 화면          위이미지예제는 이미지에 마우스가 올라가면 해당 이미지가 아래 큰 이미지로 보이고 텍스트가 추가되어 보이며 border-radius효과를 주어서 둥근이미지로 보이도록 하였습니다. ​​코드는 아래와 같습니다.    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style>     *{margin:0;padding:0}     #list{width:850px;height: 170px;background-color: #a6a6a6;                     margin:30px auto;border-radius:20px}     #list ul{padding:5px;list-style: none;}     #list ul li{float:left;position: relative;}     #list ul li img{width:200px;height: 150px;margin:5px;border-radius:20px}     #content{clear: both;width:600px;height: 400px;padding:10px;             margin:auto;position: relative;} span{font-size: 20px;font-weight: bold;font-family: Arial;     text-shadow: 3px 3px 3px #777;color:yellow;     position: absolute;left:20px;top:20px;display: none} #wrap{background: #dddddd;width:900px; height: 700px;padding:30px;margin: auto} #img1{     width:600px;     height:400px;     background-image: url('images/5.jpg');     background-size:100% 100%;     border:5px solid white;     border-radius:30px;     transition:all 1s; } </style> <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <script type="text/javascript">     $(document).ready(function(){         $("#list ul li").hover(function(){ //마우스가 올라온 li요소의 자식요소중 img에 css효과를 //적용합니다.             $(this).find("img").css("opacity","0.3");             $("#img1").css("border-radius","50% 50%"); //마우스가 올라온 li요소의 자식요소중 span에 slideDown을 주어서 화면에서 //안보이게 합니다.              $(this).find("span").slideDown(500); //마우스가 올라온 li요소의 자식요소 img에 src속성값을 아래 큰 이미지의 //background-image 이미지로 설정합니다.              var src=$(this).find("img").attr("src");             $("#img1").css("background-image","url(" + src + ")");     //마우스가 올라온 li요소의 자식요소 span의 텍스트를 아래큰이미지 //위에 보이도록 apppendTo()함수로 추가합니다.             var txt=$(this).find("span").text();             $("<span>" + txt + "</span>").appendTo("#img1").css({                 "left":"130px",                 top:"150px",                 fontSize:"50px"             }).slideDown(500);                      },function(){ //마우스가 벗어나면 자식요소의 img요소를 원래 밝기로 보여지게 합니다.             $(this).find("img").css("opacity","1");             $("#img1").css("border-radius","30px");             $(this).find("span").slideUp(500);             $("#img1 span").remove();         });     }); </script> </head> <body> <div id="wrap">     <div id="list">         <ul>             <li><img src='images/1.jpg'><span>Beautiful Picture1</span></li>             <li><img src='images/2.jpg'><span>Beautiful Picture2</span></li>             <li><img src='images/3.jpg'><span>Beautiful Picture3</span></li>             <li><img src='images/4.jpg'><span>Beautiful Picture4</span></li>         </ul>     </div>     <div id="content">         <div id="img1"></div>     </div> </div> </body> </html>    예제를 잘 따라해 보셨나요? 그럼 송규남의 IT다이어리는 여기서 마무리하겠습니다! ​  저작권자(c)중앙에이치티에이(주). 무단전재-재배포금지>    

2016-05-24

썸네일

[송규남의 IT다이어리] 제이쿼리(jQuery) 열번째 이야기

 [송규남의 IT다이어리] 제이쿼리(jQuery) 시작해보기 10  안녕하세요! 중앙HTA 송규남 강사입니다.지난 시간에는 jQuery를 이용해서 Ajax 통신을 사용하는 방법에 대해서 알아보았는데요~이번 시간에는 Ajax에서 json으로 응답을 받아서 처리하는 예제를 만들어 보겠습니다. json을 사용하려면 json이 먼저 무엇인지 알아야 합니다.json은 서로 다른 프로그래밍 언어간의 데이터 통신을 위한 표기법입니다.xml보다 읽고 쓰기가 쉬우며 경량의 데이터를 교환하는 방식으로 인터넷에서 데이터를 주고 받을 때 표현하는 방법입니다.실제로 데이터가 많다면 xml로 데이터를 전송 받을 때보다 json으로 전송 받을 때가 속도면에서 더 빠릅니다. json은 아래와 같은 name/value가 한쌍으로 표현됩니다.var json={'id':'song','pwd':1234'};json의 값을 꺼내오려먼 json.id 또는 json.pwd 이런식으로 사용하면 됩니다. 먼저 json을 사용한 간단한 예제를 사용해 보겠습니다.프로젝트 하나 생성 후 json으로 응답하는 json1.jsp 파일을 하나 만듭니다.  jsp 파일에는 아래처럼 json 형태의 데이터를 입력합니다.<%@ page language="java" contentType="text/plain; charset=UTF-8" pageEncoding="UTF-8"%>{"id":"song","pwd":"1234","email":song@daum.net"} json으로 ajax 통신을 하려면 jQuery에서 아래와 같은 방법으로 작성합니다. $.ajax({dataType: "json", ==> 응답형태가 json임을 의미합니다.url: "json1.jsp", ==> 요청할 서버주소를 지정합니다.type : "get", ==> 요청방식을 지정합니다.(get, post)success:function(data){ ==> 서버로부터 응답이 성공되면 function을 수행합니다.$.each(data,function(key,value){수행할 코드       ↘ json객체가 data에 저장되며 key와 value에 name과 value속성이 차례로 담겨져 each구문을 반복합니다.});); 위의 형식을 이용하여 ajax로 json1.jsp에 데이터를 요청하는 html을 작성해보겠습니다.같은 Webcontent 폴더안에 json1.html 파일을 하나 추가 후 아래처럼 작성합니다. <!DOCTYPE html><html><head><meta charst="UTF-8"><title>Insert title here</title><script type="text/javascript" src="js/jquery-1.11.1.min.js"></script><script type="text/javacript">$(document).ready(function(){$(document).ready(function(){$("#btn1").click(function(){%.ajax({dataType: "json",url: "json1.jsp",success:function(data){$.each(data,function(key,value){$("#result").append("key" + key +",value:" + value +"<br/>"); }););});});</script></head><body><input type="button" value="서버에서 json으로 응답받기" id="btn1"><div id="result"></div> <body></html> 위의 코드는 json1.jsp에서 json으로 응답되는 결과를 jquery에서 ajax방식으로 요청한 것입니다.버튼을 누르면 아래처럼 ajax를 이용해서 json으로 응답된 결과를 얻어와 화면에 출력되는 것을 볼 수 있습니다.  $("#btn1").click(function(){$.ajax({dataType: "json",url: "json1.jsp",success:function(data)==> 버튼을 누르면 ajax로 json1.jsp 데이터를 요청하고 응답된 데이터가 function의 매개변수가 data변수에 저장됩니다.json객체로 data변수에 자동 저장되며 key와 value에 각각 name과 value가 분리되어 저장되므로 div에 append 메소드로 추가해 보았습니다. $.each(data,function(key,value){//div에 key와 value값 추가해보기$("#result").append("key:" + key +",value" + value +"<br/>") });  json으로 응답받는 get방식으로 요청시 아래처럼 작성해도 됩니다. //json을 get방식으로 요청하기$.getJSON("json1.jsp",function(data){//json객체의 key와 value가 자동 분리되어 저장$.each(data,function(key,value){$("#result").append("key:" + key +",value:" + value +"<br/>");});}); jquery를 이용한 json 응답방식은 jquery 사이트에서 좀 더 자세한 설명을 볼 수 있습니다.  API Document 메뉴에서 Ajax 선택 후 오른쪽 메뉴를 살펴보면 getJSON()메소드에 사항을 살펴볼 수 있습니다.     jsp에서 응답을 JSON형태로 하려면 문자열로 JSON형태로 만들어 줘야하는데 이는 매우 불편합니다.json.org 사이트에서 관련 라이브러리를 다운받으면 jsp에서 좀 더 수월하게 json형태로 응답할 수 있습니다.json.org 사이트에 접속 후 메뉴중 json-simple이 있습니다.  해당메뉴를 선택해서 링크경로로 이동 후 왼쪽 다운로드 파일중 json-simple-1.1.1.jar 파일을 다운받습니다.     해당파일을 클래스패스 위치에 넣습니다. jsp에서 아래와 같은 형태로 json객체를 생성하여 응답할 수 있습니다.<%//결과를 json형태로 담기위한 객체JSONObject obj=new JSONObject();obj.put("title","jQuery Ajax");obj.put("pricte",10000); //json으로 응답하기response.setContentType("text/plain;charset=utf-8");response.getWriter().write(obj.toString());%> 응답화면이 아래와 같습니다.   이번 강좌에서는 jquery ajax에서 json통신에 대한 부분을 알아봤습니다.그럼 이번 강좌는 여기서 마무리하겠습니다 ^^   저작권자(c)중앙에이치티에이(주). 무단전재-재배포금지>        

2015-05-13

썸네일

[송규남의 IT다이어리] 제이쿼리(jQuery) 아홉번째 이야기

 [송규남의 IT다이어리] 제이쿼리(jQuery) 시작해보기 9  안녕하세요. 중앙HTA 송규남 강사입니다.새해들어 처음 인사드립니다^^ 늦었지만 모두 새해 복 많이많이 받으세요~~ 이번 시간에는 Ajax 통신을 jQuery를 이용해서 사용하는 방법에 대해서 알아보겠습니다. 먼저 Ajax(Asynchronous Javascript XML)는 서버와의 비동기통신 방식을 지원하는 자바스크립트 기술입니다.웹브라우져가 아닌 XMLhttpRequest 객체를 통해 웹서버와 통신을 합니다. 웹서버의 응답결과는 xml 또는 json 형태입니다. Ajax를 이용해서 서버와 통신을 하게 되면 페이지 이동없이 화면에 결과가 반영되는 특징이 있습니다.이러한 Ajax 방식을 jQuery를 사용해서 구현하게 되면 순수한 자바스크립트를 이용한 것 보다 훨씬 쉽게 구현할 수 있습니다. 먼저 jQuery.com 사이트로 이동합니다!!  그럼 jQuery를 사용해서 xml 응답결과를 Ajax 방식으로 전달받아 html 페이지에 출력해 보는 간단한 예제를 만들어 보겠습니다.이클립스에서 DynamicWeb Project를 하나 생성합니다.    위에서 생성한 xml 파일에 아래와 같이 작성합니다. <?xml version="1.0" encoding="UTF-8"?><booklist><book><title>jQuery완전정복</title><price>10000</price></book><book><title>HTML5/CSS3</title><price>20000</price></book><book><title>Spring3.0</title><price>30000</price></book></booklist> test01_ajax.html 파일을 추가해 아래와 같이 작성합니다. <!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript" src="js/jquery-1.11.1.min.js"></script><script type="text/javascript">$(document).ready(function(){$("#btn1").click(function(){$.ajax({url:"booklist.xml",dataType:"xml"type:"get"success:function(data){$(data).find("book").each(function(){var title=$(this).find("title").text();var price=$(this).find("price").text();$("#bookList").append("<div>"+title+","+price+"</div>");}););});});</script></head><body><h1>우리우리 온라인 서점입니다!</h1><input type="button" value="도서정보" id="btn1"><div id="bookList"></div></body></html> 위의 코드를 실행하고 도서정보 버튼을 누르면 booklist.xml에 있는 정보를 얻어와 div에 출력합니다. //아래 코드는 버튼을 누르면 function을 수행하라는 것이지요?$("#btn1").click(function(){}); function 메소드안에 ajax로 데이터를 얻어와서 div에 출력하는 코드를 추가했습니다. $("#btn1").click(function()$.ajax({url:"booklist.xml", → 요청할 서버주소를 적습니다.dataType:"xml", → 응답 타입입니다. XML 또는 JSON이 됩니다.type:"get", → 요청 방식입니다. get 또는 post 중 하나입니다.  이번에는 아이디 중복검사를 ajax로 이용해서 구현해 보겠습니다.먼저 입력된 아이디를 전달받아 데이터베이스에 해당 아이디가 존재하는지 검사하는 idcheck.jsp 파일을 만듭니다.아래와 같이 코드를 작성합니다. <%@page import="java.io.PrintWriter"%><%@page import="java.sql.ResultSet"%><%@page import="java.sql.PreparedStatement"%>%@page import="test.db.DBConnection"%>%@page import="java.sql.Connection"%>%@page import="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC=KR"%><%String id=request.getParameter("id");Connection con=DBConnection.getConn();String sql="select * from userinfo where id=?";PreparedStatement pstmt=con.prepareStatement(sql);pstmt.setString(1,id);ResultSet rs=pstmt.executeQuery();boolean result=false;if(rs.next()){result=true}rs.close();pstmt.close();con.close();//결과를 xml로 응답하기response.setContentType("text/xml;charset=utf-8");PrintWriter pw=response.getWriter();pw.print("<?xml version=\"1.0\"encoding=\"UTF-8\"?>");pw.print("<data>");pw.print("<result>"+result+"</result>");pw.print("</data>");%> → 파라미터로 전달받은 id를 데이터베이스에서 조회하여 해당 id가 존재하면 true 아니면 false를 xml로 응답하는 jsp 파일입니다.    jsp를 공부하는 시간은 아니므로 자세한 설명은 생략합니다. 실행을 시켜보면 아래와 같은 결과가 화면에 나타납니다. html 페이지를 하나 추가하고 아래와 같이 작성합니다. <!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript" src="js/jquery-1.11.1.min.js"></script><script type="text/javacript">$(document).ready(function(){$("#btn1").click(function(){var id=$("#id").val();//입력된 아이디$.ajax({url:"idcheck.jsp",data:"id="+id, //서버로 전송될 파라미터type:"post", //post 방식으로 요청합니다.dataType:"xml",//응답콘텐츠 타입success:function(data){//응답이 성공하면 function 수행//응답데이터에서 result 태그의 텍스트값 얻어오기var using=$(data).find("result").text();if(using='true'){//span에 결과 출력하기$("#idcheck").html("사용중인 아이디입니다");}else{$("#idcheck").html("사용가능한 아이디입니다");});});});</script></head><body><form method="post" action="insert.jsp"><fieldset><legend>회원가입</legend><url><li><lavel for="id">아이디</label><input type="text" name="id" id="id"><input type="button" value="중복확인" id="btn1"><span id="idcheck"></span></li><li><label for="pwd">비밀번호</label><label for="password" name="pwd" id="pwd"></li><li><label for="email">이메일</label><input type="text" name="email" id="email"></li><li><input type="submit" value="가입"><input type="reset" value="취소"></li></ul></fieldset></from></body></html> CSS를 추가해 보겠습니다. <style type="text/css">fieldset {width:550px;}ul li{list-style: none;margin:2px}label {width:100px;display: inline-block;}form input[type=text]{width:200px}#idcheck{font-size: 12px,color:red}</style> 아이디를 입력 후 중복확인 버튼을 눌러보면 ajax를 이용해 idcheck.jsp에서 결과를 얻어와 span 요소에 결과를 출력합니다. 잘못된 아이디를 입력하면 아래와 같이 결과가 출력됩니다. 이번 시간에는 jQuery Ajax를 사용하는 방법에 대해서 알아보았습니다. 다음시간에는 JSON을 사용한 Ajax 통신방법을 알아보도록 하며 다음 시간에 찾아뵙겠습니다 ^^

2015-02-02

썸네일

[송규남의 IT다이어리] 제이쿼리(jQuery) 여덟번째 이야기

 [송규남의 IT다이어리] 제이쿼리(jQuery) 시작해보기 8  안녕하세요. 중앙HTA의 송규남 강사입니다.지난 시간에 이어 jQuery 여덟번째 강의를 시작해보겠습니다. 지난 시간에는 animate()를 사용한 이미지 슬라이드 기능을 만들어 봤는데요.이번 jQuery 강의에서는 엘리먼트들의 조작방법에 대해서 알아보겠습니다.  먼저 append 메소드에 대해서 알아보겠습니다.append는 요소의 마지막에 새로운 요소를 자식요소로 추가하는 메소드인데요~예를 들어 설명드리겠습니다. 아래와 같은 html 문서를 만듭니다. <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="js/jquery-1.11.1.js"></script><script type="text/javascript">$(document).ready(function(){$("#btn1").click(function(){//imgList의 끝에 img 생성해서 붙이기$("#imgList").append("<img src='images/001.jpg'/>");});});</script></head><body><input type="button" value="이미지추가" id="btn1"/><div id="imgList"><h1>영화포스터</h1></div></body></html> 위의 예제는 btn1을 클릭하면 001.jpg 이미지가 계속 생성되어서 div인 imgList에 추가됩니다. 여기에 삭제버튼을 하나 더 추가합니다. <body><input type="button" vlaue="이미지추가" id="btn1"/><input type="button" vlaue="이미지삭제" id="btn2"/> 삭제버튼을 눌렀을때 맨 마지막 이미지를 삭제해 봅니다. $(document).ready(function(){$("#btn1").click(function(){//imgList의 끝에 img 생성해서 붙이기$("imgList").append("<img src='images/001.jpg'/>");});$("#btn2").click(function(){//imgList의 자식img중 마지막 요소 제거하기$("#imgList img:last-child").remove();}); html파일과 같은 경로에 images 폴더에 아래와 같은 이미지들이 있습니다. (확장자는 png입니다.)   이미지 생성코드를 아래처럼 수정해 봅니다. $(document).ready(function(){var i=1;$("#btn1").click(function(){if(i>20) return;//imgList의 끝에 img 생성해서 붙이기$("#imgList").append("<img src='images/" + i +".png'/>");i++;});$("#btn2").click(function(){//imgList의 자식img중 마지막 요소 제거하기$("#imgList img:last-child").remove();}); i 변수가 1부터 1씩 증가되는 파일명으로 생성되므로 아래처럼 추가버튼을 누르면 해당 이미지가 생성되어 붙여지고삭제 버튼을 누르면 맨 마지막 이미지부터 삭제됩니다.   append와 비슷한 기능의 메소드로 appendTo라는 메소드가 있습니다.append는 아래처럼 ~ 부모객체에 자식객체가 추가되는 것입니다. $("부모요소").append("추가될 자식요소");appendTo는 $("추가될 자식요소").appendTo("부모요소");과 같이 사용하며 ~자식요소가 부모요소에 추가됩니다.두개는 결국 같은 기능을 수행하지만 차이점은 각각 리턴되는 객체가 다릅니다.append는 부모 요소객체를 리턴하며 appendTo는 추가되는 자식 요소개체를 리턴합니다. 아래의 예를 들어 다시한번 설명드릴께요.html 코드를 아래처럼 수정합니다. <body><div id="top"></div><input type="button" value="이미지추가" id="btn1"/><input type="button" value="이미지삭제" id="btn2"/><input type="button" value="링크붙이기" id="btn3"/><div id="imgList"><h1>영화포스터</h1></div><p>내용1...</p><p>내용2...</p> → btn3을 클릭하면 P태그 뒤에 링크를 붙여서 top으로 이동되게 합니다.jQuery에 아래와 같은 코드를 추가합니다. $("#btn4").click(function(){var aa=$<"<div><a href='#top'>맨위로</a></div>");$("p").append("<div><a href='#top'>맨위로</a></div>");}); → p의 끝에 div가 붙었습니다. append에서 리턴되는 객체는 p요소입니다.jQuery의 메소드는 체인형태라 아래와 같은 형태로 사용이 가능합니다. $("p").append("<div><a href='#top'>맨위로</a></div>").css("backgroundColor","red"); → append 메소드는 p객체 요소를 리턴하므로 p의 배경색상이 빨간 색상이 됩니다.   이번에는 appendTo 메소드를 사용해서 아래처럼 변경해봅니다. $("#btn4").click(function(){var aa=$("<div><a href='#top'>맨위로</a></div>");//$("p").append("<div><a href='#top'>맨위로</a></div>").css("backgroundColor","red");//div를 p의 뒤에 붙이기$("div><a href='#top'>맨위로</a></div>").appendTo("p").css("backgroundColor","red");}); appendTo에서 리턴된 요소가 div 요소이므로 css가 div에 적용됩니다.   prepend 메소드와 prependTo 메소드는 요소의 앞에 추가하는 메소드입니다.prepend와 prependTo의 차이는 append와 appendTo의 차이와 같습니다.즉, 리턴객체가 달라지는 것이지요.한번 사용해 볼까요? 아래처럼 버튼을 추가합니다. <input type="button" value="제목추가" id="btn4"/><input type="button" value="이미지붙이기" id="btn5"/> 이벤트 핸들러를  jQuery 코드안에 넣습니다.$("btn4").click(function(){//imgList의 앞에 h1 생성해서 붙이기$("#imgList").prepend("<h1>최근인기상영작</h1>");});$("#btn5").click(function(){//img를 p앞에 붙이기$("<img src='images/002.jpg'/>").prependTo("p")}); btn5를 클릭하면 img가 p요소 앞에 동적으로 생성되어서 붙습니다.그런데 생성되어 보여질때 이펙트를 주고 싶다면 어떻게 해야 할까요?그렇다면 prependTo 메소드를 사용하는게 편하겠죠? 아래처럼 코드를 수정해 보세요. $("#btn5").click(function(){$("<img src='images/002.jpg'/>").prependTo("p").hide().fadeIn(1000);}); → 새롭게 이미지가 생성될 때 이펙트가 적용되어서 나타나죠?   이번 jQuery 강의에서는 html 요소의 동적인 생성과 삭제에 대해서 알아보았습니다.여러분들도 어렵지 않게 따라 오셨을거라 생각합니다^^그럼 이번 강의는 여기서 마무리하고 다음 강의때 찾아뵙겠습니다.  저작권자(c)중앙에이치티에이(주). 무단전재-재배포금지> 

2014-12-19

썸네일

[송규남의 IT다이어리] 제이쿼리(jQuery) 일곱번째 이야기

  [송규남의 IT다이어리] 제이쿼리(jQuery) 시작해보기 7  안녕하세요. 중앙HTA의 송규남 강사입니다.지난시간에 이어 jQuery 일곱번째 강좌를 시작해보겠습니다 ^^ 지난 제이쿼리 강의에서는 jQuery에서 이펙트 효과를 낼 수 있는 animate() 메소드에 대해서 알아봤는데요이번 시간에는 animate() 메소드를 활용한 이미지 슬라이드 기능을 구현하는 예제를 만들어 보도록 하겠습니다!! 전체 이미지 7개가 왼쪽 방향으로 이동하는 예제인데요~ 먼저 아래와 같은 html 코드를 작성합니다. <html><head><meta http-equiv="Content - Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body><div id="posterbox"><div id="parent"><div id="imgslide"><ul><li><img src="images/002.jpg"/></li><li><img src="images/003.jpg"/></li><li><img src="images/004.jpg"/></li><li><img src="images/005.jpg"/></li><li><img src="images/006.jpg"/></li><li><img src="images/007.jpg"/></li><li><img src="images/008.jpg"/></li></ul></div></div></div></body></html> #imgslide에는 7개의 이미지가 들어있습니다. 부모 div인 #parent는 5개의 이미지가 보일 크기를 설정하고 영역을 벗어나는 자식요소는overflow:hidden 속성을 주어서 숨깁니다. 그래야만 이미지가 이동하는 것처럼 보일 수 있습니다. 아래와 같은 CSS를 추가합니다. <style type="text/css">*{margin:0;padding:0}#posterbox{margin-left: 200px;margin-top: 30px;}/ * parent는 이미지 5개가 담길 크기 */#parent{width:700px;height:200px;overflow: hidden;/* 자신의 영역을 벗어나면 감춰라. */position: relative;background-color: orange;border:5px solid green;}/* imgslide(자식div)는 이미지 7개가 담길 크기*/#imgslide{width:980px;height:200px;position:absolute;left:0px;}#imgslide ul li{list-style-type: none;float:left;}#imgslide ul li img{width:136px;height:196px;margin:2px}</style> 위의 CSS가 적용된 화면은 아래와 같습니다. 여기에 jQuery 코드를 추가하여 슬라이드로 이동되도록 해보겠습니다. <script type="text/javascript" src="js/jquery-1.11.1.js"></script><script type="text/javascript">$(document).ready(function(){//1초에 한번씩  function을 반복적으로 수행한다.setInterval(function(){$("#imgslide").animate({ 'left':'-=140px' //현재 left에서 140px 뺀 위치로 이동},1000,function(){//1초간 animate 수행하고 function 수행//현재 left 속성값 얻어오기var left=parseInt($("#imgslide").css('left'));//현재 left가 980인 경우 (왼쪽으로 이미지가 모두//이동되어 안보이게 된 경우)if(left<=-980){//다시 오른쪽에서 나오게 하기$("#imgslide").css('left','700px');)}, 100);});</script> 위의 코드를 작성 후 실행해 보면 이미지가 왼쪽으로 이동됩니다.이때 왼쪽으로 쉴틈없이 이동하므로 왼쪽으로 이동한 후 0.5초간 멈춘 후 다시 이동되게 해보겠습니다. 아래처럼 delay() 메소드를 사용합니다. <script type="text/javascript" src="js/jquery-1.11.1.js"></script><script type="text/javascript">$(document).ready(function(){setInterval(function(){$("#imgslide").animate({'left':'-=140px'},1000,function(){var left=parseInt($("imgslide").css('left'));if(left<=-980){$("imgslide").css('left','700px');).delay(500);//0.5초 지연하기}, 1500);});</script> 위의 예제는 왼쪽으로 이미지가 모두 이동되어서 안보이게 되면 오른쪽에서 이미지가 나와 다시 왼쪽으로 이동하게 됩니다.이때 뒤에 빈 공간이 보이게 됩니다.  이 부분이 끊기지 않고 계속 이미지가 흘러나오도록 하는 예제를 만들어 보겠습니다.이번에는 10개의 이미지가 연속적으로 이동하는 예제입니다. 아래와 같은 html 태그를 작성합니다. <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style type="text/css"></style><script type="text/javascript" src="js/jquery-1.11.1.js"></script><script type="text/javascript"></script></head><body><div id="posterbox"><div id="parent"><div id="imgslide"><ul><li><img src="images/slide1.png"/></li><li><img src="images/slide2.png"/></li><li><img src="images/slide3.png"/></li><li><img src="images/slide4.png"/></li><li><img src="images/slide5.png"/></li><li><img src="images/slide6.png"/></li><li><img src="images/slide7.png"/></li><li><img src="images/slide8.png"/></li><li><img src="images/slide9.png"/></li><li><img src="images/slide10.png"/></li></ul></div></div></div></body></html> 위의 코드에 아래와 같은 css를 추가합니다. <style type="text/css">*{margin:0;padding:0}#posterbox{margin-left: 200px;margin-top: 30px;}/* 부모 div는 이미지 5개 보일 크기*/#parent{width:700px;height:200px;overflow: hidden;position:relative;background-color: orange;border:5px solid green;}/* 자식 div는 이미지 10개를 담을 크기*/#imgslide{width:1400px;height:200px;}#imgslide ul li{list-style-type: none;float:left;position:absolute;}/* img는 margin을 포함해서 140px의 영역의 크기를 갖는다.*/#imgslide ul li img{width:136px;height:196px;margin:2px;}</style> 아래와 같은 jquery 코드를 추가합니다. <script type="text/javascript">$(document).ready(function(){var pos=0'//각각의 li들의 초기 좌표값 설정하기 (왼쪽부터 opx, 140px, 280px, … 순으로 //left 값이 설정됩니다.)$("#imgslide ul li").each(function(){$(this).css('left',pos+"px");pos+ = 140;});//1초에 한번씩 function을 반복적으로 수행합니다.setInterval(function(){//imgslide ul li를 모두 1초에 한번씩 왼쪽으로 140px 이동$("#imgslide ul li").each(function(){var left-parseInt($(this).css('left'));$(this).animate({'left':'-=140px'},1000,function(){var left=parseInt($(this).css('left'));//이동된 left 위치가 -700px이면 다시 오른쪽 700px의 위치로 이동하기if(left<=-700){$(this).css('left','700px'););}).delay(1000);},2000);});</script> 실행해보면 아래처럼 이미지가 왼쪽으로 끊어지지 않고 계속 이동됨을 볼 수 있습니다.  여러분들도 다 잘따라오셨을 거라고 생각합니다~막히는 부분이 있으면 다시 한번 살펴보면 될 것 같습니다^^ 이번 강좌에서는 animate() 메소드를 활용한 이미지 슬라이드 기능을 구현해봤습니다.이번 jQuery 강좌는 여기서 마무리하고 다음 제이쿼리 강좌로 찾아뵙도록 하겠습니다!!   저작권자(c)중앙에이치티에이(주). 무단전재-재배포금지>  

2014-11-17

썸네일

[송규남의 IT다이어리] 제이쿼리(jQuery) 여섯번째 이야기

 [송규남의 IT다이어리] 제이쿼리(jQuery) 시작해보기 6 안녕하세요. 중앙HTA의 송규남 강사입니다.지난 시간에 이어 jQuery 여섯번재 강좌를 시작해보겠습니다. 지난 시간에 jQuery 에서의 이펙트 효과에 대해서 알아봤는데요~이번에는 이펙트중에서 .animate() 대해서 알아보겠습니다. .animate() 메소드는 CSS를 변경할 때 지연시간을 설정해서 애니메이션같은 효과를 줄 수 있습니다.jQuery API Documentation 에서 아래 항목을 선택하면 animate()의 사용방법을 알 수 있는데요   먼저 간단한 예제로 이해해 보도록 하겠습니다. <!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css">#box{width:100px;height:100px;background-color:red}</style><script type="text/javascript" src="js/jquery-1.11.1.js"></script><script type="text/javascript">$(document).ready(function(){//버튼을 클릭하면 호출$("#btn").click(function(){//marginLeft 속성값을 200으로 옮깁니다.$("#box").css('marginLeft',200);});});</script></head><body><input type="button" vlaue="move" id="btn"><div id="box"></div></body></html> ==> 위의 코드를 작성 후 실행해 봅니다. div의 marginLeft 값이 변경되면서 div가 오른쪽으로 이동합니다. 하지만 순식간에 이동되어 집니다.이렇게 CSS값이 변경될 때 순식간에 변경되는 것이 아니라 일정 시간동안 변경해라... 라고 요청하면 div가 이동하는 것 처럼 보여집니다. 코드를 아래처럼 변경해 보세요. <script type="text/javascript">#(document).ready(function(){#("#btn").click(function(){//$("#box").animate({'margiLeft':'200px'});});</script> animate()는 {}안의 CSS 속성값을 0.4초간 변경합니다. 그래서 이동되는 움직임이 보이게 됩니다.기본시간은 0.4초로 설정되어 있고 아래처럼 시간을 설정 할 수 있습니다. <script type="text/javascript">#(document).ready(function(){#("#btn").click(function(){$("#box").animate({'marginLeft':'200px'},1000);//1초간 marginLeft 속성값을 200으로 옮깁니다.});});</script> 만약 애니메이션 수행 후 해야 할 작업이 있다면 아래처럼 function을 등록해 구현하면 됩니다. <script type="text/javascript">$(document).ready(function(){$("btn").click(function(){$("#box").animate({'marginLeft':'200px'},1000,function(){//애니메이션이 완료된 후 자동 function 수행alert("Move완료!");});});</script>  실행해 보면 위의 그림처럼 1초간 빨간사각형이 오른쪽으로 이동하고 이동이 끝나면 메시지창이 뜹니다. 이번에는 이런 animate를 이용해서 퀵메뉴를 만들어 보겠습니다.   html 페이지를 추가하고 아래처럼 작성합니다. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style type="text/css">#content{width:1000px;height:1200px;background:url("backimage.png");margin:auto;}#quickmenu{border:2px solid red;background-color:whitewidth:120px;height:410px;position:absolutetop:50px;right:200px;}#quickmenu ul{list-style:none;padding:10px;}#quckmenu ul li img{width:100px;height:80px;}#quickmenu h4{text-align:center}</style><script type="text/javascript" src="js/jquery-1.11.1.js"></script><script type="text/javascript"> </script></head><body><div id="quickmenu"><h4>최근본페이지</h4><ul><li><a href="#"><img src="1.png"/></a></li><li><a href="#"><img src="2.png"/></a></li><li><a href="#"><img src="3.png"/></a></li><li><a href="#"><img src="4.png"/></a></li> </ul></div><div id="content"></div></body></html> ==> 위의 코드에 원도우가 스크롤때마다 quickmenu가 이동될 수 있도록 jQuery 코드를 추가합니다.$(document).ready(function(){//quickmenu의 최초의 top 속성값 얻어오기var top=parseInt($("#quickmenu").css("top"));//window가 스크롤 되어질 때 function 수행$(window).scroll(function(){//스크롤 되어진 top의 위치 구하기var scrollTop=$(window).scrollTop();//이동할 top의 위치 구하기var moveTop=top+scrollTop;$("#quickmenu").stop();//기존에 수행중인 애니메이션 멈추기//퀵메뉴를 1초간 moveTop의 위치로 이동하기$("#quickmenu").animate({top:moveTop},1000);});}); 자 위와 같이 작성하니 윈도우가 스크롤 되어질 때 퀵메뉴가 따라다니지요?? 이번 강좌에서는 .animate()에 대한 부분을 알아봤습니다.강좌는 여기서 마무리하고 다음 강좌로 찾아뵙도록 하겠습니다.  <저작권자(c)중앙에이치티에이(주). 무단전재-재배포금지>   

2014-10-07

썸네일

[송규남의 IT다이어리] 제이쿼리(jQuery) 다섯번째 이야기

 [송규남의 IT다이어리] 제이쿼리(jQuery) 시작해보기 5  안녕하세요. 중앙HTA의 송규남 강사입니다.지난 시간에 이어 jQuery 다섯번째 강좌를 시작해보겠습니다. 이번 시간에는 jQuery 에서의 이펙트 효과에 대해서 알아보겠습니다.이펙트 효과를 이용하면 다이나믹한 웹페이지 또는 다양한 애니메이션 효과를 줄 수 있으며jQuery 의 강력한 기능중의 하나입니다.  Effects 메뉴를 선택하면 다양한 이펙트를 줄 수 있는 메소드들이 나옵니다.사용방법 설명을 위한 간단한 예제를 만들어 보겠습니다. html 페이지를 하나 추가하여 아래처럼 코드를 작성합니다.  <!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript" src="js/jquery-1.11.1.js"></script><script type="text/javascript">$(document).ready<function(){$("#box1").hide(); //div 숨기기$("#btnshow").click(function(){$("#box1").show(); //div 보이기});});</script></head><body><input type="button" value="show" id="btnshow" /><div id="box1" style="margin-top:10px;width:480px;height:300px,background-image:url(images/back.png)"></div></body></html> 처음에는 이미지가 보이질 않습니다.$(document).ready(function(){$("#box1").hide();  --> 이문장 때문이죠... show버튼을 누르면 누르자마자 바로 이미지가 보여집니다.$("box1").show(); --> 이문장은 id속성이 box1인 요소를 화면에 보이게 합니다.   하지만 조금 재미가 없군요...버튼을 누를때 펼쳐지듯이 보이게 하고 싶으면 show 메소드안에 숫자를 넣어줍니다. $("#box1").show(1000); --> 괄호안의 숫자는 1초동안 펼쳐지게 보이려면 1000을 넣어야 합니다.0.5초 보이려면 500을 넣어야겠죠?숫자를 넣고 실행해보면 몇자 적지 않았는데 멋있는 펼침효과가 나타나는 것을 확인 할 수 있습니다.버튼을 하나 더 추가하고 숨김 작업을 애니메이션 효과처럼 닫히게 해보죠. 아래처럼 버튼을 눌렀을때 숨김을 하는 코드를 추가합니다. <script type="text/javascript">$(document).ready(function(){$("#box1").hide(); //div 숨기기$("#btnshow").click(function(){$("#box1").show(1000);});$("#btnhide").click(function(){$("#box1").hide(1000);});</script></head><body><input type="button" vlaue="show" id="btnshow" /><input type="button" vlaue="hide" id="btnshow" />  hide 버튼을 클릭하면 이미지가 펼쳐진것을 닫으면서 사라지죠?hide(1000)와 show(1000) 메소드를 아래의 Effect로 바꾸어서 실해해 보세요.아까와는 다른 효과로 이미지가 사라지고 보여질 것입니다.  메소드 이름에 toggle이 붙은것은 보였다 숨겼다 작업을 번갈아 가면서 합니다.아래처럼 button을 하나 추가한 후 아래와 같은 이벤트 핸들러를 만들어 보세요.<input type="button" vlaue="toggle" id="btntoggle" /> [코드]$("#btntoggle").click(function(){$("#box1").fadetoggle(100));}); slidetoggle() 메소드로 바꾸어서 실행해 보면 역시나 번갈아 가면서 보였다 숨겼다 합니다.하지만 fadetoggle()과는 조금 다른 효과를 보이죠?이펙트가 다 적용되고 나서 해야 할 일이 있다면 메소드에 function을 아래처럼 추가합니다. [버튼추가] <input type="button" value="이펙트종료" id="btnend" />$("#btnend").click(function(){$("#box1").fadein(1000,function(){$(this).append("<h1>애니메이션이 완료되었습니다.<h1>");});}); CSS는 아래처럼 작성했습니다. <style>h1{color:white;opacity:0.5;text-shadow:3px 3px 3px #aaa}</style> btnend 버튼을 클릭하면 box1이 화면에 보이는 작업을 1초동안 수행하고 작업이 완료되면 자동으로 function이 수행됩니다.  hide 버튼을 누른 후 이펙트 종료버튼을 누르면 이미지가 서서히 보여지면서 그 작업이 완료되면 애니메이션이 완료되었습니다.라는 문자열이 이미지 위에 보이게 됩니다. 이펙트가 종료된 후에 해야 할 일이 있다면 function에서 해당 작업을 작성해 주면 됩니다. 아래처럼 이미지가 다 보여진 후 이미지 각도를 살짝 바꿔 볼까요?? $("#btnend").click(function(){$("#box1").fadein(1000,function(){$(this).append("<h1>애니메이션이 완료되었습니다.<h1>")'$(this).css("transform","rotate(5deg)") ;//html5의 // CSS3로 각도바꾸기});});  이번 강좌에서는 Effect에 대한 부분을 알아봤습니다.그럼 이번 강좌는 여기서 마무리 하며 다음 jQuery 강좌에서 찾아 뵙도록 하겠습니다.  <저작권자(c)중앙에이치티에이(주). 무단전재-재배포금지>  

2014-10-06

  1. 1
  2. 2
  3. 3

TOP