웹개발
[명품 웹 프로그래밍] 8장 실습문제 5, 카드 넘기기
hatch
2021. 12. 11. 02:41
728x90
반응형
실행 화면
| 초기 화면 | 다음 |
 |
 |
<자바 스크립트 코드>
<!DOCTYPE html>
<html><head><meta charset="UTF-8">
<title>x</title>
<style>
div {position: absolute;}
img {position: absolute;}
</style>
</head>
<body id="parent">
<h3>z-index 스타일 프로퍼티</h3>
<hr>
<div>
<img src="media/spade-A.png" width="100" height="140">
<img src="media/spade-2.png" width="100" height="140">
<img src="media/spade-3.png" width="100" height="140">
<img src="media/spade-7.png" width="100" height="140">
</div>
<script>
var imgArray = document.getElementsByTagName("img");
for(var i=0; i<imgArray.length; i++){
var pic = imgArray[i];
pic.style.zIndex = i;
pic.style.left = "10px";
pic.style.top = "20px";
//onclick 리스너 등록
pic.onclick = shuffle;
}
function shuffle() {
for(var i=0; i<imgArray.length; i++){
var pic = imgArray[i];
pic.style.zIndex ++;
pic.style.zIndex %= imgArray.length;
}
}
</script>
</body>
</html>
1. 복습
- zIndex, 카멜표기법 잊지 말기
- 리스너 등록할때는 괄호 쓰지 않는다.
- %= 연산자는 나머지 할당이라는 뜻. (근데 저기서 쓰인 이유는 이해 못함.)