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, 카멜표기법 잊지 말기
- 리스너 등록할때는 괄호 쓰지 않는다.
- %= 연산자는 나머지 할당이라는 뜻. (근데 저기서 쓰인 이유는 이해 못함.)
'웹개발' 카테고리의 다른 글
| [명품 웹 프로그래밍] 8장 실습문제 9, 라면 끓이는 순서 입력받기 (0) | 2021.12.11 |
|---|---|
| [명품 웹 프로그래밍] 8장 실습문제 7, 클릭할 때마다 그림 회전 (0) | 2021.12.11 |
| [명품 웹 프로그래밍] 8장 실습문제 3, 빈 칸 채우기 / 숨기기 (0) | 2021.12.11 |
| [명품 웹 프로그래밍] OpenChallenge 5, CSS3로 태그 배치하기 (0) | 2021.10.19 |
| [명품 웹 프로그래밍] OpenChallenge 4, CSS3 모양 꾸미기 (0) | 2021.10.19 |
