[웹 국비 교육 27일차] JS, jQuery: 기초 개념 정리 (2025. 7. 2.)

안녕하세요! 

2025년 7월 2일, UI·UX 반응형 웹퍼블리셔 국비 지원 수업 27일차 수업 내용을 정리해보았습니다.

오늘은 JS, jQuery 기초를 배웠습니다.

 

---

 

27일차 학습내용

 

jQuery 1강

 

## 자바스크립트에서 함수란?

: 함수는 특정 작업을 수행하는 코드 블록이다.

function hello() {
  alert("안녕");
}

hello();

: 함수를 만들었다면, 실행하려면 반드시 '호출'해야 한다.

호출 전 -> 후

---

 

# 버튼 클릭으로 함수 호출하기

<button onclick="hello();">버튼</button>

: HTML 요소에서 자바스크립트 함수를 실행하려면 onclick, onmouseover 같은 이벤트 속성을 사용한다.

: 위 예제에서는 버튼을 클릭할 때 hello() 함수가 실행한다.

 

---

 

# document.getElementsByTagName()

var els = document.getElementsByTagName("div");

: document는 웹 페이지 전체 문서를 뜻한다.

: getElementsByTagName()은 특정 태그명을 가진 모든 요소를 가져온다.

: 반환 값은 배열(HTMLCollection) 형태이며, 각각의 요소에 접근하려면 반복문을 사용해야 한다.

 

console.clear();

function hello() {
   var els = document.getElementsByTagName('div');
    els[0].style.backgroundColor = 'red';
    els[1].style.backgroundColor = 'yellow';
    els[2].style.backgroundColor = 'green';
}

 

 

예시) 웹페이지에 있는 모든 <div>의 배경색을 바꾸고 싶다면

function hello() {
  var els = document.getElementsByTagName("div");
  for (var i = 0; i < els.length; i++) {
    els[i].style.backgroundColor = "pink";
  }
}

: els는 element의 약자로, 여러 요소를 담고 있는 배열처럼 생각하면 된다.

 

 

---

# 왜 jQuery가 등장했을까?

자바스크립트는 DOM 요소를 조작하는 코드가 길고 복잡한 편이다.
이를 더 짧고 직관적으로 만들기 위해 jQuery라는 라이브러리가 탄생했다.

예를 들어 위의 코드는 jQuery를 쓰면 아래와 같이 단순해진다. 

$("div").css("background-color", "red");

 

자바스크립트	jQuery
document.getElementsByTagName("div")	$("div")
style.backgroundColor = "red"	.css("background-color", "red")

 

---

 

# jQuery 사용 방법

1. jQuery 공식 사이트에서 다운로드 또는 CDN 사용
2. HTML 파일에서 <script> 태그로 jQuery 파일을 불러오기

<!-- jQuery CDN 방식 -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>

 

• cdnjs 사이트 바로가기

---

문제1

- 버튼을 누르면 div 700개의 배경색을 파란색으로 변경해주세요.(제이쿼리 사용)

var divs = document.getElementsByTagName('div');

function a() {
    // 구현
}

 

---

 

문제 풀이

작동 전 후

var $div = $("div");

function a() {
    $div.css("background-color", "blue")
}

---

 

문제2

- 처음 버튼은 body 엘리먼트의 배경을 red로, 두번째 버튼은 body 엘리먼트의 배경을 blue로 변경시켜야 합니다.

 

문제 풀이

문제를 조금 다르게 풀어봤다. blue > pink로 변경하고 "back"을 적용하여 다시 되돌아온다.

버튼 pink back

<button onclick="a();">red</button>
<button onclick="b();">back</button>
<button onclick="c();">pink</button>

console.clear();

var a = function() {
    $('body').css('background-color','red');
};

function b () {
    $('body').css('background-color','');
};

function c() {
    $('body').css('background-color','pink');
};

 

---

 

문제3

-  짝수번째 버튼은 body 엘리먼트의 배경을 red로, 홀수번째 버튼은 body 엘리먼트의 배경을 blue로 변경시켜야 합니다.

 

문제 풀이v1

짝수 버튼 gray 홀수 버튼 pink

<section>
    <button>버튼 001</button>
    <button>버튼 002</button>
    <button>버튼 003</button>
    <!-- ... -->
</section>

$('section > button:nth-child(2n + 1)').click(function () {
    $('body').css('background-color','gray');
});

$('section>button:nth-child(2n)').click(function () {
    $('body').css('background-color','pink');
});

 

문제 풀이v2

짝수 버튼 GREEN 홀수 버큰 GOLD

 

function a () {
    $('body').css('background-color','green');
};

$('section > button:nth-child(2n + 1)').click(a);

var b = function(){
    $('body').css('background-color', 'gold');
};

$('section>button:nth-child(2n)').click(b);

 

---

 

마무리
오늘은 jQuery를 활용하는 방법을 배웠습니다. 자바스크립트와 비슷한 코드(?)를 써가는 부분이 아직 낯설었지만, 왜 활용하여햐 하는지 어떨게 사용하여야 하는지는 이해가 되었습니다. 휴~우 

 

복습완료! 끝-