반응형

 

 

AOS

Animate On Scroll Library

 

프로젝트에서 퍼블리싱 작업 중 세로로 긴 콘텐츠의 메인 또는 서브페이지를 코딩하다 보면,

고객사의 요청에 의해 스크롤되었을 때 콘텐츠 요소의 애니메이션 효과를 퍼블리싱해야 할 경우가 있습니다.

그럴 경우  AOS 또는 ScrollMagic 라이브러리를 사용하면 쉽게 스크롤 애니메이션 효과를 구현할 수 있습니다.

두 가지 모두 사용하기 쉽고, 좋은 스크롤  애니메이션 라이브러리입니다.

저는 이 두 가지 라이브러리를 프로젝트 상황에 따라 사용합니다.

ScrollMagic 라이브러리의 경우 GSAP TweenMax를 알아야 사용하기 편리합니다.

또한 자바스크립트와  jQuery를 알아야 합니다.

애니메이션 효과나 제어를 직접 해야 하기 때문에 시간 소요가 더 많이 됩니다.

그렇기에 AOS 라이브러리보다 애니메이션(속도, 시작 위치, 곡선 등)을 자유롭게 구현할 수 있습니다.

그러나 프로젝트의 시간이 촉박할 경우, ScrollMagic 라이브러리로 퍼블리싱하다 보면 야근이 눈에 훤하죠?

그럴 경우 AOS 라이브러리를 사용하면 쉽게 스크롤 애니메이션을 코딩할 수 있습니다.

AOS 라이브러리는 자바스크립트를 몰라도 쉽게 사용할 수 있습니다.

 또한 많은 효과를 제공하기 때문에 ScrollMagic 라이브러리에 뒤떨어지지 않습니다.

'시간 투자 대비 가성비는 모든 스크롤 애니메이션 라이브러리 중 최고'라고 생각됩니다.

제가 왜 두 가지 라이브러리를 상황에 따라 골라서 사용하는지 AOS와 ScrollMagic 라이브러리의 차이를 아시겠죠?

그럼 지금부터 이번 포스팅의 주제인 AOS 라이브러리에 대해 알아보겠습니다. 

 

 

 

 

 

Installation

 

기본적으로 <head> 태그 안에 aos.js와 aos.css 라이브러리 파일을 불러옵니다.

jQuery 라이브러리도 필요합니다.

aos.js, jQuery.js는 CDN으로 불러오겠습니다.

<head>
	<link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css"> 
	<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> 
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 
</head>

 

그다음 <header>, <body>, 스크립트 영역 중 한 곳에 AOS 라이브러리를 사용하기 위한 초기화 스크립트를 작성합니다.

여기까지가 AOS 라이브러리를 사용하기 위한 준비과정입니다.

<script> 
	AOS.init();
	/* 주석부분과 같이 AOS API - Global Setting 가능
	AOS.init({
		offset: 120,
		delay: 0,
		duration: 400,
		easing: 'ease',
		once: false,
		mirror: false,
		anchorPlacement: 'top-bottom'
	});    
	*/
</script>

 

 

 

 

 

 사용방법(How to use AOS?)

 

기본 완성된 기본 사용방법은 아래와 같습니다.

<!DOCTYPE html>
<html>
    <head>
        <title>AOS Animation</title> 
        <!-- AOS 라이브러리 불러오기-->
        <link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css"> 
        <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> 
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 
    </head>
    <body>
        <!-- AOS 스크립트 초기화 -->
        <script> 
            AOS.init(); 
        </script>
        <!-- //AOS 스크립트 초기화 -->
        <div aos="fade-up" data-aos-offset="200" data-aos-easing="ease-out-cubic" data-aos-duration="500">
            <!-- 애니메이션 객체 요소 -->
            <!-- //애니메이션 객체 요소 -->
        </div>
    </body>
</html>

※ AOS 라이브러리 애니메이션은 블록 태그(Block Tag)에만 적용 가능합니다. 인라인 태그(Inline Tag)에는 효과가 적용되지 않습니다.

 

 

 

 

 

data-aos 옵션 속성

 

AOS 라이브러리 코드 사용방법을 알았으니, 이제 API 옵션에 대해 알아보겠습니다. 

옵션 속성이 무엇인지 정확히 알아야 제대로 사용할 수 있기 때문입니다.

옵션 속성도 정확히 모른 상태에서 사용방법만 안다는 것은 무의미하겠죠?

API API 핵심내용
data-aos 사용할 애니메이션 효과명
data-aos-easing 애니메이션 시간흐름에 따른 속도설정 옵션(default: ease)
data-aos-anchor 특정한 객체에 anchor를 설정하여,
어떤 객체를 기준으로 애니메이션이 시작 될지를 설정
data-aos-delay 애니메이션 재생 대기시간 설정(default: 0)
data-aos-offset 애니메이션 효과가 시작될 객체의 위치 설정
data-aos-duration 애니메이션의 재생시간 설정(default: 400)
data-aos-anchor-placement 애니메이션이 어느 위치에서부터 적용될지 설정(default: top-bottom)
data-aos-once 스크롤 할때마다 애니매이션이 재생될지를 설정(default: false) 

※ delay와 duration은 0부터 3000까지 최대값을 설정할 수 있고, 50 단위로 설정 변경이 가능합니다.

 

 

data-aos : Attribute Value

Fade animation
  • fade
  • fade-up
  • fade-down
  • fade-left
  • fade-right
  • fade-up-left
  • fade-up-right
  • fade-down-left
  • fade-down-right
Flip animation
  • flip-up
  • flip-down
  • flip-left
  • flip-right
Slide animation
  • slide-up
  • slide-down
  • slide-left
  • slide-right
Zoom animation
  • zoom-in
  • zoom-in-up
  • zoom-in-down
  • zoom-in-left
  • zoom-in-right
  • zoom-out
  • zoom-out-up
  • zoom-out-down
  • zoom-out-left
  • zoom-out-right

 

 

data-aos-easing : Attribute Value

  • linear
  • ease
  • ease-in
  • ease-out
  • ease-in-out
  • ease-in-back
  • ease-out-back
  • ease-in-out-back
  • ease-in-sine
  • ease-out-sine
  • ease-in-out-sine
  • ease-in-quad
  • ease-out-quad
  • ease-in-out-quad
  • ease-in-cubic
  • ease-out-cubic
  • ease-in-quart
  • ease-out-quart
  • ease-in-out-quart

 

 

data-aos-anchor-placement : Attribute Value

  • top-bottom
  • top-center
  • top-top
  • center-bottom
  • center-center
  • center-top
  • bottom-center
  • bottom-top

 

 

 

 

 

AOS  라이브러리 예제 및 다운로드

 

AOS Library  공식 사이트 :  https://michalsnik.github.io/aos/

 

AOS - Animate on scroll library

AOS Animate On Scroll Library Scroll down

michalsnik.github.io

 

 

AOS Library  Github : https://github.com/michalsnik/aos

 

GitHub - michalsnik/aos: Animate on scroll library

Animate on scroll library. Contribute to michalsnik/aos development by creating an account on GitHub.

github.com

 

 

 

 

 

마치며...

 

여러 가지 스크롤 애니메이션 라이브러리가 있지만, 저는 AOS 라이브러리가 가장 사용하기 쉽다고 생각합니다.

자바스크립트를 잘 몰라도 쉽게 사용할 수 있기에 사용자의 범위도 신입부터 경력자까지 범용성 또한 좋다고 생각합니다.

시간이 촉박한 프로젝트에서 스크롤 애니메이션 퍼블리싱을 구현해야 할 경우, 작업시간이 부족해서 헤매지 마시고 AOS Library로 멋있고 동적인 사이트를 쉽게 만들어 보시기 바랍니다.

맑은커뮤니케이션 저희 퍼블리셔 직원분들도 파이팅!!

감사합니다.

 

 

 

반응형
반응형

 

 

TweenMax 곡선ㆍ라운드 애니메이션

 

프로젝트 퍼블리싱을 하다 보면, 디자이너 작업자들이 문의를 합니다.

 

혹시 곡선 형태의 애니메이션 처리 작업이 가능한가요?

퍼블리셔 : 음....

퍼블리셔 : 가능하지만 스크립트로 처리해야하고 0.0.1초 단위로 '가로 1px, 세로 1px씩 변할 때마다 엘리먼트의 좌표를 바꿔줘야 하고너무 복잡....블라 블라

 

 

디자이너 : 쉽게 말해주세요.

퍼블리셔 : 프로젝트 시간도 부족하고 해서 하기 힘들 것 같습니다.

디자이너 : 네ㅜㅜ

 

 

대부분의 곡선 애니메이션 구현을 요청하면 대부분의 퍼블리셔들은 이렇게 대답을 할 것 같습니다.

하지만 GSAP의 곡선을 처리하는 bezier 속성을 알게 된다면, 간편하게 곡선 애니메이션(라운드 움직임)의 효과를 만들 수 있습니다.

자바스크립트나 jQuery로는 구현할 수 없는 신세계??

그럼 바로 bezier curve에 대해서 알아보겠습니다.

이것을 알게되는 순간 퍼블리셔로써 큰 무기를 가지게 되는 것입니다.

 

 

 

 

 

bezier : Array

 

Target 객체를 정해진 좌표까지 이동을 직선으로 하는 것이 아닌 부드러운 곡선으로 이동합니다.

코드 작성 기본 규칙

GSAP 라이브러리로는 bezier curve 곡선을 사용할 수 없습니다. 

bezier 속성을 사용하기 위해서는 GSAP의 TweenMax 라이브러리를 사용해야 합니다.

저는 프로젝트 작업 시 GSAP 라이브러리보다는 TweenMax 라이브러리를 통합으로 사용합니다. 

왜냐하면TweenMax 라이브러리에서는 GSAP 라이브러리가 가지고 있는 기능들을 모두 사용 가능합니다.

 

TweenMax library CDN : https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineMax.min.js

 

 

bezier 코드는 CSS의 position 속성이 없다면 사용 불가능합니다. 그러나 애니메이션 키값을 'top', 'left'가 아닌 'x', 'y' 키값으로 좌표값을 작성하여 트윈 한다면 CSS position 속성 없이 애니메이션이 가능합니다.

 

 bezier 속성 안에 ease, repeat, yoyo 등의 gsap 속성을 사용할 수 있습니다. ease, repeat, yoyo 속성은 기초 1~3편 포스팅에서 작성했습니다. 기억나지 않으시면 다시 한번 보시길 추천드립니다.  

 

 

 

 

 

bezier 속성인 curviness, autoRotate, type 속성을 이용한 bezier 곡선

 

curviness : 커브의 강도를 나타냅니다. 키값이 크면 클수록 역동적으로 애니메이션 됩니다.

 

autoRotate : true를 키값으로 주면  진행방향이 '곡선의 움직임 방향'으로 엘리먼트가 틀어져 애니메이션이 발생하며, false를 키값으로 주면 진행방향과 상관없이 target 모습 그대로 틀어짐 없이 애니메이션 됩니다.

 

type : 기본값은 "thru"이며 "soft", "quadratic", "cubic" 4가지입니다. 첨부해드리는 예제를 통해서 보시면 차이를 알 수 있습니다.

 

 

좌표 키값과,  기본 GSAP 속성을 사용한 bezier 곡선

  TweenMax - bezier base 예제 실습 파일  

gsap_bezier_base.zip
0.03MB

 

 

 

 

curviness, autoRotate 속성 값을 적용한 bezier 곡선

  TweenMax - bezier curviness, autoRotate 예제 실습 파일  

gsap_bezier_autoRotate.zip
0.03MB

 

 

 

 

type 속성 값을 적용한 bezier 곡선

  TweenMax - bezier type 예제 실습 파일  

gsap_bezier_type.zip
0.03MB

 

 

 

 

 

bezier 마치며...

 

GSAP bezier 곡선 움직임(애니메이션)에 대하여 모두 알아보았습니다.

코드 작성이 자바스크립트나, jQuery 작성이 직관적이고 쉽게 곡선 애니메이션을 만들 수 있다는 것을 보셨죠?

이것을 끝으로 GSAPㆍTweenMax 라이브러리 포스팅을 마무리하고자 합니다.

GSAP 설치방법부터 기초, 심화과정의 세분화 과정을 통해 여러 편에 걸쳐 포스팅하였습니다.

GSAP 라이브러리 포스팅을 시작할 때 정리해야 할 내용들이 많아서 걱정이 많이 됐는데, 완전히 끝나고 나니 시원 섭섭하네요!

GSAPㆍTweenMax 라이브러리 포스팅 전편이 퍼블리싱하는데 길잡이가 되길 바라며, 마무리하겠습니다.

감사합니다.

 

반응형
반응형

 

 

GSAP Callback (트윈 제어 - 콜백 함수)

 

callback은 이벤트에 전달해주는 콜백 함수입니다.

GSAP는 함수를 호출하고 파라미터를 넘기는 과정을 편하게 제어할 수 있습니다.

GSAP 콜백 함수는 onInit, onStart, onComplete, onUpdate, onRepeat, onReverseComplete 가 있습니다.

이번 포스팅에서는 위 콜백 함수에 대해 알아보고자 하며, 예제는 자주 사용하는 콜백 함수 위주로 작성할 것이며,

사용빈도가 낮은 콜백 함수는 간단하게 설명 위주로 포스팅하고자 합니다.

 

 

 

 

onInit

 

애니메이션(Tween)이 시작되기 바로 전에 함수를 호출합니다.

onStart와 별 차이가 없지만, 당연히 onStart 보다 빨리 호출됩니다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>GSAP - onInit</title>
    <script src="js/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
    <script>
        $(function(){
            gsap.to('.tweenbox', 3, {
                marginLeft: 300,
                backgroundColor: '#ccc',
                border: '2px solid #222',
                borderRadius: 30,
                onInit: motionOnit
            });

            function motionOnit() {
                alert('GSAP Tween 콜백함수 시작 전'); //Tween이 시작되기 바로 전에 호출
            }
        });
    </script>
    <style>
        .tweenbox {width:100px;height:100px;border:2px solid crimson;background:lightcoral;box-sizing:border-box}	
    </style>
</head>
<body>
    <div class="tweenbox"></div>
</body>
</html>

  GSAP - onInit 예제 실습 파일  

gsap.onInit.zip
0.03MB

 

 

 

 

onStart

 

애니메이션(Tween)이 시작할 때 함수를 호출합니다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>GSAP - onStart</title>
    <script src="js/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
    <script>
        $(function(){
            gsap.to('.tweenbox', 3, {
                marginLeft: 300,
                backgroundColor: '#ccc',
                border: '2px solid #222',
                borderRadius: 30,
                onStart: motionStart
            });

            function motionStart() {
                alert('GSAP Tween 콜백함수 시작'); //Tween이 시작
            }
        });
    </script>
    <style>
        .tweenbox {width:100px;height:100px;border:2px solid crimson;background:lightcoral;box-sizing:border-box}	
    </style>
</head>
<body>
    <div class="tweenbox"></div>
</body>

  GSAP - onStart 예제 실습 파일  

gsap.onStart.zip
0.03MB

 

 

 

 

onComplete

 

애니메이션(Tween)이 종료되었을 때 함수를 호출합니다.

퍼블리셔가 프로젝트 퍼블리싱 작업 시 GSAP 콜백 함수 중 가장 사용빈도가 높습니다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>GSAP - onComplete</title>
    <script src="js/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
    <script>
        $(function(){
            gsap.to('.tweenbox', 3, {
                marginLeft: 300,
                backgroundColor: '#ccc',
                border: '2px solid #222',
                borderRadius: 30,
                onComplete: motionOncomplete
            });

            function motionOncomplete() {
                alert('GSAP Tween 콜백함수 종료');
                gsap.to('.tweenbox', 3, {
                    marginLeft: 0,
                    backgroundColor: 'lightcoral',
                    border: '2px solid crimson',
                    borderRadius: 0
                }); 
            }
        });
    </script>
    <style>
        .tweenbox {width:100px;height:100px;border:2px solid crimson;background:lightcoral;box-sizing:border-box}	
    </style>
</head>
<body>
    <div class="tweenbox"></div>
</body>
</html>

  GSAP - onComplete 예제 실습 파일  

gsap.onComplete.zip
0.03MB

 

 

 

 

Event(함수) + Params

 

애니메이션(Tween) 중 호출하고자 하는 함수 뒤에 Params 파라미터를 붙여 줄 수 있습니다.

 

 

코드 문법 규칙 

Ⅰ. 배열의 형태로 값을 넘겨주어야 합니다.

Ⅱ.  자기 자신의 값을 넘겨줄 때에는 "{self}"라고 값을 주어야 합니다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>GSAP - onComplete</title>
    <script src="js/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
    <script>
        $(function(){
            var outText = document.querySelector(".motion-message");
            gsap.to('.tweenbox', 3, {
                marginLeft: 300,
                backgroundColor: '#ccc',
                border: '2px solid #222',
                borderRadius: 30,
                onStart: motionMessage,
                onStartParams: ['GSAP Tween 콜백함수 시작 메시지','START'],
                onComplete: motionMessage,
                onCompleteParams: ['GSAP Tween 콜백함수 종료 메시지', 'END']
            });

            function motionMessage(message1, message2) {
                outText.innerHTML += message1 + '-' + message2 + '<br>';
            }
        });
    </script>
    <style>
        .tweenbox {width:100px;height:100px;border:2px solid crimson;background:lightcoral;box-sizing:border-box}	
        .motion-message{margin:30px 10px}
    </style>
</head>
<body>
    <div class="tweenbox"></div>
    <div class="motion-message"></div>
</body>
</html>

  GSAP - params 예제 실습 파일  

gsap.params.zip
0.03MB

 

 

 

 

onUpdate

 

애니메이션(Tween)이 계속 진행되는 동안 호출합니다.

해당 함수는 사용빈도가 낮으므로, 예제는 만들지 않고 위에 콜백 함수 설명으로 대신합니다. 

 

 

 

 

onRepeat

 

애니메이션(Tween)이 반복될 때마다 호출합니다.

해당 콜백 함수는 사용빈도가 낮으므로, 예제는 만들지 않고 위에 콜백 함수 설명으로 대신합니다. 

 

 

 

 

onReverseComplete

 

애니메이션(Tween)이 반전(Reverse) 된 후 모션이 완료되었을 때 호출합니다.

해당 콜백 함수는 사용빈도가 낮으므로, 예제는 만들지 않고 위에 콜백함수 설명으로 대신합니다. 

 

 

 

 

GSAP Callback(콜백 함수) 마치며...

 

포스팅했던 GSAP 기초 1~기초 3까지 내용을 모두 학습하셨다면, 웹퍼블싱 하면서 동적인 화면 구현의 프로젝트는 충분히 수행 가능하리라 생각됩니다.

하지만 퍼블리셔로서 발전하고 싶은 욕구를 만족시키기 위해 콜백 함수까지 알고 있다면 더욱 좋다고 생각합니다.

가끔 프로젝트 작업 시 GSAP(트윈 맥스)를 사용하다 콜백 함수를 사용해야 할 경우도 있습니다.  

다음 포스팅은 GSAP(TweenMax) 심화 마지막 편으로 곡선 방향의 애니메이션을 하는 방법을 알아보겠습니다.

감사합니다.

 

반응형
반응형

 

 

GSAP Variables (트윈 제어 - Style Controlling )

 

이전 '기초 2 포스팅' 에서는 GSAP는 움직임을 제어할 수 이벤트 컨트롤링에 대해 알아보았습니다.

이번 포스팅 주제는 스타일 컨트롤하는 방법에 대해서 다루어 보겠습니다.

CSS를 잘 다루는 퍼블리셔라면 이번 주제의 내용을 쉽게 이해하실 수 있으리라 생각됩니다.

또한 Easing 컨트롤에 대해 같이 알아보겠습니다.

 

 

 

 

CSS Style 트윈 기본 문법

 

기본적인 문법은 CSS 작성방법과 동일하며, CSS 코드를 모두 사용 가능합니다.

그러나 background-color, margin-top, background-image와 같이 css에 '-' 가 포함되어 있는 문법을 사용해 트윈 스타일을 변경하고자 할 경우에는 카멜 표기법을 사용합니다.

카멜 표기법 사용방법은 '-' 뒤에 영문을 대문자로 작성합니다.

예를 들어 backgroundColor, marginTop, backgroundImage로 작성합니다.

 

gsap.to('.tweenbox', 3, {width:300, height:300, backgroundColor:'#ccc'});

  GSAP - CSS Style Control 예제 실습 파일  

gsap.css.style.zip
0.03MB

 

 

 

 

GSAP 제공하는 Style 트윈 기본 문법

 

CSS Style과 동일하게 gsap에 내장된 Style 변경 방법입니다.

장점은 CSS Style 보다 코드가 좀 간편합니다.

CSS만 사용해도 무리가 없으나, 더 알고 있다고 나쁜 건 없겠죠?

GSAP에서 제공하는 Style과 CSS Style의 문법 차이를 아래와 같이 간단하게 정리해 보겠습니다.

 

GSAP CSS
x:300 transform: translateX(300px), margin-left: 300px 
y:300 transform: translateY(300px), margin-top: 300px 
scaleX:2 transfome: scaleX(2)
scaleY:2 transfome: scaleY(2)
rotation:360 transform: rotate(360deg)
rotationX:180 transform: rotateX(180deg)
rotationY:180 transform: rotateY(180deg)
skewY:45 transform: skewY(45deg)
xPercent:45 transform: translateX(45%)
yPercent:45 transform: translateY(45%)

 

  GSAP Style Control 작성 문법  

 

gsap.fromTo('.tweenbox', 1.5, { scaleX:1, scaleY:1, rotation:0, delay: 0 }, {scaleX:2, scaleY:2, rotation:180, delay: .5 });

  GSAP - GSAP Style Control 예제 실습 파일  

gsap_gsap.css.zip
0.03MB

 

 

 

 

GSAP Easing

 

GSAP는 Jquery처럼 easing 함수를 제공합니다.

easing의 function은 애니메이션이 진행됨에 따라 지정한 값의 속도 변화 움직임을 컨트롤하는 설정 값입니다.

그렇기 때문에 움직임을 표현할 때 없어서는 안 될 중요한 요소입니다.

GSAP에서 기본 easeing 값은 Power1.easeOut 입니다.

 

 

  CDN - Easing 라이브러리 적용방법  

 

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>GSAP</title>
	<!-- CDN GSAP, Easing -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/EasePack.min.js"></script>
</head>
<body>

</body>
</html>

 

 

  Easing  코드 적용방법  

 

TweenMax.staggerFrom('.tweenbox', 1, {
	ease: Back.easeOut,
	opacity: 0,
	y: 200,
	delay: 0.5
}, 0.2);

  GSAP - GSAP Easing Control 예제 실습 파일  

gsap_easing.zip
0.03MB

 

 

Easing의 종류는 GSAP 공식 사이트에서 easing을 종류별 구현하여 확인할 수 있습니다.

또한 예시, 실행을 해보고 easing 코드를 복사하면 쉽게 사용할 수 있습니다.

백 번 설명하여 포스팅하는 것보다는 직접 보시면 이해가 더 빠르리라 생각되어, GSAP 공식 사이트의 easing 메뉴 URL을 아래에 공유해 드립니다.

 

https://greensock.com/docs/Easing

 

 

 

 

GSAP Controlling, Easing 마치며...

 

GSAP Style, Easing Controlling에 대하여 정리해 보았습니다.

이전에 작성한 '기초 2', 이번에 작성한 '기초 3' 통해 GSAP의 이벤트, 스타일,  Easing 컨트롤에 대해 모두 다루어 보았습니다.

이 글을 보신 분들 모두 퍼블리싱하시면서 GSAP 애니메이션을 떡 주무르듯이 컨트롤하실 수 있는 고수가 되실 수 있었으면 합니다.

다음 포스팅은 GSAP eventCallback 함수에 대해 간단하게 알아 보겠습니다.

감사합니다.

 

 

 

반응형
반응형

 

 

GSAP Variables (트윈 제어 - Tween Controlling )

 

GSAP는 움직임을 제어할 수 있는 메서드를 제공합니다.

이번 포스팅에서는 repeat(), repeatDelay(), delay(), yoyo(), start(), resume(), restart(), reverse(), isActive(), pause(), seek(), timeScale() 에 대해 예제와 설명을 통해 알아가 보겠습니다. 

 

 

 

 

repeat(number)

 

애니메이션(트윈이라 정의) 반복 횟수 설정합니다.

기본값은 1이며, -1을 설정하면 무한반복됩니다. delay가 포함되어 있는 경우 첫 번째 트윈만 delay가 적용되고, repeat가 반복 실행되는 두 번째부터는 delay가 적용되지 않습니다.

 

//CSS
.tweenbox {
	width:100px;
	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
$(function(){
	gsap.to('.tweenbox', 3, {
		marginTop: 300,
		marginLeft: 300,
		backgroundColor: '#ccc',
		border: '2px solid #222',
		borderRadius: 30,
		repeat: 3 //repeat 값이 -1 일 경우 무한 반복
	});
});

//HTML
<div class="tweenbox"></div>

  gsap.repeat() 예제 실습 파일  

gsap.repeat().zip
0.03MB

 

 

 

 

repeatDelay(number)

 

트윈 반복 시  지연 시간을 초 단위로 설정합니다.

 

//CSS
.tweenbox {
	width:100px;
	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
$(function(){
	gsap.to('.tweenbox', 3, {
		marginTop: 300,
		marginLeft: 300,
		backgroundColor: '#ccc',
		border: '2px solid #222',
		borderRadius: 30,
		repeat: 3 //repeat 값이 -1 일 경우 무한 반복
		repeatDelay: 2 // 반복 지연시간 설정(초 단위)
	});
});

//HTML
<div class="tweenbox"></div>

  gsap.repeatDelay() 예제 실습 파일  

gsap.repeatDelay().zip
0.03MB

 

 

 

 

delay(number)

 

트윈 지연 시간을 초 단위로 설정합니다.

 

//CSS
.btn {
	display:inline-block;
	padding:5px 10px 6px;
	background-color:#333;
	font-size:13px;
	color:#fff;
	text-decoration:none
}
.content {
	display:flex;
	justify-content:center;
	padding:200px 0;
	border:1px solid #000
}
.tweenbox {
	width:100px;
	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
$(function(){
	$('.btn').click(function(){
		gsap.fromTo('.tweenbox', 1.5, { scaleX:1, scaleY:1, rotation:0, delay: 0 }, {scaleX:2, scaleY:2, rotation:180, delay: .5 });
	});
});

//HTML
<a href="#none" class="btn">Toggle Tween Delay</a>
<div class="content">
	<div class="tweenbox"></div>
</div>

  gsap.delay() 예제 실습 파일  

gsap.delay().zip
0.03MB

 

 

 

 

yoyo(Boolean)

 

트윈을 앞뒤로 반복하여 실행합니다.

 

//CSS
.tweenbox {
	width:100px;
	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
$(function(){
	TweenMax.to('.tweenbox', 3, {
		marginLeft: 300,
		backgroundColor: '#ccc',
		border: '2px solid #222',
		borderRadius: 30,
		repeat: -1, //repeat 값이 -1 일 경우 무한 반복
		yoyo: true // 애니메이션을 앞뒤로 반복하여 실행 시킴 - yoyo: Boolean 
	});
});

//HTML
<div class="tweenbox"></div>

  gsap.yoyo() 예제 실습 파일  

gsap.yoyo().zip
0.03MB

 

 

 

 

pause( ), resume( ), restart( )

 

  pause( )   - 트윈의 현재 위치에서 일시 중지하는 설정합니다.

  resume( )   - 방향을 바꾸지 않고 현재 위치에서 트윈을 재시작하는 설정합니다.

  restart( )   - 트윈을 처음부터 다시 시작하는 설정합니다.

 

//CSS
.btn {
	display:inline-block;
	padding:5px 10px 6px;
	background-color:#333;
	font-size:13px;
	color:#fff;
	text-decoration:none
}
.content {
	display:flex;
	padding:100px 30px;
	border:1px solid #000
}
.tweenbox {
	width:100px;
	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
var tweenBox;

function tweenStart(){
	var motionBox = document.getElementById("tweenBox");
	tweenBox = TweenMax.fromTo(motionBox, 5, { x:0, backgroundColor:'lightcoral', border:'2px solid crimson'}, {x:500, backgroundColor:'#ccc', border:'2px solid #222', borderRadius:30});
}

function tweenPause(){
	tweenBox.pause();   //멈춤
}

function tweenResume(){
	tweenBox.resume();  //재시작
}

function tweenRestart(){
	tweenBox.restart(); //처음부터 다시시작
}


//HTML
<a href="javascript:tweenStart();" class="btn">Start</a>
<a href="javascript:tweenPause();" class="btn">Pause()</a>
<a href="javascript:tweenResume();" class="btn">Resume()</a>
<a href="javascript:tweenRestart();" class="btn">Restart()</a>
<div class="content">
    <div id="tweenBox" class="tweenbox"></div>
</div>

  pause(), resume(), restart() 예제 실습 파일  

start(),restart(),resume(),pause().zip
0.03MB

 

 

 

 

reverse( )

 

트윈 재생을 역방향으로 설정 합니다.

 

//CSS
.btn {
	display:inline-block;
	padding:5px 10px 6px;
	background-color:#333;
	font-size:13px;
	color:#fff;
	text-decoration:none
}
.content {
	display:flex;
	padding:100px 30px;
	border:1px solid #000
}
.tweenbox {
	width:100px;
	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
var tweenBox;

function tweenStart(){
	var motionBox = document.getElementById("tweenBox1");
	tweenBox = gsap.fromTo(motionBox, 2, { x:0, backgroundColor:'lightcoral', border:'2px solid crimson'}, {x:300, backgroundColor:'#ccc', border:'2px solid #222', borderRadius:30})
}

function tweenReverse(){
	tweenBox.reverse();   //역방향으로 진행
}

//HTML
<a href="javascript:tweenStart();" class="btn">Start</a>
<a href="javascript:tweenReverse();" class="btn">Reverse()</a>
<div class="content">
    <div id="tweenBox1" class="tweenbox"></div>
</div>

  reverse() 예제 실습 파일  

reverse().zip
0.03MB

 

 

 

 

isActive( )

 

트윈의 활성화 여부를 나타냅니다.

 

//CSS
.tweenbox {
	width:100px;
	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}
button {margin:10px}

//JS
$(function(){
	var tween = gsap.to('.tweenbox', 2, {
		x: 300, 
		backgroundColor: '#ccc', 
		border: '2px solid #222', 
		borderRadius: 30,
		reversed: true //reversed() : 애니메이션의 역방향에 대한 여부 및 설정
	});

	$('#tweenBox').click(function(){
		if(!tween.isActive()){  //isActive() : 애니메이션 활성화 여부
			tween.reversed() ? tween.play() : tween.reverse();  //삼항연산자 :  조건 ? ture : false
		}
	});
});

//HTML
<div class="tweenbox"></div>
<button id="tweenBox">Toggle Tween Reverse</button>

  isActive() 예제 실습 파일  

isActive().zip
0.03MB

 

 

 

 

seek(number)

 

트윈을 지정한 위치로 이동 설정 합니다.

 

//CSS
.btn {
	display:inline-block;
	padding:5px 10px 6px;
	background-color:#333;
	font-size:13px;
	color:#fff;
	text-decoration:none
}
.content {
	display:flex;
	padding:100px 30px;
	border:1px solid #000
}
.tweenbox {
	width:100px;
	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
var tweenBox;

function tweenStart(){
	var motionBox = document.getElementById("tweenBox");
	tweenBox = gsap.fromTo(motionBox, 5, { x:0, backgroundColor:'lightcoral', border:'2px solid crimson'}, {x:300, backgroundColor:'#ccc', border:'2px solid #222', borderRadius:30});
}

function tweenSeek(){
	tweenBox.seek(3);   //지정한 위치로 이동(3초 위치로)
}

//HTML
<div class="content">
    <div id="tweenBox" class="tweenbox"></div>
</div>

  seek() 예제 실습 파일  

seek().zip
0.03MB

 

 

 

 

timeScale(number)

 

트윈의 속도 증가와 감속을 설정합니다.

기본값은 1이며, 1보다 작을 경우 속도가 감소하며, 값이 1보다 클 경우 속도가 증가합니다.

 

//CSS
.btn {
	display:inline-block;
	padding:5px 10px 6px;
	background-color:#333;
	font-size:13px;
	color:#fff;
	text-decoration:none
}
.content {
	display:flex;
	padding:100px 30px;
	border:1px solid #000
}
.tweenbox {
	width:100px;
	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
var tweenBox;

function tweenStart(){
	var motionBox = document.getElementById("tweenBox");
	tweenBox = gsap.fromTo(motionBox, 5, { x:0, backgroundColor:'lightcoral', border:'2px solid crimson'}, {x:700, backgroundColor:'#ccc', border:'2px solid #222', borderRadius:30});
}

function tweenTimescale(){
	tweenBox.timeScale(0.5); //배율, 속도 감소(0.5는 최초 속도의 절반 느려짐 의미함) / timeScale(2) - 속도가 2배 빨라짐 
}

//HTML
<a href="javascript:tweenStart();" class="btn">Start</a>
<a href="javascript:tweenTimescale();" class="btn">Timescale(0.5)</a>
<div class="content">
    <div id="tweenBox" class="tweenbox"></div>
</div>

  timeScale() 예제 실습 파일  

timeScale().zip
0.03MB

 

 

 

 

GSAP Controlling을 마치며...

 

이번 포스팅은 트윈 컨트롤 중  이벤트 발생 시 트윈 컨트롤에 대해 주로 알아보았습니다.

GSAP 트윈 컨트롤 포스팅해드린 내용만 완벽하게 숙지하신다면, 웹퍼블리싱(이벤트 발생 시트 윈 컨트롤 ) 하는데 문제가 없으리라 생각됩니다.

다음 편에는 트윈 컨트롤 중 style 컨트롤에 대해서 포스팅 하고자 합니다.

퍼블리셔가 해야 할 공부가 너무 많죠??

다들 힘내서 퍼블리싱 합시다!!  파이팅!!!!!!

 

반응형
반응형

 

 

GSAP 트윈 기본 문법

 

GSAP는 자바스크립트 객체의 숫자형 속성을 통해 애니메이션(앞으로 이것을 '트윈'이라 정의합니다.)을 실행합니다.

예를 들어, 특정 속성의 값을 3초 동안 모서리에 라운드 트윈을 주는 기본 문법 코드는 다음과 같습니다.

 

gsap.to('.tweenbox', 3, {borderRadius: 30});

 

첫 번째 파라미터 값은 트윈 할 목표 대상(Target), 두 번째 파라미터 값은 지속시간(Duration), 세 번째 파라미터 값은 트윈 할 목표 대상(Target)의 변화된 다른 속성(Properties) 값으로 변화가 발생하면서, 트윈이 표현됩니다. 

 

GSAP 메서드 설명에 앞서서 기본 문법에 설명드렸습니다.

지금부터는 기본 메서드인 .to(), .from(),  fromTo(), staggerTo(), staggerFrom(), TimelineMax()에 대해서 다루겠습니다.

 

 

 

 

gsap.to( )

 

this(Target) 속성에서 지정한 속성까지 트윈

 

//CSS
.tweenbox {
	width:100px;
 	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
gsap.to('.tweenbox', 3, {
	marginLeft: 300,
	backgroundColor: '#ccc',
	border: '2px solid #222',
	borderRadius: 30
});

  gsap.to() 예제 실습 파일  

gsap.to().zip
0.03MB

 

 

 

 

gsap.from( )

 

지정한 속성에서 this(Target) 속성까지 트윈 

 

//CSS
.tweenbox {
	width:100px;
 	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
gsap.from('.tweenbox', 3, {
	marginLeft: 300,
	backgroundColor: '#ccc',
	border: '2px solid #222',
	borderRadius: 30
});

  gsap.from() 예제 실습 파일  

gsap.from().zip
0.03MB

 

 

 

 

gsap.fromTo( )

 

from에서 지정된 값에서 to가 지정된 값으로 트윈

gsap.fromTo(target, duration, {from vars}, {to vars});

 

//CSS
.tweenbox {
	width:100px;
	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
gsap.fromTo('.tweenbox', 5, { x:0, backgroundColor:'lightcoral', border:'2px solid crimson'}, {x:300, backgroundColor:'#ccc', border:'2px solid #222', borderRadius:30});

  gsap.fromTo() 예제 실습 파일  

gsap.fromTo().zip
0.03MB

 

 

 

 

TweenMax.staggerTo( )

 

TweenMax.staggerTo(target(Array), duration, {vars}, 대상 배열 트윈 사이의 딜레이 시간);

 

여러 개의 배열(Array)인 this(Target) 속성을  순차적(시간 차)으로 지정한 속성까지 트윈 합니다.

stagger 메서드는 공식 문법이 gsap로 바뀌기 이전 버전(2.1.3 - Version)인 TweenMax 였을 때 존재했던 메서드이지만 gsap로 공식 문법(3.0.0 - Version)이 변경되고, TimelineMax 하나의 메서드로 통일된 것 같습니다.

 

stagger(Target 배열) : 각 배열 트윈 사이의 모션 실행,  TimelineMax(트윈 배열) : this(Target) 트윈이 종료 후 모션 실행합니다.

이렇듯 엄연히 두 개의 메서드는 결이 다른데 왜 없어졌는지 모르겠습니다. 

개인적으로 저는 stagger 메서드를 더 선호합니다.

그러나 현재 최신 버전에서도 하위 버전을 지원하므로 TweenMax.staggerTo() 사용 가능합니다.

 

gsap를 몇 년 전부터 미리 알지 못했다면, 이렇게 좋은 메서드를 사용하지 못했을 메서드가 될 뻔했습니다.

 

 

 

//CSS
.btn {
	display:inline-block;
	padding:5px 10px 6px;
	background-color:#333;
	font-size:13px;
	color:#fff;
	text-decoration:none
}
.content {
	padding:100px 30px;
	border:1px solid #000
}
ul {display:flex}
li.tweenbox {
	display:flex;
	justify-content:center;
	align-items:center;
	width:100px;
	height:100px;
	margin:20px;
	background:lightcoral;
	border-radius:10px;
	list-style:none
}

//JS
function tweenStaggerTo(){
	var m0 = document.getElementById("e0");
	var m1 = document.getElementById("e1");
	var m2 = document.getElementById("e2");
	var m3 = document.getElementById("e3");
	var m4 = document.getElementById("e4");
	TweenMax.staggerTo([m0, m1, m2, m3, m4], 1, { rotation:180 }, 0.5);	//TweenMax.staggerTo([객체1, 객체2, 객체3], 시간, {트윈 모션}, 모션 사이의 딜레이 시간);
}

//HTML
<a href="javascript:tweenStaggerTo();" class="btn">Start</a>
<div class="content">
	<ul>
		<li id="e0" class="tweenbox">1</li>
		<li id="e1" class="tweenbox">2</li>
		<li id="e2" class="tweenbox">3</li>
		<li id="e3" class="tweenbox">4</li>
		<li id="e4" class="tweenbox">5</li>
	</ul>
</div>

  TweenMax.staggerTo() 예제 실습 파일  

TweenMax.staggerTo().zip
0.03MB

 

 

 

 

TweenMax.staggerFrom( )

 

여러 개의 배열(Array)을 지정한 속성에서 this(Target) 속성까지  순차적(시간 차)으로  트윈 합니다.

TweenMax.staggerFrom(target(Array), duration, {vars}, 대상 배열 트윈 사이의 딜레이 시간);

 

//CSS
ul {
	display:flex;
	justify-content:center;
}
li.tweenbox {
	display:flex;
	justify-content:center;
	align-items:center;
	width:100px;
	height:100px;
	margin:20px;
	background:lightcoral;
	border-radius:10px;
	list-style:none
}

//JS
TweenMax.staggerFrom('.tweenbox', 1, {
	ease: Back.easeOut,
	opacity: 0,
	y: 200,
	delay: 0.5
}, 0.2);

//HTML
<ul>
	<li class="tweenbox">1</li>
	<li class="tweenbox">2</li>
	<li class="tweenbox">3</li>
	<li class="tweenbox">4</li>
	<li class="tweenbox">5</li>
</ul>

  TweenMax.staggerFrom() 예제 실습 파일  

TweenMax.staggerfrom().zip
0.03MB

 

 

 

 

TimelineMax( )

 

this(Target) 하나의 객체를 순차적으로 트윈 하는 타임라인  문법입니다. 

gsap.to()가 연달아 있는 코드와 비슷합니다.

 

//CSS
ul {
	display:flex;
	justify-content:center
}
li.tweenbox {
	display:flex;
	justify-content:center;
	align-items:center;
	width:100px;
	height:100px;
	margin:20px;
	background:lightcoral;
	border-radius:10px;
	color:#fff;
	list-style:none
}

//JS
var timeLine = new TimelineMax();
timeLine.to('.tweenbox', 1, { backgroundColor: '#ddd' })
	.to('.tweenbox', 1, { backgroundColor: 'cyan' })
	.to('.tweenbox', 1, { backgroundColor: '#ccc' });
        
//HTML
<ul>
	<li class="tweenbox">1</li>
</ul>

  TimelineMax() 예제 실습 파일  

TimelineMax().zip
0.03MB

 

 

 

 

GSAP 메서드(기초) 마치며...

 

GSAP 메서드는 이정도만 숙지하고 계셔도 동적인 화면을 만드실 때 문제가 없으시리 생각됩니다.

제가 포스팅한 GSAP 메서드(기초)편이 퍼블리싱하는데 도움이 되었으면 합니다.

다음 포스팅은 GSAP VARIABLES 대해서 알아 보겠습니다.

VARIABLES는 알아야 할 것들이 많기 때문에 2~3편의 글을 작성하고자 계획 중입니다.

기대해 주세요!!!

 

반응형
반응형
프로젝트를 하다 보면 동적으로 웹 퍼블리싱해야 할 경우 jQuery animaion을 사용하거나, css animaition을 대부분 사용합니다. 
애니메이션을 더 사용하기 쉽고 강력크한 퍼포먼스를 구현할 수 없을까?
바로~~ 바로!!!
트윈맥스 애니메이션 자바스크립트 라이브러리에 대해 여러 편에 걸쳐 포스팅하여 제대로 알아보겠습니다.

 

 

 

 

GSAP

 

GreenSock Animation Platform (GSAP)는 퍼블리싱을 하면서 애니메이션을 쉽게 사용할 수 있는 강력한 타임라인 기반의 전용 애니메이션 자바스크립트 라이브러리입니다.

GSAP는 CSS의 keyframeanimation 보다 더 정밀한 컨트롤을 할 수 있습니다. 

또한 GSAP는 제이쿼리보다 20배 이상 퍼포먼스가 좋습니다.

이번 가이드에서는 GSAP세팅방법기본문법에 대해서 알아볼 것입니다.

 

 

 

 

Get GSAP (Installation)

 

코드를 작성하기 전에, HTML 파일에 GSAP 라이브러리를 추가해야 합니다.

CDN을 이용하여 추가해도 되고 파일을 다운로드하여 추가해도 됩니다.

당연히 NPM으로 설치도 가능합니다.

 

CDN 버전 선택 방법 : https://cdnjs.com/libraries/gsap/3.8.0

Download 방법 : https://greensock.com/docs/v3/Installation/#download

NPM 설치 방법 : https://greensock.com/docs/v3/Installation/#npm-club

 

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>GSAP</title>
	<!-- CDN -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>		
    
	<!-- local(download file) -->
	<script src="js/gsap.min.js"></script>
</head>
<body>

</body>
</html>

 

 

 

 

기본 문법

 

gsap.to(target:Object, duration:Number, {variables:Object});

.to()는 일반적으로  제이쿼리의 .animate()라고 생각하면 됩니다.


target : Object - 대상 오브젝트(인자)

duration : Number - 애니메이션 지속 시간 /(초)

variables : Object - target에 부여할 키 값

 

 

  문법 작성 기본규칙  

 

Ⅰ. CSS  키값은 동일하지만 border-radius, border-right 와 같이 '-' 문자가 들어가 있을 경우 카멜 표기법을 사용하면 됩니다. (EX : borderRadius, borderRight)

Ⅱ. target은 유연하게 사용 가능하기 때문에 제이쿼리 형태로 사용해도 되고 아니어도 됩니다. (EX : $(".tweenbox") , .tweenbox, 변수명 

 

 

 

 

입문 가이드 마치며...

 

다음 포스팅은 GSAP의 메서드와 VARIABLES에 대해서 가이드할 계획입니다.

이번 입문 가이드에 대해서 이해 못하셔도 됩니다. 다음 포스팅에서는 예제를 작성하여 설명할 예정이니까요!!

좀 더 쉽겠죠??

저만의 생각은 아니겠죠??

제가 작성하고 공유하는 가이드가 웹퍼블리싱 하는데 도움이 되었으면 합니다.

 

반응형
반응형

안녕하세요, 맑은커뮤니케이션의 퍼블리셔 윤상원입니다.

오늘은 IE10 이상을 지원하는 페이지 작업을 할 때 유용하게 쓰이는 Swiper에 대해 정리해보았습니다.

 

 

 

사용 방법

 

1단계: 연결(두 가지 방법)

 

 

1. 파일을 다운로드하지 않고 html에서 CDN 연결

<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">

 

 

2. 파일을 다운로드해서 html 연결

https://github.com/nolimits4web/swiper/archive/v5.3.0.zip

 

 

예시)

<!DOCTYPE html>
<html lang="ko">
<head>
    ...
    <link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
    ...
    <script src="path/to/swiper.min.js"></script>
</body>
</html>

CSS, JS 파일은 package 폴더 안에서 찾아볼 수 있습니다.

 

 

2단계: 기본 레이아웃 추가

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
</div>

swiper-container > swiper-wrapper > swiper-slide 순으로 감싸져있어야 하고,

swiper-slide가 슬라이드의 내용이 됩니다.

 

 

 

3단계: 자바스크립트에서 Swiper 초기화

new Swiper('.swiper-container');

swiper-container라는 클래스 이름은 변경하지 않아야 합니다.

 

 

예제

See the Pen 간단한 스와이퍼 예제 by 윤 시대 (@yoonsangwon) on CodePen.

 

 

다른 옵션을 넣지 않고 1번부터 3번까지의 내용을 적용한 예제입니다.

 

 

 

 

슬라이드 옵션

 

Swiper에는 다양한 옵션들이 있습니다.

옵션을 사용하면 마우스로만 움직이는 슬라이드를 버튼 클릭으로 움직이게 하거나,

아무런 동작을 하지 않아도 자동으로 슬라이드가 넘어가게 하는 등 사용자가 더 편리하게 이용할 수 있습니다.

 

 

슬라이드 옵션 예제

See the Pen 슬라이드 옵션 by 윤 시대 (@yoonsangwon) on CodePen.

 

 

예제처럼 필요한 옵션과 값을 적어주면 적용할 수 있습니다.

동작이 아닌 버튼이나 스크롤 바가 생기는 등의 옵션은 해당 html 코드도 같이 넣어주어야 합니다.

 

 

옵션 적용하는 방법

사용방법 3번이 Swiper를 초기화하는 방법(한 줄)이었다면 옵션을 추가할 때는 코드의 모양이 바뀌어야 합니다.(여러 줄)

 

옵션이 필요없을 때

new Swiper('.swiper-container');

 

옵션을 적용해야 할 때

var mySwiper = new Swiper('.swiper-container', {

   // 여기에 옵션을 넣어야 합니다.

});

 

 

자주 사용하는 옵션 목록 ('더보기'를 클릭하면 옵션을 볼 수 있습니다)

 

Navigation(페이지를 넘기는 버튼)

더보기

[HTML]

<div class="swiper-button-prev"></div> // 이전 페이지
<div class="swiper-button-next"></div> // 다음 페이지

[Javascript]

var mySwiper = new Swiper('.swiper-container', {
  navigation: {
    prevEl: '.swiper-button-prev',
    nextEl: '.swiper-button-next',
  },
});

See the Pen rNVevqd by 윤 시대 (@yoonsangwon) on CodePen.

 

 

Pagination(페이지의 순서를 나타내는 불릿)

더보기

[HTML]

<div class="swiper-pagination"></div>

[Javascript]

var mySwiper = new Swiper('.swiper-container', {
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
  },
});

See the Pen WNvwJLp by 윤 시대 (@yoonsangwon) on CodePen.

 

 

자동 재생(1000 = 1초)

더보기

[Javascript]

var mySwiper = new Swiper('.swiper-container', {
  autoplay: {
    delay: 2000,
  },
});

See the Pen ExjKLGe by 윤 시대 (@yoonsangwon) on CodePen.

 

 

한 번에 여러 장의 슬라이드를 표현하는 방법 + 슬라이드 무한 반복

더보기

[Javascript]

var swiper = new Swiper('.swiper-container', {
    slidesPerView: 3, // 보여지는 슬라이드 수
    spaceBetween: 30, // 슬라이드 간의 거리(px 단위)
    loop: true, // 슬라이드 무한 반복
    centeredSlides: true, // 다음 슬라이드의 모습이 50%만 보입니다.(중앙)
});

See the Pen xxGVJZO by 윤 시대 (@yoonsangwon) on CodePen.

 

 

스와이퍼 홈페이지에서 더 많은 옵션과 예제를 확인할 수 있습니다.

옵션:  https://swiperjs.com/api/

예제:  https://swiperjs.com/demos/

 

 

 

홈페이지에는 나오지 않는 방법들

한 페이지에서 스와이퍼를 여러 번 사용해야 할 때 선언하는 방법

더보기

스와이퍼를 한 페이지에서 여러 번 사용할 때가 있습니다.

그럴 때는 swiper-container 클래스마다 추가로 클래스를 넣고, 각자의 클래스를 스크립트에 선언해주면 됩니다.

 

[HTML]

// 첫번째 슬라이드입니다.
<div class="swiper-container swiper1">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
</div>

// 두번째 슬라이드입니다.
<div class="swiper-container swiper2">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
</div>

 

[Javascript]

// 첫번째 슬라이드에 추가한 클래스를 선언해주세요.
var swiper1 = new Swiper('.swiper1', {

	// 옵션을 넣어주세요.
});

// 두번째 슬라이드에 추가한 클래스를 선언해주세요.
var swiper2 = new Swiper('.swiper2', {

	// 옵션을 넣어주세요.
});

 

 

 

슬라이드 버튼을 swiper-container 밖으로 이동시키는 방법

더보기

작업을 하다보면 슬라이드의 버튼을 컨테이너 밖으로 이동시키고 싶은데 화면에서 사라질 때가 있습니다.

그 이유는 .swiper-container 안에 들어간 overflow:hidden 속성 때문인데요,

슬라이드를 사용하기 위해선 overflow 속성을 끌 수 없으니 이 방법을 사용하면 해결할 수 있습니다.

 

[HTML] - 기존

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">슬라이드 1</div>
        <div class="swiper-slide">슬라이드 2</div>
        <div class="swiper-slide">슬라이드 3</div>
    </div>
        
    <div class="swiper-button-prev"></div> <!-- 이전 페이지 -->
    <div class="swiper-button-next"></div> <!-- 다음 페이지 -->
</div>

 [HTML] - 수정 후

<div> // 임의의 DIV
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">슬라이드 1</div>
            <div class="swiper-slide">슬라이드 2</div>
            <div class="swiper-slide">슬라이드 3</div>
        </div>
    </div>
    
    <div class="swiper-button-prev"></div> <!-- 이전 페이지 -->
    <div class="swiper-button-next"></div> <!-- 다음 페이지 -->
</div>

기존에 .swiper-container 안에 있던 버튼 두 가지를 밖으로 빼내고 전체를 임의의 div를 새로 감싼 모습입니다.

그리고 이제 새로 감싼 div에 position:relative를 추가하고,

.swiper-container에 있던 position:relative를 position:static 으로 변경해주시면 됩니다.

 

[결과 화면]

 

 

감사합니다.

반응형
반응형

안녕하세요

(주)맑은커뮤니케이션에 근무하는 유아영입니다.

오늘은 placeholder에 대해 알아보려고 하는데요,

HTML5의 placeholder 속성은 input 요소와 textarea 요소에 알맞은 힌트를 제공하는 목적으로 사용됩니다.

이러한 힌트는 사용자가 입력상자에 데이터를 입력하는데 도움을 줍니다.

사용 방법은 <input type="text" placeholder="내용을 입력하세요."> 이렇게 써줄 수가 있는데요.


 IE

chrome 

Firefox

safari

 10+ -ms

47+

4+ -moz-, 51+ 


9+



하지만, IE 6~9 사이의 브라우저는 HTML5의 placeholder 속성을 지원하지 않습니다.


해결 방법을 알아볼까요?


1. https://github.com/mathiasbynens/jquery-placeholder

위의 url에서 스크립트를 다운받는다.

placeholder.js 를 사용하면 IE9 이하는 .placeholder 이라는 클래스가 자동으로 생성된다.

2. <script type="text/javascript" src="js/jquery.placeholder.js"></script>

코드를 추가한다.

3. js파일에 $('input, textarea').placeholder();

코드를 추가한다.

4. css.파일에 .placeholder 클래스를 이용해 속성을 주면 끝납니다.

위의 내용을 예제를 통해 한 번 살펴볼까요?



See the Pen dwBoOj by ahyoung (@ahyoung) on CodePen.






::placeholder 선택자로 선택하여 스타일을 줄 수 있습니다.

input::placeholder : Chrome, Firefox, Opera, Safari 최신 버전에서는 적용이 잘 됩니다.

하지만 Chrome, Firefox, Opera, Safari의 구버전과 IE에서는 적용되지 않습니다.


그 해결 방법은 아래와 같습니다.

input::-webkit-input-placeholder : Chrome

input:-ms-input-placeholder : IE

input:-mos-input-placeholder : Firefox


텍스트로만 보면 이해가 안 될 수 있는데요

예제를 통해 같이 한 번 알아볼까요?




See the Pen gZJYGb by ahyoung (@ahyoung) on CodePen.



Tip) 다 적용해도 파이어폭스에서 이상하게 뿌옇게 보이는 현상을 보실 수가 있는데요, 

그럴 때는 input::placeholder { opacity: 1 } 을 넣어주면 해결이 됩니다.




placeholder를 사용하다 보면 줄바꿈을 하고싶어질 때가 있을텐데요 

그 방법에 대해 알아볼까요?


See the Pen maZbdQ by ahyoung (@ahyoung) on CodePen.


설명


&#10; : 줄바꿈을 하고 싶은 곳에 해당 코드를 추가해줍니다.




오늘은 placeholder에 대해 알아보았는데요

부족한 점이나 잘못된 점이 있으면 댓글 부탁드립니다!

감사합니다.



반응형
반응형

jQuery 메서드

jQuery 메서드를 이전 1편에 이어 정리하고자 합니다.
사용 용도에 따라 분류하였습니다.
맑은커뮤니케이션 웹퍼블리셔 및 웹퍼블리싱 업무중 스크립트를 작성하다 갑자기 메서드가 기억나지 않는 분들에 참고가 되었으면 합니다.

스타일 메서드

분류 핵심 내용 핵심 프로퍼티 및 메서드
스타일
다루기
스타일 값 구하기 $대상.css("스타일 속성 이름")
$대상.css(["스타일 속성 이름", ...])
스타일 값 설정하기 $대상.css("스타일 속성 이름",값)
$대상.css({스타일 속성 이름:값, ...})
클래스 추가 $대상.addClass("클래스 이름")
클래스 삭제 $대상.removeClass("클래스 이름")

속성 메서드

분류 핵심 내용 핵심 프로퍼티 및 메서드
속성
다루기
속성값 구하기 $대상.attr("속성이름")
$대상.data("data-속성이름")
속성값 설정하기 $대상.attr("속성이름","값")
$대상.data("data-속성이름","값")

이벤트 메서드

분류 핵심 내용 핵심 프로퍼티 및 메서드
이벤트
다루기
일반 이벤트 등록 $대상.on("이벤트 이름", 이벤트리스너)
단축 이벤트 등록 $대상.단축 이벤트(이벤트리스너)
등록한 이벤트 제거 $대상.off("click", 삭제하고 싶은 이벤트 리스너 명)
$대상.off("click")
$대상.off()
이벤트 한 번만 실행 $대상.one("이벤트 이름", 이벤트리스너)
기본 행동 취소 이벤트 객체.preventDefault()
버블링 멈추기 이벤트 객체.stopPropagation()
버블링 활용:하나의 이벤트 $대상.on("이벤트 이름", "선택자", 이벤트 리스너)

위치 및 크기 메서드

분류 핵심 내용 핵심 프로퍼티 및 메서드
요소의 위치 및
크기 관련 기능
부모 좌표 노드 구하기 $대상.offsetParent()
지역 좌표 위치 다루기 지역 좌표 위치 구하기
$대상.position().left
$대상.position().top

지역 좌표 위치 설정하기
$대상.css("left",위치값)
$대상.css("top",위치값)
또는
$대상.css({left:위치값,top:위치값})
전역 좌표 위치 다루기 전역 좌표 위치 구하기
$대상.offset().left
$대상.offset().top

전역 표표위치 설정하기
$대상.offset({left:위치값,top:위치값})
요소 크기 다루기 기본 크기 구하기
$대상.width()
$대상.height()

기본 크기+padding 크기 구하기
$대상.innerWidth()
$대상.innerHeight()

기본 크기+padding+border 크기 구하기
$대상.outerWidth()
$대상.outerHeight()

기본 크기+padding+border+margin 크기 구하기
$대상.outerWidth(true)
$대상.outerHeight(true)

기본 크기 설정하기
$대상.width(크기값)
$대상.height(크기값)

기본 크기+padding 크기 설정하기
$대상.innerWidth(크기값)
$대상.innerHeight(크기값)
요소의 위치 및
크기 관련 기능
요소의 스크롤 위치 다루기 스크롤 위치 구하기
$대상.scrollLeft()
$대상.scrollTop()

스크롤 위치 설정하기
$대상.scrollLeft(위치값)
$대상.scrollTop(위치값)
문서의 위치 및
크기 관련 기능
문서 크기 구하기 $(document).width()
$(document).height()
화면의 위치 및
크기 관련 기능
윈도우의 위치
및 크기 관련
기능
전체 화면 크기 구하기 screen.width
screen.height
유효한 전체 화면 크기 구하기 screen.availWidth
screnn.availHeight
윈도우 크기 구하기 기본 크기 구하기
window.innerWidth
window.innerHeight

기본 크기+메뉴바+툴바 영역이 포함된 크기 구하기
$(window).width()
$(window).height()

기본 크기+메뉴바+툴바+스크롤바 영역이 포함된 크기 구하기
window.outerWidth
window.outerHeight
윈도우 크기 설정하기 window.resizeTo(width,height)
윈도우 변경 이벤트 처리 $(window).on("resize", function(){})
윈도우 위치 다루기 위치 값 구하기
window.screenLeft
window.screenTop

위치 값 설정하기
window.moveTo(dx,dy)
window.moveBy(dx,dy)
윈도우 스크롤 다루기 스크롤 위치 값 구하기
window.pageXOffset
window.pageYOffset

스크롤 위치 설정하기
window.scrollTo(x,y)
window.scrollBy(x,y)

스크롤 이벤트 처리하기
$(window).on("scroll",function(){})
마우스의
위치 및 크기
관련 기능
클릭한 전역 위치 윈도우 영역을 기준으로 하는 전역 위치
mouseEvent.clientX
mouseEvent.clientY

문서 영역을 기준으로 하는 전역 위치
mouseEvent.pageX
mouseEvent.pageX
클릭한 지역 위치 var offsetX = mouseEvent.pageX - $(타깃).offset().left
var offsetY = mouseEvent.pageY - $(타깃).offset().top

애니메이션 효과 메서드

분류 핵심 내용 핵심 프로퍼티 및 메서드
일반
효과
다루기
나타나고 사라지는 효과 나타나기
$대상.show()

사라지기
$대상.hide()
페이드 인/아웃 효과 페이드 인
$대상.fadeIn()

페이드 아웃
$대상.fadeOut()
슬라이드 업/다운 효과 슬라이드 업
$대상.slideUp()

슬라이드 다운
$대상.slideDown()
사용자
정의
효과
다루기
사용자 정의 애니메이션 효과 만들기 $대상.animate({스타일 속성 이름:속성값, ...},애니메이션 시간)
애니메이션 효과 멈추기 $대상.stop()

참조 - (메소드 정리표)

자바스크립트 + jQuery 완전정복 스터디(김춘경 지음)

반응형
반응형

jQuery 쓰는것이 좋은 것인가?

요즈음 웹퍼블리싱을 배우는 학생들의 이야기드를 들어보면, jQuery를 안쓰게 좋을것 같다고 또는 안쓰게 될 것 같다고 이야기 합니다.
그럼 Why? 라는 질문을 하면, 이유를 대답하지 못합니다.
개념조차 이해하지 못하고, 어디서 들은것 같다고만 이야기 하기 때문입니다.
물론 모든 학생이 모두 그렇게 이야기 하는것은 아닙니다.
그럼 저는 왜 jQuery를 써야 하는지 설명해 줍니다.

jQuery 사용하는 첫번째 이유

jQuery는 자바스크립트 DOM을 좀더 쉽게 작업하기 위한 라이브러리 입니다.
결론부터 말하자면 jQuery의 정체는 자바스크립트 문법 중 프로토타입 방식으로 만들어진 클래스입니다.
쉽게 이야기해 jQuery 메서드는 자바스크립트 DOM으로 이루어져 있습니다.
그렇기에 jQuery를 배운다는것은 메서드를 배우는 것이며, 이를 통해 자바스크립트로 코딩하면 10줄, jQuery로 코딩하면 2-3줄로 처리 할수 있을 만큼 효율적인
코드작업을 할 수 있습니다.
그렇다고 jQuery로 모든것을 다 할 수 있는것도 아니며 무조건 좋다는 말은 아닙니다.
제일 좋은 방법은 jQuery와 자바스크립트를 같이 사용하여 최적화 하는방법이 좋다고 말씀드리고 싶습니다.
jQuery는 쉬운데 자바스크립트는 어렵다고 하는 분들은 자바스크립트도 충실히 공부하셔야 합니다.

jQuery 사용하는 두번째 이유

jQuery는 DOM 제어보다 크로스 브라우징 처리가 편리합니다.
IE7은 비표준 브라우저이기 때문에 이벤트 등록시 자바스크립트로 처리할 경우 attachEvent(), addEventListener()를 사용하여 코드를 작성하여야,
IE7과 기타 브라우저의 크로스브라우징을 정상적으로 처리해야 합니다.
이와달리 jQuery 내부에는 이런 번거로운 작업들을 대신 처리해주기 때문에 이벤트를 아주 쉽게 처리할 수 있습니다.

jQuery 학습 방법 및 결론

자바스크립트의 경우 기본 문법을 모를 경우 공부하기가 힘듭니다.
그러나 jQuery의 경우 수많은 메서드로 구성되어 있기에 순서없이 메서드를 하나씩 학습하시면 됩니다.
굳이 공부하는 순서를 따져야 한다면, jQuery는 css와 연관성이 많기에 css를 기본적으로 이해하셔야 하며, 노드를 찾아가는 방법(체인기능) 메서드부터 진행하면 될 것 같습니다.
이것은 웹퍼블리싱을 전문적으로 하는 (주)맑은커뮤니케이션에서 진행하는 신입 퍼블리셔 교육방법 입니다.
아래는 jQuery 메서드 정리입니다. 메서드 정리는 사용 용도에 따라 1, 2부로 나누어 올릴 것 입다다

노드 메서드

노드를 선택하거나, 찾아가는 방법(체인기능)의 메서드 입니다.

분류 핵심 내용 핵심 프로퍼티 및 메서드
일반 노드
찾기
아이디 이름으로 노드 찾기 $("아이디 이름")
태그 이름으로 노드 찾기 $("태그 이름")
클래스 이름으로 노드 찾기 $("클래스 이름")
속성으로 노드 찾기 $("[속성이름=값]")
찾은 노드
다루기
찾은 개수 구하기 $대상.length
n번째 노드 접근하기 $대상.eq(index)
자바스크립트 DOM 객체 접근하기 $대상.get(index)
$대상[index]
순차적으로 노드 접근하기 $대상.each(function(index){ $(this) 또는 $대상.eq(index); });
찾은 노드 중에서 특정 노드만 찾기 $대상.filter("선택자")
찾은 노드의 자손 노드 중 특정 노드만 찾기 $대상.find("선택자")

인덱스 값 구하기

$대상.index()
$목록.index($대상)
$목록.index(대상 DOM 객체)
자식 노드
찾기
모든 자식 노드 찾기 $대상.children()
특정 자식 노드만 찾기 $대상.children("선택자")
첫 번째 자식 노드 찾기 $대상.children().first()
$대상.children(":first")
$대상.children().eq(0)
$대상.children("eq(0)")
마지막 번째 자식 노드 찾기 $대상.children().last()
$대상.children(":last")
$대상.children().eq($대상.children().length-1)
$대상.children(":eq("+($대상.children().length-1)+")")
n번째 자식 노드 찾기 $대상.children().eq(index)
$대상.children(":eq("+index+")")
부모 노드
찾기
부모 노드 찾기 $대상.parent()
조상 노드 찾기 $대상.parents(["선택자"])
형제 노드
찾기
이전 형제 노드 찾기 $대상.prev()
$대상.prevAll(["선택자"])
다음 형제 노드 찾기 $대상.next()
$대상.nextAll(["선택자"])
노드 생성/
추가
노드 생성 $("추가노드 DOM 문자열")
첫 번째 자식 노드로 추가 $부모노드.prepend($추가노드)
$추가노드.prependTo($부모노드)
마지막 번째 자식 노드로 추가 $부모노드.append($추가노드)
$추가노드.appendTo($부모노드)
특정 노드의 이전 위치에 추가 $기준노드.before($추가노드)
$추가노드.insertBefore($기준노드)
특정 노드의 다음 위치에 추가 $기준노드.after($추가노드)
$추가노드.insertAfter($기준노드)
노드제거 특정 노드 제거 $대상.remove()
모든 자식 노드 제거 $대상.children().remove()
노드 내용
읽기 및 변경
노드 내용을 문자열로 읽기 $대상.html() //태그 내용 포함
$대상.text() //태그 내용 제외
노드 내용 수정하기 $대상.html("수정할 태그 문자열")
$대상.text("수정할 텍스")
노드 내용을 이용해 여러 개의 자식 노드 추가하 $대상.html("추가할 태그 문자열")
노드 내용을 이용해 모든 자식 노드 제거하기 $대상.html("")

참조 - (메소드 정리표)

자바스크립트 + jQuery 완전정복 스터디(김춘경 지음)

반응형
반응형

저는 웹퍼블리싱을 시작하면서 젤 큰 고민이 스크립트 구현 영역에 관한 부분이었던것 같습니다.
저의 결론은 스크립트는 개발영역이 포함되지 않는 부분까지 구현하도록 하고 있습니다.

동적인 움직임을 주기 위해서는 자바스크립트를 사용했는데요 현재는 제이쿼리라는 오픈소스를 많이 활용합니다.

제이쿼리는 오픈소스를 무료로 사용이 가능하고 만들어진 플러그인이 많아서 사용하기 좋기 때문입니다. 그리고 움직임이 자바스크립트 보다는 부드럽고 화려해서 사용자의 반응도 좋더라구요~

그래서 이번에는 코딩할때 많이 쓰이는 제이쿼리 플러그인들을 공유하려고 합니다.

저도 코딩할때 활용하는 플러그인이라서 문제없이 사용하 실 수 있을것 같아요~

  1. 메인페이지의 비주얼은 개발소스가 전혀 들어가지 않기 때문에 메인비주얼의 동적인 움직임을 스크립트로 표현해 주어야 하는데요.
    이 플러그인은 이미지가 좌우로 슬라이드되는 플러그인으로 기본 메인비주얼 스크립트로 가장 많이 쓰일거라고 생각됩니다.
  2. 두번째도 메인비주얼영역에 사용할 수 있는 플러그인입니다.
    아코디언 플러그인으로 가로아코디언이라서 메인비주얼에 사용 가능합니다.
  3. 이 플러그인은 toggle 관련된 플러그인인데요.
    아래 슬라이드로 열었다 닫았다하고 싶을때 사용해 주세요!
  4. 페이드 관련된 플러그인입니다.
    텍스트, 이미지등이 페이드되는 예제가 들어있습니다.
    요것도 쓸때가 많을것 같죠?^^
  5. 6가지 움직임 활용이 가능한 플러그인입니다.
    메인비쥬얼 혹은 특이한 포토갤러리 같은 곳에 사용이 가능 할 수 있을 것같아요
  6. 드래그 관련된 플러그인입니다.
    레이어팝업을 이리저리 움직이게 하고싶다는 요청이 있을 때 사용해주시면 될 것같습니다.
  7. lightbox라고 하는 플러그인입니다.
    레이어를 띄울때 주위(배경)를 어둡게 하고 그 위에 레이어를 띄우는 플러그인입니다.
  8. placeholder 플러그인입니다.
    placehilder는 input의 입력값 작성에 도움을 주는 역할을 하는데요. 접근성에 맞추기 위해 placeholder를 작성하는것이 좋다고 되어있습니다.
    하지만 placeholder속성은 html5에 해당하는 속성으로 IE6,7,8에서는 사용이 불가능합니다.
    이 플러그인은 비표준브라우저에서도 html5처럼 속성값으로 사용할 수 있으니까 편리하게 사용이 가능할 것 같습니다.
  9. 탭메뉴 플러그인입니다.
    아이디를 이용한 탭메뉴입니다. 탭은 설명이 필요없을 듯하네요^^
  10. 마지막은 툴팁 플러그인을 소개합니다.
    툴팁은 어려운 용어가 많은 금융권이나 공공기관 같은 사이트에서 잘 사용하 실 수 있을 것 같아요.
반응형
반응형
웹퍼블리싱을 실무에서 하다보면 자바스크립트를 꼭 해야하나?
해야 한다면 과연 어디까지 해야하나? 에 대해 많은 퍼블리셔들은 고민을 할 것입니다. 저 또한 이런 문제로 고민할 때가 많았습니다. 그 고민에 대한 결과로 퍼블리셔는 front end, 또는 UI에 관련된 부분만 작업하는 것이라고 저는 정의 내리고 있습니다.
예를 들어 메인 페이지부분의 개발 소스가 들어가지 않는 부분을 말하는 것입니다. 비쥬얼 움직임이 그 예 입니다. 개발이 들어가는 부분에 대해서는 간단한 자바스크립트라 하더라도 하지 않는게 제 원칙입니다. 나중에 프로젝트 완료시 그부분이 제대로 작동하지 않을시 서로 책임을 떠 넘기는 식의 문제가 발생하기 때문입니다. 그래서 저는 프로젝트 시작 시 그부분에 대해 명확히 개발자 분들과 이야기 합니다. 그렇게 하다보면 대략 웹페이지 같은 경우는 20가지 정도 기능의 스크립트 예제만 있어도 어떤 홈페이지든 제작이 가능합니다.
하지만 예제가 있더라도 소스를 읽지 못한다거나 간단한 수정을 할 수 없다면 무용 지물이겠지요? 그래서 퍼블리셔분들의 개발자만큼 스크립트를 다루지 않더라도 일하는데 지장이 되지 않을 정도의 부담없이 배울수 있는 강좌를 하려고 합니다.
모르시는 분들을 위해 완전 기초부터 시작하겠습니다.

페이지 내에 자바스크립트 추가하기

<script>는 평범한 THML입니다. 그리고 HTML을 다루다 보면 웹 페이지의 <head> 부분에 다음과 같이 <script> 태그를 추가할 일이 심심치 않게 생깁니다.

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Untitled Document</title>
	
</head>

<script> 태그의 type 속성은 포함되는 스크립트의 형식과 종류를 가리킵니다. 이 경우에 type="text/javascript"는 스크립트가 보통의 텍스트(HTML과 같은)이고, 자바스크립트로 작성되었다는 것을 의미합니다.

외부 자바스크립트 파일

페이지 내 <script> 태그를 사용하면 자바스크립트를 하나의 페이지에 추가할 수 있습니다. 하지만 대부분의 경우에는, 하나의 스크립트를 여러페이지에서 사용하게 될 것입니다. 예를 들어 메인 메뉴 스크립트는 한페이지가 아닌 모든 페이지에서 사용하게 될 것 입니다. 모든 페이지에 메인메뉴 스크립트를 사용하기 위해 자바스크립트 코드를 복사하고 붙인다면, 이는 효율적이지 않을 것입니다.
또한 자바스크립트 코드 변경하거나 개선하려고 한다면 모든페이지를 다시 열어서 수정해야하는 수고를 하게 될 것입니다.
프로그램 코드가 모든 페이지에 다 있다면 각 페이지는 덩치가 꽤 커져서 다운로드 속도를 더 늦추게 될 것입니다. 이 모든것들을 해결하기 위한 접근법으로 사용하는 것이 외부 자바스크립트 파일을 사용하는 방법입니다. 이는 .js라는 파일 확장자 텍스트 파일을 <script> 태그를 사용해 웹 페이지에 자바스크립트 코드를 포함한 파일을 링크하면 되는 것입니다.

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Untitled Document</title>
	
</head>

웹페이지에 텍스트 쓰기

자바스크립트를 사용해서 웹 페이지에 바로 메시지를 출력하는 방법에 대해 알아보겠습니다. 이것을 보고 너무 시시하다고 느꼇을지도 모르겠습니다. 하지만 기본을 완벽하게 이해하는 것이 중요하기 때문입니다.

<script type="text/javascript">
	document.write('Hello world!');
</script>

alert() 함수처럼, document.write()는 여는 괄호와 닫는 괄호 사이에 있는 문장을 출력하는 명령어 입니다. alert() 함수가 새창을 띄워 문장을 출력하는 것이라면 document.write() 는 페이지 내에서 문장을 출력 합니다.

에러추적하기

스크립트를 작성하면서 할 수 있는 실수는 단순한 오타부터 로직상의 복잡한 에러까지 다양합니다. 자바스크립트 프로그래밍 초보라면 실수의 대부분은 오타입니다. 세미콜론, 따옴표, 괄호 등을 빼먹거나, 자바스크립트 명령어를 잘 못 치기도 합니다.
그러면 간단한 몇 가지 예를 들어 보겠습니다.

실수의 종류 검사결과
인수 목록 뒤에 닫는 괄호 ')'를 빼먹는 경우 명령어의 마지막 닫는 괄호를 깜박할 수 있습니다. 예를 들어 'hellow' 뒤에 닫는 괄호를 빠뜨려서 alert('hello';가 되는 등의 경우가 있습니다.
종료되지 않은 문자열 문자열(string)은 따옴표로 감싼 문자들의 집합니다. 'hello'는 alert('hello')라는 코드 안에 있는 문자열입니다. 열거나 닫는 부호를 빼먹기 쉽습니다.
복합문에서 }를 빼먹는 경우 프로그램을 작성하다 보면 괄호와 따옴표뿐만 아니라 {}기호와 같은 다른 형태의 구두 기호도 사용하게 될 것입니다. 이런 류의 오류를 만나면, 여는 괄호와 닫는 괄호의 쌍을 제대로 맞추었는지 확인해야 합니다.
복합문에서 }XXX가 정의되지 않았습니다. 자바스크립트 명령어에 aler('hello')처럼 오타가 있는 경우, 명령어가 정의되지 않았다는 에러 메시지를 받습니다. 인터넷 익스플로러에서는 "aler는 정의되지 않았습니다." 라는 메시지가 나타납니다.
문법상 실수 문법상 실수라는 것은 오타는 아니지만 허용되지 않는 방식으로 하나 혹은 하나 이상의 자바스크립트 문장이 섞였을 때 나타나는 에러를 통칭합니다.

마치며

위 예제는 '거침없이 배우는 자바스크립트' 책의 예제를 사용 하였습니다.
처음에 어려운 것보다는 기본부터 쉽게 부담가지지 않고 접근할 수 있는 간단한 것부터 정리해 보았습니다.

반응형
반응형
HTML5 이전에는 드래그앤드롭 기능을 사용하기 위해선 복잡한 스크립트 작업을 해야 했습니다.
그러나 HTML5에서 새로이 추가된 확장태그 중에 draggable 속성이 있는데 이 속성을 활용하면 쉽게 드래그앤드롭 기능을 사용할 수 있습니다.
draggable 속성중에는 ture, false, auto 3가지 값을 가지고 있으며, 사용방법은 아래와 같습니다.

HTML5에 추가된 드래그앤드롭 관련 이벤트

이벤트 이름 이벤트 설명
ondragstart 드래그가 시잘될 때 발생하는 이벤트
ondrag 요소가 드래그 중일 때. 드래그 중 마우스를 떼지 않았을때 발생하는 이벤트
ondragend 드래그가 끝날 때. 드래그를 하고 마우스를 뗄 때 발생하는 이벤트
ondragenter 정확히 드롭을 목표한 공간에 마우스를 떼어 드래그를 끝낼때 발생하는 이벤트
ondragleave 드롭을 목표로한 공간에서 요소를 꺼낼때 발생하는 이벤트
ondragover 드롭을 목표로한 공간을 드래그한 상태로 요소가 지나갈 때 발생하는 이벤트
ondrop 드롭이 될 때 발생하는 이벤트

dataTransfer 전송 타입

드래그앤드롭으로 이동을 시킬때에는 서로 데이터를 주고 받아야 합니다. 이때 사용되는 것이 'dataTransfer' 오브젝트 입니다.
사용방법은 아래와 같습니다.
event.dataTransfer.전송타입('데이터타입');

Type 이벤트 설명
dataTransfer.setData(type, data)
  • - key/value 쌍으로 MIME 타입과 데이터 저장(여러 세트 저장 가능)
  • - Draggable의 dragstart 이벤트에서 Draggable의 정보를 저장하기 위해 사용
  • - 브라우저의 기본 드래그 요소나 외부 애플리케이션의 드래그 요소는 자동으로 여러 세트의 MIME 타입이 지정됨
dataTransfer.getData(type)
  • - 지정한 MIME 타입의 데이터 반환
  • - droppable의 drop 이벤트에서 draggable의 정보를 꺼내기 위해 사용

드래그앤드롭 실습예제

여러나라의 음식이미지를 이미지를 각 화면에 맞게 분류하는 예재룰 만들어야 합니다.
그럼 먼저 HTML 마크업을 해야 합니다. 마크업은 아래와 같이 하면 됩니다.

CSS

div {width:320px; height:320px; text-align:center; border:1px solid #000; padding:5px; margin:20px;}
img {width:75px; height:60px; padding:5px;}
h2 {font-size:.8em; color:#000; font-weight:bold;}
.fl {float:left;}

HTML

한국음식

중국음식

서양음식

일단 위와같이 4개의 각각 드래그앤드롭될 div 박스를 만든 후 이미지 드래그를 시작하자마자 'drop' 함수를 자바스크립트에서 호출할 것입니다.
또한 드래그앤드롭되는 동안 발생하는 문제를 막기위해 'ondragenter', 'ondragover' 를 'false' 시켰습니다.
또한 각 이미지에는 드래그를 시작하자마자 이벤트가 발생해야 하므로 'ondragstart' 이벤트 핸들러를 사용 하였습니다.

자바스크립트

function drag(target, food) {		//드래그 시작시 호출 할 함수
	food.dataTransfer.setData('Text', target.id);
};
function drop(target, food) {		//드롭시 호출 할 함수
	var id = food.dataTransfer.getData('Text');
	target.appendChild(document.getElementById(id));
	food.preventDefault();	
};

drag 함수에서는 'food.dataTransfer.setData'를 이용하여 아미지 정보를 셋팅하였고, 'food.dataTransfer.getData'를 이용하여 드래그 되고 이는 정보를 가져왔습니다.
그리고 'food.preventDefault()'를 사용하여 이벤트를 종료하였습니다.

위 예제를 응용한다면 장바구니 담기 등 여러방면에서 응용하여 사용이 가능할 것입니다.
위 예제를 첨부하오니 학습하는데 도움이 되었으면 합니다.

html5 드래그앤드롭.zip
다운로드
반응형

+ Recent posts