고정 헤더 영역
상세 컨텐츠
본문
제이쿼리? 재미있는 마법 지팡이 같아! ♂️
오늘은 웹 페이지를 멋지게 꾸미는 마법 지팡이 같은 제이쿼리에 대해 알아볼 거야. 마치 영화에서 주인공이 지팡이로 마법을 부려 물건을 움직이거나 변화시키듯이, 제이쿼리도 웹 페이지의 글자나 그림을 마음대로 움직이고 바꿀 수 있단다.
제이쿼리는 뭐하는 걸까?
우리가 흔히 보는 웹 페이지는 글자와 그림으로 이루어져 있어. 이 글자와 그림들을 하나하나 요소라고 불러. 제이쿼리는 이런 요소들을 골라서 마법을 부리는 도구야.
- 요소 찾기: 웹 페이지에서 특정한 글자나 그림을 찾아내는 거야. 마치 보물찾기처럼 말이지!
- 요소 바꾸기: 찾아낸 요소의 글자를 바꾸거나 색깔을 바꾸는 등 다양한 변화를 줄 수 있어.
- 움직이기: 요소를 숨기거나 나타내고, 움직이게 만들 수도 있단다.
간단한 마법 부려볼까?
자, 이제 직접 제이쿼리로 마법을 부려볼까? 먼저, 우리가 마법을 부릴 HTML이라는 종이가 필요해. HTML은 웹 페이지를 만들 때 사용하는 언어야.
HTML
<!DOCTYPE html>
<html>
<head>
<title>제이쿼리 마법</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1 id="hello">안녕, 세상!</h1>
<button id="change">글자 바꾸기</button>
<script>
// 여기에 마법 주문을 적어줄 거야!
</script>
</body>
</html>
코드를 사용할 때는 주의가 필요합니다.
위 코드에서 <h1> 태그는 큰 제목을 나타내고, id="hello" 부분은 이 제목에 'hello'라는 이름을 붙여 놓은 거야. 마치 우리 친구들에게 이름표를 붙여주는 것과 같지?
이제 script 태그 안에 제이쿼리 마법 주문을 적어볼 거야.
JavaScript
$(document).ready(function(){
$("#change").click(function(){
$("#hello").text("안녕, 제이쿼리!");
});
});
코드를 사용할 때는 주의가 필요합니다.
이 주문은 다음과 같은 의미야.
- $(document).ready(function(){ ... }): 웹 페이지가 완전히 로드된 후에 주문을 실행해.
- $("#change").click(function(){ ... }): 'change'라는 이름의 버튼을 누르면 안에 있는 주문을 실행해.
- $("#hello").text("안녕, 제이쿼리!");: 'hello'라는 이름의 제목 글자를 "안녕, 제이쿼리!"로 바꿔.
이렇게 코드를 완성하고 웹 브라우저에서 실행하면, '글자 바꾸기' 버튼을 누를 때마다 제목 글자가 바뀌는 것을 볼 수 있을 거야!
더 많은 마법
제이쿼리는 이 외에도 다양한 마법을 부릴 수 있어. 예를 들어,
- 요소를 숨기거나 나타내기: .hide(), .show()
- 요소의 색깔을 바꾸기: .css('color', 'red')
- 요소를 움직이기: .animate()
- 새로운 요소를 만들기: $()
등등, 정말 많은 기능들이 있단다.
신기하지? 제이쿼리를 이용하면 웹 페이지를 더욱 멋지고 재미있게 만들 수 있을 거야. 앞으로도 제이쿼리에 대해 더 많이 배우면서 다양한 마법을 부려보자!
'jquery' 카테고리의 다른 글
| jQuery의 animate()와 stop() (0) | 2024.12.05 |
|---|---|
| jQuery의 slideDown(), slideUp(), slideToggle() (0) | 2024.12.05 |
| jQuery의 fadeIn(), fadeOut(), fadeToggle() (0) | 2024.12.05 |
| hide()와 show() (0) | 2024.12.05 |
| 제이쿼리 선택자 (2) | 2024.12.05 |
