[JavaScript] 04. jQuery로 hover 이벤트 만들기 + flex 레이아웃 🎯
마우스를 올렸을 때 색이 바뀌고 벗어나면 원래대로 돌아오는 인터랙티브 효과를
jQuery 한 줄로 만들 수 있습니다. flex로 가로 정렬까지 함께 적용해봐요!
01. jQuery란?
JavaScript를 더 쉽고 짧게 쓸 수 있도록 만들어진 라이브러리입니다.
2006년 등장해 웹 개발 필수 도구로 자리잡았으며, 지금도 수많은 사이트에서 사용됩니다.
🏠 비유로 이해하기
순수 JavaScript가 요리 재료를 직접 손질하는 것이라면,
jQuery는 이미 손질된 재료를 제공하는 것입니다.
같은 결과를 훨씬 적은 코드로 만들 수 있습니다!
// 순수 JavaScript — div의 색상 변경
document.querySelectorAll('div').forEach(function(el) {
el.style.backgroundColor = 'gold';
});
// jQuery — 같은 결과를 한 줄로
$('div').css('background-color', 'gold');02. jQuery 불러오기
직접 설치 없이 CDN 링크 한 줄로 바로 사용할 수 있습니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>⚠️ 반드시 내 코드보다 위에 작성해야 합니다.
jQuery가 먼저 로드되어야$()문법을 사용할 수 있습니다!
<!-- 올바른 순서 -->
<script src="jquery.min.js"></script> <!-- 1. jQuery 먼저 -->
<script src="내코드.js"></script> <!-- 2. 내 코드 다음 -->03. jQuery 기본 문법
$('선택자').메서드(값);| 구성 | 설명 | 예시 |
|---|---|---|
$ | jQuery 사용 선언 | $ |
'선택자' | CSS 선택자로 요소 지정 | 'div', '#id', '.class' |
.메서드() | 선택한 요소에 실행할 동작 | .css(), .click() |
✅ 선택자 예시
$('div') // 모든 div 선택
$('button') // 모든 button 선택
$('body') // body 선택
$('#title') // id="title"인 요소
$('.box') // class="box"인 요소
$('body > div') // body의 직계 자식 div✅ 자주 쓰는 메서드
| 메서드 | 역할 | 예시 |
|---|---|---|
.css('속성', '값') | 스타일 변경 | .css('color', 'red') |
.css('속성', '') | 스타일 제거 | .css('color', '') |
.click(함수) | 클릭 이벤트 연결 | .click(hello) |
.mouseenter(함수) | 마우스 진입 이벤트 | .mouseenter(hello) |
.mouseleave(함수) | 마우스 이탈 이벤트 | .mouseleave(hello2) |
.dblclick(함수) | 더블클릭 이벤트 | .dblclick(hello) |
04.📖 연습예제
HTML 구조
<!-- 제이쿼리 불러오기 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div></div>
<div></div>
<div></div>
<button>버튼</button>💡 jQuery 스크립트는 반드시 코드보다 위에 작성해야 합니다.
안 그러면$()문법이 동작하지 않습니다!
CSS 스타일링
body {
display: flex;
}
body > div {
width: 100px;
height: 100px;
border: 10px solid black;
}body { display: flex; }
body의 직계 자식들을 가로로 나란히 정렬합니다.- div는 기본적으로 세로로 쌓이지만, flex가 적용되면 가로로 펼쳐집니다.
display: block (기본값) display: flex (적용 후)
[ div 1 ] [div1] [div2] [div3] [버튼]
[ div 2 ]
[ div 3 ]
[ 버튼 ]JavaScript 코드
console.clear();
// 색상 적용 함수
function hello() {
$('div').css('background-color', 'gold');
$('body').css('background-color', 'blue');
$('button').css('background-color', 'pink');
}
// 색상 제거 함수
function hello2() {
$('div').css('background-color', '');
$('body').css('background-color', '');
$('button').css('background-color', '');
}
// $('button').click(hello); // 클릭할 때
// $('button').dblclick(hello); // 더블클릭할 때
$('button').mouseenter(hello); // 마우스 올릴 때
$('button').mouseleave(hello2); // 마우스 벗어날 때05. 코드 동작 분석
✅ hello() — 색상 적용
function hello() {
$('div').css('background-color', 'gold');
$('body').css('background-color', 'blue');
$('button').css('background-color', 'pink');
}| 선택자 | 변경 내용 |
|---|---|
$('div') | 모든 div의 배경을 금색으로 |
$('body') | body의 배경을 파란색으로 |
$('button') | button의 배경을 핑크색으로 |
✅ hello2() — 색상 제거
function hello2() {
$('div').css('background-color', '');
$('body').css('background-color', '');
$('button').css('background-color', '');
}💡
.css('속성', '')— 빈 문자열을 값으로 넣으면 스타일이 제거되어 원래 상태로 돌아갑니다!
06. 이벤트 연결 🖱️
$('button').mouseenter(hello);
$('button').mouseleave(hello2);| 이벤트 | 발생 시점 | 실행 함수 |
|---|---|---|
mouseenter | 마우스가 요소 위로 들어올 때 | hello |
mouseleave | 마우스가 요소 밖으로 나갈 때 | hello2 |
📖 핵심 요약
| 포인트 | 내용 |
|---|---|
display: flex | 자식 요소를 가로로 나란히 정렬 |
body > div | 직계 자식 선택자 (>) |
$('선택자') | jQuery로 HTML 요소 선택 |
.css('속성', '값') | CSS 속성 변경 |
.css('속성', '') | 빈 문자열로 스타일 제거 |
.mouseenter() | 마우스 진입 시 함수 실행 |
.mouseleave() | 마우스 이탈 시 함수 실행 |
| ⚠️ 함수 전달 | mouseenter(hello) — 괄호 없이! |
