Web Design & Development/Front End_Web Development

Module 4 - Introducing jQuery

Gamestonk118 2022. 9. 22. 15:53

1. Introduction

jQuery는 JavaScript 라이브러리이다. 이는 복잡한 기능들을 수행가능케 하며 jQuery의 syntax는 개발자가 아닌 디자이너가 상대적으로 어렵고 다루기 힘든 JavaScript를 조금 더 쉽게 다룰 수 있게끔 해준다. 

 

2. How jQuery Works

Including jQuery

말했듯이 jQuery는 JavaScript 외부 라이브러리로써 jQuery를 HTML 도큐멘트에서 쓰기 위해서는 페이지 안에다 library를 표기해야 한다. 이는 간단하게 <head> 태그 안에 있는 <script> 태그 안에 주소를 집어넣음으로써 해결할 수 있다. jQuery는 여러개의 많은 온라인 소스들을 통해 다운 받을 수 있는데 그말인 즉슨 jQuery를 사용하기 위해서는 인터넷에 연결되어있어야 한다는 뜻이 된다. 이때 jQuery Library를 다운받을때 파일을 HTML 도큐멘트와 같은 폴더에 다운받는것을 권장한다. 

 

jQuery는 아래의 링크를 통해 다운받을 수 있으며 여러 버전이 있는데 이번 공부에 사용할 버전은 Compressed, Production jQuery 이다. 가장 최신 버전인 3.6.1을 다운받으면 된다. 다운 받는 방법은 간단하게 언급한 jQuery 라이브러리에 들어가 엄청 긴 코드를 본다면 웹페이지 자체를 우클릭한 다음 Save As를 눌러 해당 HTML 도큐멘트가 들어있는 폴더안으로 저장하면 된다.

 

https://jquery.com/download/

 

Download jQuery | jQuery

link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production. You can also download

jquery.com

 

jQuery를 다운받고 나면 아래 코드를 <script>태그 안에 써 넣어주어 HTML도큐멘트와 jQuery를 연결할 수 있다. 이때 jQuery를 사용할때에는 두가지 방법이 있는데 CDN (Content Delivery Network)을 사용하는 것과 아니면 다운을 따로 받아 폴더로 저장하여 아래와 같은 코드를 쓰는 방법이 있다. 일반적으로 라이브러리 자체를 다운을 받아 작성하려면 다음과 같이 코드를 작성해야 하지만 CDN으로 코드를 작성하면 다운로드 필요없이 곧바로 jQuery를 사용가능케 만들어 줄 수 있다.

 

일반적인 코드:

 

<script src="jquery-3.6.1.min.js"></script>

 

반드시 유의해야 할점은 jQuery파일이 작성하려는 HTML 도큐멘트와 같은 파일에 있어야 할 것과 jQuery 파일 네임을 함부로 바꾸지 않는 것이다. 

 

CDN을 사용한 경우의 코드 (이 경우 따로 다운로드의 필요가 없다):

 

<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>

 

What jQuery Does

우선 jQuery 파일이 HTML 페이지에 포함되고 나면 이는 CSS Property들을 여러개의 페이지가 로딩할때나 아이템이 클릭됬을때와 같은 여러 Event가 작동할때 CSS Property가 스타일로써 적용되도록 디자인 할 수 있다. jQuery는 또한 Fades, Slides와 같은 기본적인 기능을 이미 제공하고 있을 뿐만 아니라 .animate() function을 통해 수로써 값들을 받는 여러 CSS Property들의 애니메이션 기능도 추가해 줄 수 있다. (eg. font-size, top, width, border-width)

 

3. Using jQuery

jQuery 코드는 그럼 어디에 작성하려나? 이는 HTML 도큐멘트 안 <head> 부분 안에 <script> 태그를 또 만들어 주어 그 사이 jQuery 코드를 넣어주면 된다. 예시는 다음과 같다. 

 

<script>
$(document).ready(function() {
    // our code goes here
});
</script>

 

<script>와 </script> 사이 항상 $(document).ready(function() { 이라는 것을 불러와 우리가 jQuery코드를 작성하기 전 페이지가 충분히 로딩되었는지 확인해주는 코드임으로 항상 까먹지 말아야 한다. 

 

jQuery and Selectors

jQuery는 Selector를 선택하여 그들에게 특정 Action을 부여하면서 작동된다. 여기서 말하는 Selector는 지난 CSS 시간에 언급한 Selector의 의미와 같다. 

jQuery는 자신만의 syntax를 가지고 있느며 이는 HTML과 CSS와는 다르다. jQuery가 Selector를 인식하는 방식은 다음과 같다.

 

$('selector')

 

만약 selector의 종류가 HTML태그나 Class 아니면 ID와 같이 여러개의 예시가 궁금하다면 다음과 같다. 기본적인 것은 $(' ')안에 들어간다는 것 빼곤 CSS에서 Selector을 불러올때와 원리는 같다.

 

Targeting an HTML tag $('body')
$('p')
Targeting a Class $('.myClass')
Targeting an ID $('#myID')

 

그 다음 Selector 표기가 끝났다면 그다음에는 Action이란 것을 연결해주어야 한다. 이때 Built-in (내장) Action중 하나인 fadeOut()이라는 효과를 <p> 태그에 적용하려면 이와 같이 코드를 작성해야 한다. 이 효과는 특정 요소를 페이드 아웃 (서서히 사라지게 하는 효과) 해준다.

 

$('p').fadeOut();

 

이는 어떤 Selector에 적용하든 어떤 효과를 쓰든 코드를 작성하는 방식은 전부 똑같이 진행된다. 그리고 이러한 코드 식을 Syntax라고 부르게 된다.

 

$('selector').action();

 

4. List of jQuery Effects

앞서 언급했듯이 jQuery는 내장된 효과들을 제공하는데 이들은 다음과 같다. 이들을 활용하면 복잡한 코드의 작성 필요 없이 효과들을 적용하는 Action Function만을 이용하여 손쉽게 구현 가능하다.

 

Effect Syntax
hide: 특정 Selector 요소를 갑자기 숨긴다. $('selector').hide();
show: 특정 Selector 요소를 갑자기 보여준다. $('selector').show();
fadeOut: 특정 Selector 요소를 서서히 숨긴다. $('selector').fadeOut();
fadeIn: 특정 Selector 요소를 서서히 보여준다 $('selector').fadeIn();
slideDown: 특정 Selector 요소를 아래로 내림으로써 보여준다 $('selector').slideDown();
slideUp: 특정 Selector 요소를 위로 올림으로써 숨긴다. $('selector').slideUp();

 

또한 이러한 효과들을 구현하는 Syntax들은 숫자들을 인식할 수 있어 (단위는 Milliseconds (1000분의 1초)) 효과들이 나타나는 시간들을 직접 조절할 수 있게끔 만들어 준다. 예시로 다음과 같다.

 

// <p>태그에 포함된 요소를 500ms동안 fadeIn하여 서서히 나타나게 하여라
$('p').fadeIn(500);

 

중요한 사실은 show(), fadeIn(), 그리고 slideUp()은 만약 특정 Selector가 이미 시작적으로 웹페이지에 보여져 있으면 작동되지 않는다. 이들은 오직 요소들이 숨겨졌을때 그때 보여주기 시작하게 만드는 Syntex들로써 작동하기 시작하기 때문이다. 반대로 hide(), fadeOut() 그리고 slideDown()은 만약 Selector에 있는 요소가 페이지 안에 이미 숨겨져 있다면 작동하지 않을 것이다. 

 

또한 jQuery의 직접적인 내장 Syntax인 .hide()를 쓰지 않고도 CSS의 Property중 display를 none으로 설정하여 똑같은 효과를 구현할 수 있다.

 

p {
    display: none;
}

 

5. Triggering Effects

방금 전 효과들을 구현하는 데 있어서 두 가지의 방법이 있다. 무턱대고 페이지를 켠순간 모든 효과들이 작동되면 뷰어들은 혼란스러움을 느낄테니 어떠한 Event가 주어졌을때 실행되게끔 세팅을 해주든가 아니면 페이지를 켠순간부터 효과들이 작동되도록 해주든가 구분을 해야 한다.

Page Load

이와 같은 방식을 사용하면 이 코드 안에 작성된 효과들은 페이지가 로딩될때 작동하는 효과들이다. 

 

<script>
    $(document).ready(function() { // 페이지가 로딩될때
    $('p').hide(); // <p>에 속한 요소를 숨겨라
    });
</script>

 

이와 같이 코드를 작성한다면 페이지가 로딩될때 숨겨야 하는 요소들을 숨길 수 있다. 새로고침할때 그 순간에 나타나질 말아야할 요소가 눈에 보이면 안되기 때문이다. 딱히 Syntax 빼고 별 다른 코드를 작성하지 않은 것을 알 수 있다.

 

Biding to Events

만약 특정 Event가 주어졌을때만 효과들이 작동되게끔 세팅하고 싶다면 또 다른 방식으로 코드를 작성해주어야 한다. click()이나 mouseenter()과 같은 function들을 selector옆에 적어주어 jQuery가 어떤 Event가 작동됫을시 효과를 구현할지 알 수 있게끔 해주어야 한다. 이는 다음과 같다.

 

<script>
$(document).ready(function() { // 페이지가 로딩된 후
    $('p').click(function() { // <p>에 속한 요소를 클릭했을 시에
        $('h1').fadeOut(); // <h1>에 속한 요소를 서서히 숨겨라
    });
});
</script>

 

윗 코드에서 $('p').click()은 브라우저에게 <p> 태그가 클릭되는 것을 인식하게 만들어 주는 코드이다. 이 자체로는 무언가 특별한 무언가를 구현할 수 없지만 Event 기반 Action을 추가하기 위해선 이 부분은 필연적으로 작성해주어야 한다. 이때 무조건 function()이라는 기능을 추가하여 Action을 추가할 것이라는 것을 예고해야 한다. 이로인해 .fadeOut()이라는 syntax가 작동할 수 있게끔 할 수 있다.

이때 사용하는 function()은 크게 두 가지가 있는데 Named Function과 Anonymous Function이다. 이는 다음에 더욱 깊게 알아보겠지만 우선 우리가 사용할 function은 Anonymous Function이다.

 

6. animate()

이렇게 이미 내장되어 있는 Syntax를 쓰는 것도 유용하지만 만약 더욱 복잡한 기능들을 추가하고 싶을땐 터무니 없이 부족하다는 것을 느낄 수 있다. 이를 해결하기 위해 animate() function을 사용하여 CSS의 있는 Property들의 값들을 실시간으로 변화시켜 동적인 웹사이트를 만들어 보게 할 수 있다. 

 

What you can animate

animte()을 적용할 수 있는 CSS Property는 무조건 적으로 값을 숫자로 받는 것들이어야만 한다. 나머지 조건은 딱히 없다.

 

How to do it

animte()을 사용하는 것은 어느정도 조금 복잡하지만 우선 기본적으로는 다음과 같은 방식을 취한다.

 

$('selector').animate({
    property: value,
    property: value,
    property: value
}, {
    option: value,
    option: value
});

 

이때 유의해야 할점은 jQuery상에서 property들을 나누는 방식은 Semi-Colon (;)이 아닌 Comma (,)로 작성해야 한다는 점이다. 참고로 마지막 property나 option들은 comma를 작성하지 않는다. 우선 다음과 같이 제대로 된 코드를 살펴보겠다. 

 

jQuery

 

$('p').animate({
    opacity: 0.4,
    fontSize: 20 // jQuery는 px과 같은 단위를 포함하지 않아도 된다. 오직 수의 값만 작성하면 된다.
}, {
    duration: 3000
});

 

여기서 나타내는 바는 <p>에 포함된 요소는 3초에 걸쳐 opacity값에 따라 반투명해지고 폰트 크기가 20px로 커질것이라는 얘기이다. 이것은 일반적으로 CSS로 나타냈을때면 시간을 따로 설정하지 못하여 곧바로 해당 property가 요소에 적용되어졌을 것이다. jQuery를 통해 애니메이션을 줄 수 있으므로 편하게 동적인 애니메이션을 추구할 수 있다. 이때 또한 jQuery는 CSS의 font-size와 같이 두 단어의 property가 있을 경우 camelCased 방식으로 쓰여져 fontSize로 쓰여진다.

 

CSS

 

/* 만일 이렇게 작성했을 시에 애니메이션이 작동되지 않고 페이지가 로딩되자마자 이런 스타일을 <p>태그 안 요소에 적용하였을 것이다. */
p {
    opacity: 0.4;
    font-size: 20px;
}

 

만약 margin이나 padding같은 property에 animate()을 적용한다면 자연스럽게 주변의 다른 요소들을 밀어내게 할 수 있으므로 영향을 줄 수 있게 만든다. 예를 들어 웹 페이지에서 특정 요소에 margin을 top에다 animate()를 사용하여 적용한다면 이는 효과가 적용된 요소 아래에 있는 다른 요소들을 전부 아래로 밀어낼 것이다. 이를 방지하기 위해서는 position: relative; 와 같이 독립적으로 요소를 움직이는 position property를 사용하여 해결 할 수는 있기는 하다. relative position이 적용된 요소는 animation()을 사용하더라도 자유롭게 다른 요소에 영향을 끼치지 않고 애니메이션을 구현할 수 있다. 이때 문제점은 relative position이 본래 있어야할 위치에 브라우저 윈도우 안에 흰 여백이 생길 것이라는 것이다. 이를 해결하기 위해서는 relative position 대신 absolute position을 사용하여 특정 요소에 적용한 다음 <body>를 relative position으로 대신 바꾸어 애니매이션을 <body>의 요소가 통째로 시간이 갈수록 효과를 구현할 수 있게끔 한다음 특정 요소도 <body>를 따라 똑같이 position을 바꾸게 만들 수 있다.

 

7. More on Events

방금 전 click event를 통해 효과가 나타나게끔 설정을 해주었다. 그렇다면 다른 jQuery로써 인식할 수 있는 다른 Event들은 무엇들이 있을까? 

 

Events Syntax
Click $('selector').click();
Mouseenter $('selector').mouseenter(); // 마우스가 특정 요소안으로 들어올 때
Mouseover $('selector').mouseover(); // 마우스가 특정 요소안에서 움직일 때
Mouseleave $('selector').mouseleave(); // 마우스가 특정 요소밖으로 나가는 순간

 

만약 jQuery를 쓰지 않고도 HTML이 저러한 Event들을 받아들일 수 있는 순간은 오직 하이퍼링크에 관련된 것이었다. 이는 HTML이 유일하게 유저와 인터렉티브한 기능을 제공하는 순간이었지만 jQuery를 통해 어느 요소들로부터 유저가 인터렉션을 즐길 수 있게 할 수 있다. click뿐만이 아닌 다른 event를 적용한 코드는 다음과 같다.

 

$('h1').mouseenter(function() { // 마우스가 h1요소에 들어가면
    // perform some action // 액션을 취해라
)};

 

8. Setting CSS with jQuery

jQuery는 또한 CSS property들을 곧바로 수정할 수 있게끔 만들어 굳이 CSS에 가지 않고도 특정 Selector의 요소의 CSS를 세팅해줄 수 있다.

 

$('p').css({ // <p> 안에 있는 요소의 CSS를 
    color: '#FF0000', // 빨강으로
    fontSize: 24 // 그리고 폰트 크기를 24로 설정하여라
});

 

이때 유의 해야할 점은 jQuery에서 숫자로 값을 가지지 않는 값들은 무조건 ' ' 혹은 " "와 같은 Quatation Marks안에 표기되어야 한다. (eg. color: '#FF0000')

 

이 또한 특정 Event가 발생했을때만 CSS가 요소안에 먹히게끔 세팅할 수 있으며 이는 다음 시간에 더욱 자세히 배울 것 같다.

 

jQuery를 통해 더욱 동적인 웹페이지를 구축하는 방법을 알아보았으며 조금 더 코딩에 가까운 코드를 사용하여 많은 기능을 추가할 수 있게끔 구성할 수 있었다.

'Web Design & Development > Front End_Web Development' 카테고리의 다른 글

Module 6 - Google Fonts & scrollTop  (1) 2022.09.23
Module 5 - jQuery and the DOM  (1) 2022.09.23
Module 3 - New Positions  (1) 2022.09.21
Module 2 - CSS Refresher  (1) 2022.09.21
Module 1 – HTML Refresher  (1) 2022.09.21

'Web Design & Development/Front End_Web Development'의 다른글

  • 현재글Module 4 - Introducing jQuery

관련글

티스토리툴바