jquery

JQUERY 시작하기 #2

RYUHA/ editor

  • 0 comments
  • 1,550 views
  • 2017년 7월 5일

jquery 시작하기 두번째 글 입니다!

여기서 이어집니다:: JQUERY 시작하기 #1
 

# 기본잡기

여기선 제이쿼리를 하면서 많이 쓰이는 기본적인 효과들을 살펴보려 합니다.
우리가 보통 웹페이지에서 활용할 수 있는 효과들을 생각해보면 display, animate 정도를 생각해볼 수 있습니다.
기초잡기 튜토리얼인 만큼 이 두가지를 간단하면서 쉽게 배워봅시다.

 


 

# 요소의 display

 

먼저 display 입니다.
글의 내용을 숨기거나 표시하거나 드롭다운 메뉴를 만들 수도 있고 등등의 효과를 구현할 수 있지요.
대표적으로 show/hide, fadeIn/fadeOut, slideUp/slideDown 등이 있습니다. 하나씩 예제를 통해 봅시다.

 

첫 번째로 show/ hide 입니다.

show([duration][,complete]);
hide([duration][,complete]);

이런 형태로 쓰이며, 말 그대로 보여주고, 숨기고 하는 효과입니다.

여기서 durationcomplete는 각각 효과의 지속시간, 효과가 완료 되었을 때 실행될 function을 의미하는 것으로 optional한 부분입니다. duration의 경우 단위는 ms로 1000ms가 1초가 되며 따로 지정해주지 않으면 400ms가 default값으로 가지게 됩니당. slow, fast로 쓸 수도 있는데 각각 600ms, 200ms를 의미하지요.

형태는 $('selector').show(); $('selector').hide(); 로 아래처럼 쓰입니다.

Welcome to Html5Around on html5around.com

 

두번째로 fade in/ fade out 이 있습니다. 화면 전환 효과에서 쉽게 볼 수 있는 fade 효과 입니다!

fadeIn([duration][,complete]);
fadeOut([duration][,complete]);

역시 지속시간과 완료된 후 의 function을 넣을 수 있습니다.

이것은 show/hide와 다르게 부드러운 효과를 볼 수 있습니다.

역시 $('selector').fadeIn(); $('selector').fadeOut(); 으로 아래처럼 쓰여요.

HTML5AROUND on html5around.com

 

세번째는 slide up/ slide down 입니다.

slideUp([duration][,complete]);
slideDown([duration][,complete]);

일반적인 슬라이드 쇼 효과라고 보면 됩니다! 아래로 위로 슬라이드 해서 움직이지요.

형태 역시 $('selector').slideUp(); $('selector').slideDown(); 이며 아래처럼 사용됩니다.
메뉴에 커서를 올려보세요.

HTML5AROUND on html5around.com

 

여기까지로 기본적인 display effect는 살펴 보았습니당 잘 이해하셨나요? 너무 쉬운가요!
그렇다면 다음은 jquery의 꽃 animate를 알아봅시다!

 


 

# animate

 
자연스러운 변화 효과를 주고싶을 땐 animate 효과를 많이 씁니다.

css 속성을 원하는 대로 이쁘게 효과를 주기 위해서는 animate가 필요하게 됩니다.

animate의 기본 형태는 다음과 같아요.

.animate(properties[,duration][,easing][,complete]);

각 요소들을 살펴보면,

properties: 애니메이션을 만들어 낼 css속성값(변화할 값)
duration: 애니메이션 지속 시간
easing: 애니메이션에 변화를 줄 함수
complete: 애니메이션이 완료 된 후 실행될 함수

 

이런 저런 요소들이 있지만 기본으로 변화를 줄 요소들과 원하는 결과값(single numeric value)과 지속 시간, 애니메이션이 완료되었을때 진행 될 콜백 함수로 이루어져있다고 보면 됩니다.

이때, 결과값이 single numeric value인 것에 주의해야하는데 이것은 수치가 있는 요소에만 애니메이션이 됩니다. 즉, 비수치 값에는 애니메이션 효과가 들어가지 않음을 의미합니다. width, height, opacity 등의 속성값은 변화할 수 있지만 background-color같은 경우, 사용이 불가능 하다는 것이죠.(이 경우는 아래에서 좀더 설명할 것 입니다.)
또한 속성들 중에 font size, margin-top 등 보다 세세한 요소들은 표현을 “font-size” 또는 “fontSize” 이런 식으로 표현해야 읽을 수 있습니다.
 

지속시간의 경우, 위에서 보았던 fadeIn, slideUp등 과 마찬가지로 ms의 단위를 가지고 있습니다.
빠른 효과를 원하면 작은 값을, 느린 효과를 원한다면 큰 값을 주면 됩니다.
콜백 함수, 애니메이션이 완료되었을 때 실행될 함수 입니다. 이것은 따로 파라미터는 가질 수 없고 this를 통해 애니메이션 효과를 줗었던 요소를 제어할 수 있지요.
animate()의 기본적인 형태는  $(‘.selector’).animate({css속성:변환값 },duration,function(){}); 입니다. 아래 사용 예시를 볼까요?

 

Run with JS!!

HTML5AROUND on html5around.com

설정한 값으로 지정한 시간동안 변화하는 애니메이션입니다. 다음은 애니메이션이 완료 되었을 시 실행되는 함수 예제 입니다.

Run with JS!!

HTML5AROUND on html5around.com

다시 원래의 속성값으로 돌아가게 설정해두자 그렇게 돌아감을 보입니다.

이렇게 기본적인 형태를 보았고 animate에서 더 중요한 stop()에 대해 알아봅시다! 애니메이션을 한개만 사용할 때는 큰 문제가 없지만 그 이상의 애니메이션을 사용하다보면 이 이벤트들이 큐에 쌓이게 되면서 충돌이 일어납니다.

이러한 문제를 막기 위해서 stop()을 사용하게 됩니다. 이 메소드를 사용하게 된다면 현재 동작하고 있는 애니메이션은 동작이 중지되지요. 그리고 호출된 또다른 애니메이션을 실행하게 되는거죠. 다음 예시를 통해 알아볼까요?

Run with JS!!

HTML5AROUND on html5around.com

보면 위의 파랑 박스에서 빠르게 커서를 안으로 밖으로 움직이면 마우스가 요소에 올라간 횟수만큼 커서의 위치에 관계 없이 애니메이션이 계속 반복되지만 아래 노랑 박스는 마우스 커서가 벗어남에 따라 멈춤을 볼 수 있습니다. 이게 바로 stop()의 사용 차이 입니다! 확실한 느낌은 더 연습해보면서 익혀봅시다!

 

이제 위에서 잠깐 언급한 비 수치 속성들에 대한 이야기를 해봅시다. 애니메이션으로 크기와 마진 이런 것들만 바꾸고 싶진 않잖아요?! 우리는 색도 바꾸고 싶고 다양한 효과를 주고 싶어요! 그러기 위한 방법이 없는 것은 아닙니다!

그러기 위해선 우리가 jquery를 사용하기 위해 cdn을 이용했던 거 처럼 또다른 cdn을 이용해야합니다.

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

이걸 사용하면 이제 배경 색도 바꾸고 글씨색도 바꿀 수 있게 됩니다. 그럼 이제 이것을 이용해서 간단한 응용 예제를 볼까요?

원 페이지 사이트들에서 쉽게 볼 수 있는 fixed navigation bar를 간단하게 만들어 보려 합니다.

아래의 예제를 볼게요. run with js를 누르고 화면에서 스크롤을 해보면 nav바가 움직이면서 크기와 색이 바뀜을 볼 수 있습니다.

HTML5AROUND on html5around.com
css를 먼저 살펴보면, 우리가 하려는 것은 nav바를 항상 상단에 고정 시키는 것입니다. 기본으로 먼저 position이 fixed되어 있어야 하죠. 또 항상 모든 요소보다 상위에 있어야하므로 z-index값도 100으로 지정해줍니다.

이제 jquery 코드를 살펴 볼까요?

$(function(){
            var windowHeight = $(window).height();
            $('.header').css("height",windowHeight);
            // 이부분은 스크롤을 만들기 위해 임의로 div의 높이를 지정한 것입니다!

            $(window).scroll(function(){  
            // 이부분은 화면이 scroll 되는 이벤트가 일어날 경우 실행 되는 부분입니다. 
            // 그러니까 우리는 스크롤하는 것을 하려는 것이므로 요 안이 중요해요!!!!  
             
             if($(this).scrollTop() > 15) { // 스크롤 탑이 15이상으로 내려가면 실행!
                   $('.nav').stop().animate({
                       "background-color": "white",
                       height:"30px"
                   },200);
                   $('.nav a').stop().animate({
                       color:"black",
                       fontSize:"15px",
                       padding: "6px 10px"
                   });
               } else {
                   $('.nav').stop().animate({
                       "background-color": "black",
                       height:"52px"
                   },200);
                   $('.nav a').stop().animate({
                       color:"white",
                       fontSize:"20px",
                       padding: "14px 16px"
                   });
               }
            });
        });

여기에 scrollTop() 이라는게 나오는데 이것은 스크롤의 제일 윗 부분 위치값을 가져오는 메소드입니다. 그래서 스크롤해서 15 이상 내려갔을 때 if문 안에 들어가면서 내비게이션 바의 애니메이션이 실행됩니다.

코드 내용을 보면 먼저, 스크롤이 내려가게 되면  ‘nav’ 클래스에 애니메이션이 시작됩니다. 배경 색이 흰색으로 바뀌고 높이는 30px 그리고 ‘nav’ 클래스의 a 요소들도 까만색, 글자크기 15px, 패딩 값 6px, 10px로 바뀌는 애니메이션이 실행되지요.

else구문은 반대로 15px 위로 올라왔을 때 원래의 css로 돌아가는 애니메이션 효과입니다.

 

여기까지 기본적은 jquery에 대해 알아보았습니다. 이를 바탕으로 다양한 효과들을 사용해봅시다!

 
 
이 글도 읽어보세요::jquery 이용한 인트로!

RYUHA

만들어 보면서 하나씩 글 씁니당:)

Leave a Reply

avatar