과일 사진 변경하기 실습 내용
- jQuery를 사용하여 이미지 변경 기능을 구현한 실습이다.
- 특정 버튼을 클릭하면 이미지가 바뀌는 것을 확인 할 수 있어야 한다.
- 특히 주의 해야 할 것은 "jQuery CDN"이 정확하지 않으면 오류가 생긴다.
결과
HTML
<!-- 과일 사진 변경하기 -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>jQuery 실습1</title>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script>
function changeImg(name) {
// name 값에 따라 이미지 경로 설정
if (name === 'apple') {
$("img").attr("src", "./241111_4_실습-1_app.jpg");
} else if (name === 'banana') {
$("img").attr("src", "./241111_4_실습-1_ban.jpg");
} else if (name === 'grape') {
$("img").attr("src", "./241111_4_실습-1_gra.jpg");
} else if (name === 'peach') {
$("img").attr("src", "./241111_4_실습-1_pea.jpg");
}
}
</script>
</head>
<body>
<!-- 기본 이미지 설정 -->
<img src="./241111_4_실습-1_on.jpg" alt="과일" width="230px" height="200px" />
<br />
<!-- 버튼 클릭 시 각 과일 이미지로 변경 -->
<button onclick="changeImg('apple')">사과</button>
<button onclick="changeImg('banana')">바나나</button>
<button onclick="changeImg('grape')">포도</button>
<button onclick="changeImg('peach')">복숭아</button>
</body>
</html>
jQuery
- 쿼리문 작성 할 때 들여쓰기와 "$"등 오타 없이 작성 해줘야한다.
- jQuery를 통한 속성 제어 연습: $("img").attr("src", ...) 구문을 사용하여 jQuery로 이미지 속성을 동적으로 변경하는 연습이다.
- 버튼을 클릭할 때마다 changeImg 함수가 호출되며, 이미지가 해당 과일로 변경
Name : 최윤석(YoonSuk Choi)