간단한 UI 만들기 ( jQuery 활용 )

 

 

 

우리는 간단한  UI 를 만들때에 

1. 적용하고자 하는 UI의 HTML  과 CSS 를 미리 만들어 두고,

2. css의 display를 none 으로 숨겨둔 후에,

3. 필요할때만 어떤 이벤트가 실행되면  의도한 UI의 display 를  block으로 바꾸어 주는 과정을 거쳣다.

 

그런데 우리는 이제 jQuery 를 이용해서 보다 더 간편하고 쉽게 사용해 보자.

 

이전에는 

document.getElementById('list' ).addEventListener('click', function( ) {

        document.getElementsByClassName('list-group')[0].style.display = 'none';

};

 

이렇게 길게 썻다면 이제는

$('.list').on('click', function( ){

        $('.list-group').style.display = 'none';

}

 

이렇게 간략하게 쓸 수 있다. 

 

그런데 display = 'none';   와 유사한 기능을 가진 애가 있는데 바로 .hide( ) 

           $('.list-group').hide()

 

그 외에도 다양한 간단 UI 용 애니메이션이 가능하다. 

          $('.hello').slideToggle()

          $('.hello').fadeToggle()

 

 

@@그렇지만 간단한 UI용 애니메이션은 css로 해결하는게 성능적으로 더 좋다. 

      JS로 해결하려고 하면 간단하게 되긴 하지만, 너무 많은일을 JS가 해결하고 있음으로 성능이 저하될수 있다.