z-index 정리 도구

언제 사용하나요?

프로젝트의 z-index 값이 뒤죽박죽일 때 header, modal, tooltip 등 레이어 이름과 값을 입력해 체계적으로 정렬하고 관리합니다.

사용 방법

• "이름 숫자" 형식으로 한 줄씩 입력합니다 (예: modal 1000).
• 낮은 z-index부터 높은 순으로 정렬된 결과가 표시됩니다.
• 정리된 목록을 복사해 CSS 변수나 문서에 활용합니다.

입력값 안내

CSS z-index 값을 관리할 레이어 이름과 정수 값을 공백으로 구분하여 한 줄씩(예: `header 100`) 입력합니다.

계산·변환 기준

입력된 다중 라인 문자열을 줄바꿈 단위로 파싱하고 정규표현식으로 이름과 숫자 데이터를 분리한 후, 배열의 `sort()` 메서드를 사용해 숫자 기준 오름차순으로 정렬하여 UI의 테이블 형태로 다시 출력합니다.

사용 예시

• 레이어 체계 정리 - header, modal, tooltip 등 UI 레이어 값을 정렬해 확인합니다.
• 배포 전 빠른 점검 - 입력값과 생성 결과를 확인해 개발·운영 작업 전 오류 가능성을 줄입니다.
• 문서·리뷰 보조 - 정리된 결과를 복사해 개발 문서, 이슈, 코드 리뷰 코멘트에 바로 붙여넣습니다.

예시

• header 100, modal 1000, tooltip 2000 → 낮은 값부터 정렬
• header 10, dropdown 100, modal 1000 입력 → 층위 순서로 정렬

주의사항

• z-index는 position이 지정된 요소에서만 동작합니다. 생성된 값은 레이어 정리 참고용으로만 사용하세요.
• 입력 데이터는 브라우저에서만 처리되며 서버로 전송되지 않습니다.

계산·사용 가이드

z-index란

z-index는 겹치는 요소의 쌓임 순서를 결정합니다. 값이 클수록 위에 표시됩니다. position이 static이 아닌 요소에만 적용됩니다.

스태킹 컨텍스트 주의

z-index는 같은 스태킹 컨텍스트(stacking context) 안에서만 비교됩니다. 부모 요소가 새 스태킹 컨텍스트를 만들면 자식의 z-index가 아무리 커도 다른 컨텍스트와 비교되지 않습니다.

자주 묻는 질문

입력 형식은 무엇인가요?

modal 1000처럼 이름과 숫자를 한 줄에 입력합니다.

몇 개까지 정리할 수 있나요?

한 줄에 하나씩 입력하면 개수 제한 없이 모든 항목을 값 순서로 정렬합니다.

겹치는 값이 있으면 어떻게 되나요?

같은 z-index 값이 여러 개면 함께 표시되어, 충돌 가능성이 있는 항목을 찾아낼 수 있습니다.

z-index 충돌은 왜 생기나요?

여러 요소에 비슷한 z-index 값이 흩어져 있으면 겹침 순서를 예측하기 어렵습니다. 값을 한곳에 모아 정리하면 충돌을 줄일 수 있습니다.

관련 도구

• JSON 포매터 - JSON 문자열을 보기 좋게 들여쓰기하거나 최소화합니다. 유효성 오류도 함께 표시합니다.
• UUID 생성기 - 암호학적으로 안전한 UUID v4를 최대 20개까지 한 번에 생성합니다.
• 비밀번호 생성기 - 길이, 문자셋, 개수를 선택해 브라우저에서 안전한 랜덤 비밀번호를 생성합니다.
• JWT 디코더 - JWT의 header와 payload를 디코딩해 JSON과 주요 클레임을 확인합니다.
• 정규식 테스터 - 정규식 패턴을 입력해 텍스트에서 매칭 결과를 실시간으로 확인합니다.
• QR 코드 생성기 - 텍스트나 URL을 QR 코드로 변환하고 이미지로 다운로드합니다.