css z-index 프로퍼티 이용하여 html 태그 수직으로 쌓기

네 안녕하세요, 이번 포스팅에서는 html 태그를 수직으로 겹겹이 쌓는 방법에 대하여 알아보도록 하겠습니다.

이 방법은 사실 많이 쓰이는 방법은 아니지만,

html 태그를 이용하여 간단한 웹 게임을 만들 때 쓰곤 합니다.

그래서 웹의 종류는 다양하며, 일반적인 웹 사이트의 한 종류를 만드실 분들도 계시겠지만,

웹 게임 등을 만드실 분들도 계시리라 생각합니다.

그래서 그런 분들을 위해 어떻게 사용을 하는지 보여드리려 합니다.

그럼 지금부터 시작하도록 하겠습니다.

1. z-index 사용해보기

z-index를 사용할 때는 보통 블록 태그를 이용하여 많이 씁니다.

그중에 가장 대표적인 사례가 바로 div 태그입니다.

사용 방식은 아래와 같습니다.

div {z-index : 3;}

이렇게 쓰게 되면 div 태그의 z-index 값, 다시 말하면 수직 인덱스 값이 3이 되는 것입니다.

그리고 이게 겹겹이 쌓이게 되면 나중에 여러 개의 층을 이루게 됩니다.

보통 이러한 방식을 이용해서 간단한 솔리테어 게임을 만들곤 합니다.

그리고 z-index의 지정이 없을 경우에는 html 문서에 나오는 순서대로 z-index 값이 순서대로 결정이 되어서

굳이 순서를 지정할 필요가 없으시다면 그렇게 하시면 됩니다.

그리고 여기서 한 가지 주의사항을 말씀드리자면,

z-index는 position 프로퍼티의 값이 fixed, relative, absolute일 경우에만 작용을 한다는 것을

알아두셔야 합니다.

해당 프로퍼티를 다루는 포스팅은 제가 아래에 기재를 해두도록 하겠습니다.

2023.04.24 - [html, css, 자바스크립트] - css position : relative 프로퍼티로 박스 상대 배치 하기

css position : relative 프로퍼티로 박스 상대 배치 하기

css position : relative 프로퍼티로 박스 상대 배치 하기 네 안녕하세요, 이번 포스팅에서는 박스를 상대 배치를 하는 방법에 대하여 알아보려 합니다. 우리가 css로 웹 퍼블리싱을 할 때 많이 사용하

funnycoderl.tistory.com

2023.04.24 - [html, css, 자바스크립트] - css position : absolute 프로퍼티로 박스 절대 배치 하기

css position : absolute 프로퍼티로 박스 절대 배치 하기

css position : absolute 프로퍼티로 박스 절대 배치 하기 네 안녕하세요, 이번 포스팅에서는 박스를 절대 배치하는 방법에 대하여 알아보도록 하겠습니다. 절대 배치 역시 상대 배치처럼 많이 쓰입니

funnycoderl.tistory.com

2023.04.24 - [html, css, 자바스크립트] - css position : fixed 프로퍼티로 박스 고정 배치 하기

css position : fixed 프로퍼티로 박스 고정 배치 하기

css position : fixed 프로퍼티로 박스 고정 배치 하기 네 안녕하세요, 이번 포스팅에서는 박스를 고정 배치 하는 방법에 대하여 알아보도록 하겠습니다. 박스를 고정 배치를 한다는 것은 사실 반응형

funnycoderl.tistory.com

이제 이를 가지고서 간단한 예제를 한 번 작성해 보도록 하겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>z-index 프로퍼티</title>
    <style>
    div { position : absolute; }
    img { position : absolute; }
    #spadeA { z-index :-3; left : 10px; top : 20px; }
    #spade2 { z-index : 2; left : 40px; top : 30px; }
    #spade3 { z-index : 3; left : 80px; top : 40px; }
    #spade7 { z-index : 7; left : 120px; top : 50px; }
    </style>
</head>
<body>
    <h3>z-index 프로퍼티</h3>
    <hr>
    <div>
        <img id="spadeA" src="media/spade-A.png"
            width="100" height="140" alt="스페이드A">
        <img id="spade2" src="media/spade-2.png"
            width="100" height="140" alt="스페이드2">
        <img id="spade3" src="media/spade-3.png"
            width="100" height="140" alt="스페이드3">
        <img id="spade7" src="media/spade-7.png"
            width="100" height="140" alt="스페이드7">
    </div>
</body>
</html>

이렇게 작성을 해봤습니다.

div 태그와 img 태그는 절대 배치를 했고,

img 태그 내에 들어갈 포커 카드들의 숫자에 맞춰서 z-index 번호를 설정했으며,

각각의 카드 번호를 id로 설정하여 적용시켰습니다.

그럼 이제 어떻게 카드가 나오는지 한 번 보도록 하겠습니다.

이런 식으로 카드의 번호 순서대로 쌓여있는 것을 볼 수가 있습니다.

이걸 좀 더 응용하면 솔리테어 게임을 만들 수 있다는 것이 이러한 이유 때문입니다.

여기까지 수직으로 html 태그를 배치하는 방법에 대하여 알아보았습니다.

다음 포스팅에서는 html 태그를 숨기거나 보여주는 방법에 대하여 알아보도록 하겠습니다.

긴 글 읽어주신 독자분들께 진심으로 감사드립니다~

저작자표시 비영리 변경금지

'html, css, 자바스크립트 > css' 카테고리의 다른 글

css overflow 프로퍼티로 콘텐츠 자르기 (0)	2023.04.24
css visibility 프로퍼티로 태그 숨기거나 공개하기 (0)	2023.04.24
css float 프로퍼티로 박스 유동적으로 배치하기 (0)	2023.04.24
css position : fixed 프로퍼티로 박스 고정 배치 하기 (0)	2023.04.24
css position : absolute 프로퍼티로 박스 절대 배치 하기 (0)	2023.04.24

개발러 L의 뻔fun한 코딩

css z-index 프로퍼티 이용하여 html 태그 수직으로 쌓기