JavaScript transform · z-index · 난수 완전 정리

 

 

Web Development · JavaScript

JavaScript transform · z-index · 난수

rotate, scale, z-index 카드 섞기, 난수 배열, 클릭 계산 예제를 정리합니다.

시작 오늘 분석할 코드

이 장은 DOM 요소를 새로 만들고, 기존 요소의 스타일과 내용을 바꾸는 연습입니다. 핵심은 요소를 찾는 단계, 새 요소를 만드는 단계, 부모 요소에 붙이거나 스타일을 바꾸는 단계를 분리해서 보는 것입니다.

let n = 90; function rotate(obj) { obj.style.transform = "rotate(" + n + "deg)"; n += 90; n %= 360; } function scale(obj) { obj.style.transform = "scale(" + n + "," + 1 + ")"; n++; } let imgArray = document.getElementsByTagName("img"); function shuffle() { for (let i = 0; i < imgArray.length; i++) { imgArray[i].style.zIndex++; imgArray[i].style.zIndex %= imgArray.length; } }

transform요소의 회전, 확대 같은 변형을 지정합니다.

rotate요소를 각도만큼 회전합니다.

scale요소를 x/y 배율로 확대합니다.

zIndex겹친 요소의 앞뒤 순서입니다.

Math.random난수를 생성합니다.

sort배열을 정렬합니다.

---

1 transform rotate

rotate 예제는 이미지를 클릭하면 CSS transform 값을 rotate(90deg)로 바꿉니다. 두 번째 버전은 n 값을 90씩 늘려 계속 회전합니다.

클릭	n	transform
1회	90	rotate(90deg)
2회	180	rotate(180deg)
3회	270	rotate(270deg)
4회	0	rotate(0deg)

---

2 n %= 360

n %= 360은 각도를 0~359 범위로 되돌립니다. 360도 회전은 0도와 시각적으로 같기 때문에 반복 회전에 적합합니다.

90씩 증가시키고 360으로 나머지를 구하면 90, 180, 270, 0 패턴이 반복됩니다.

---

3 transform scale

scale 예제는 클릭할 때마다 x축 배율을 2, 3, 4처럼 늘립니다. scale(n, 1)은 가로만 늘리고 세로는 유지합니다.

scale(2,1)

가로 2배, 세로 1배입니다.

scale(3,1)

다음 클릭에서 가로 3배가 됩니다.

---

 

반응형

 

4 z-index 카드 섞기

스타일 프로퍼티 예제는 여러 장의 카드 이미지를 같은 위치에 겹쳐 놓고, 클릭할 때마다 z-index를 바꿉니다.

img 목록

→

zIndex 증가

→

겹침 순서 변경

속성	의미	예제 값
position:absolute	같은 좌표에 겹치기	left 10px, top 20px
zIndex	앞뒤 순서	0,1,2,3
onclick	섞기 실행	shuffle
% length	범위 유지	0~3 반복

---

5 난수 10개 생성

난수 예제는 1부터 100까지의 정수 10개를 배열에 저장하고, 출력한 뒤 가장 큰 수와 정렬 결과를 보여줍니다.

코드	역할	결과
Math.random()*100+1	1 이상 101 미만	실수 난수
Math.floor	소수 버림	1~100 정수
n[i]	배열 저장	10개 숫자
big	최댓값 저장	가장 큰 수

---

6 배열 정렬 주의

원본은 n.sort()를 사용합니다. JavaScript의 기본 sort는 문자열 기준이라 숫자 정렬에서 예상과 다를 수 있습니다.

n.sort()

문자열 기준 정렬이라 100이 2보다 앞설 수 있습니다.

n.sort((a,b)=>a-b)

숫자 오름차순 정렬입니다.

---

7 클릭 계산 span

계산해봅시다 예제는 span을 클릭하면 답이라는 글자를 계산 결과로 바꿉니다. 아주 짧지만 this.innerHTML 패턴을 잘 보여줍니다.

식	결과	처리
2 + 4	6	eval 사용
4 * 20 + 64	144	eval 사용
20/5-8*2	-12	직접 계산식

---

8 자주 하는 실수

실수	증상	해결
deg 단위 누락	회전이 적용되지 않습니다.	rotate(90deg)처럼 단위를 붙입니다.
transform 덮어쓰기	이전 transform이 사라집니다.	필요하면 여러 transform을 한 문자열에 작성합니다.
zIndex 문자열/숫자 혼동	계산이 어색합니다.	숫자처럼 증가시키는 흐름을 확인합니다.
sort 기본 동작 오해	숫자 정렬이 이상합니다.	비교 함수를 넘깁니다.
document.write 남용	문서가 덮일 수 있습니다.	학습 후 DOM 출력으로 바꿉니다.

---

9 복습 체크리스트

체크	통과 기준
rotate	각도 단위와 n 증가 흐름을 압니다.
scale	x/y 배율 의미를 설명합니다.
z-index	겹친 요소의 앞뒤 순서를 바꿉니다.
Math.random	정수 난수 생성식을 설명합니다.
sort	문자열 정렬과 숫자 정렬 차이를 압니다.
this.innerHTML	클릭한 span 자신의 내용을 바꿉니다.

---

10 디버깅 포인트

확인	콘솔 예시	의미
transform	console.log(obj.style.transform)	현재 변형 값 확인
n 값	console.log(n)	회전/확대 상태 확인
zIndex	console.log(obj.style.zIndex)	겹침 순서 확인
난수 배열	console.log(n)	생성된 숫자 확인
정렬 결과	console.log(n.sort((a,b)=>a-b))	숫자 정렬 확인

---

11 테스트 케이스

케이스	동작	예상 결과
rotate 1회	이미지 클릭	90도 회전
rotate 4회	네 번 클릭	원래 방향
scale	여러 번 클릭	가로 배율 증가
카드 클릭	겹친 카드 클릭	앞뒤 순서 변경
난수 출력	새로고침	다른 숫자 10개
span 계산	답 클릭	계산 결과 표시

---

12 transform 개선 연습

transform 예제는 한 속성에 회전과 확대를 함께 넣는 연습으로 확장할 수 있습니다. transform은 여러 함수를 공백으로 이어 쓸 수 있습니다.

표현	의미	예시
rotate(90deg)	90도 회전	방향 변경
scale(2,1)	가로 2배	가로 확대
translate(20px,0)	오른쪽 이동	위치 이동
rotate(...) scale(...)	회전과 확대 동시 적용	복합 변형
transform = ""	변형 초기화	원래 상태 복구

A

회전 초기화버튼을 추가해 transform을 빈 문자열로 되돌립니다.

B

가로/세로 동시 확대scale(n,n)으로 비율을 유지해 봅니다.

C

부드러운 전환CSS transition을 추가해 회전을 부드럽게 만듭니다.

D

상태 표시현재 n 값을 화면에 출력해 회전 상태를 확인합니다.

---

13 난수와 배열 개선

난수 예제는 배열 생성, 최댓값 찾기, 정렬을 한 번에 연습합니다. 기본 sort의 함정을 같이 확인하면 배열 처리 감각이 좋아집니다.

개선	이유	코드 힌트
숫자 정렬	기본 sort 오류 방지	sort((a,b)=>a-b)
최솟값 찾기	최댓값과 반대 로직 연습	small 변수
평균 계산	합계와 나눗셈 연습	sum / n.length
중복 제거	Set 자료구조 연습	new Set(n)
DOM 출력	document.write 대체	textContent

n.sort((a, b) => a - b); const max = Math.max(...n); const min = Math.min(...n);

---

14 z-index 디버깅

z-index는 position이 지정된 요소에서 의미가 분명해집니다. 원본처럼 img에 position:absolute를 주고 같은 left/top에 배치하면 겹침 순서가 잘 보입니다.

확인	이유	증상
position	z-index 적용 조건	순서가 안 바뀌는 것처럼 보임
left/top	겹쳐 보이게 함	카드가 흩어져 보임
zIndex 값	앞뒤 순서 확인	예상과 다른 카드가 앞에 있음
length 나머지	값 범위 유지	zIndex가 계속 커짐

---

15 실습 확장

transform과 z-index, 난수는 화면 변화가 바로 보이는 주제라 작은 기능을 추가하면서 연습하기 좋습니다.

실습	목표	힌트
랜덤 회전	클릭할 때 임의 각도로 회전	Math.floor(Math.random()*360)
랜덤 확대	1~3배 사이로 scale	Math.random()*2+1
카드 랜덤 순서	zIndex를 무작위로 섞기	배열 shuffle
최댓값 표시	난수 중 가장 큰 수 강조	Math.max
정렬 방향 버튼	오름차순/내림차순 전환	(a,b)=>a-b / b-a

A

상태 변수 분리회전 각도와 확대 배율 변수를 따로 둡니다.

B

출력 영역 만들기document.write 대신 div에 textContent로 출력합니다.

C

초기화 버튼 추가transform과 zIndex를 처음 상태로 되돌립니다.

D

최소/최대 제한scale이 너무 커지지 않도록 범위를 둡니다.

---

핵심 한 줄 요약

transformstyle.transform에 rotate나 scale 문자열을 넣어 변형합니다.

z-index겹친 이미지의 앞뒤 순서는 zIndex로 바꿉니다.

random난수 배열은 생성, 최댓값 찾기, 정렬 순서로 연습합니다.

Tags

#JavaScript#transform#rotate#scale#z-index#Math.random#sort#array#style#티스토리

▼ 티스토리 태그 입력란 복사용

JavaScript, transform, rotate, scale, z-index, Math.random, sort, array, style, 티스토리