Display·Flex·Position·Z-Index

카드 세 장을 가로로 나란히 놓고 싶거나, 두 카드를 겹쳐 놓고 어느 쪽이 위에 보일지 정하고 싶을 때가 있습니다. 편집기의 속성 패널에는 이런 배치를 다루는 항목이 세 가지 있습니다. 요소를 어떤 방식으로 놓을지 정하는 Display, 요소의 위치 기준을 정하는 Position, 겹칠 때의 위아래 순서를 정하는 Z-Index입니다. 이 글에서는 세 항목의 위치와 쓰는 방법을 예시 화면과 함께 살펴봅니다.

1. 어디에 있나요

컨테이너처럼 다른 요소를 담는 박스형 요소를 고르면 나타납니다. 점 세 개를 눌러 도구 막대를 펼치고 톱니바퀴(요소 설정 열기)를 누른 뒤 창 맨 아래의 전체 속성 패널 열기로 속성 패널을 엽니다. 스타일 탭에서 고급 설정 (정렬 · 테두리 · 그림자 · 배치) 줄을 펼치고 맨 아래까지 내려가면 Display, Position, Z-Index가 있습니다.

제목, 글, 이미지, 버튼 같은 낱개 요소에는 이 세 항목이 나오지 않습니다. 이 글의 화면은 편집 화면 기준입니다.

2. Display로 배치 방식 정하기

Display 목록에는 일곱 가지 값이 있습니다.

• block: 안의 요소가 위에서 아래로 한 줄씩 쌓입니다. 기본 모양입니다.
• flex: 안의 요소가 한 줄로 나란히 놓입니다. 가장 자주 쓰는 값입니다.
• inline, inline-block, inline-flex: 글자처럼 줄 안에 이어서 놓입니다.
• grid: 격자 배치입니다.
• none: 요소를 화면에서 숨깁니다. 숨긴 요소는 편집 화면에서도 보이지 않으므로, 속성 패널이 열려 있을 때 다시 block 등으로 되돌립니다.

카드 세 장이 쌓여 있던 상자를 flex로 바꾸면 카드가 가로로 나란히 놓입니다. 이때 위쪽에 자식 간격 (GAP) 슬라이더가 나타나 카드 사이 간격을 정할 수 있고, Display 아래에는 Flex 레이아웃 항목이 생깁니다.

3. Flex 방향 바꾸기

Flex 레이아웃의 방향에는 네 개의 버튼이 있습니다. → 행은 왼쪽에서 오른쪽으로, ↓ 열은 위에서 아래로 놓습니다. ← 역행과 ↑ 역열은 같은 줄이나 열에서 순서를 거꾸로 뒤집어 보여 줍니다. 아래 그림은 같은 상자에 네 방향을 차례로 적용한 모습입니다.

컨테이너를 고르면 이 자리에는 방향 버튼만 있습니다. 안쪽 요소의 가로·세로 정렬은 컨테이너 설정 창의 내용 정렬 (자식 요소)과 세로 정렬에서 정합니다.

4. Position과 Z-Index로 겹침 순서 정하기

Position에는 (기본), static, relative, absolute, fixed, sticky가 있습니다. (기본)은 값을 지정하지 않은 상태입니다. relative는 원래 자리를 지키면서 Z-Index가 적용되는 위치 기준이 됩니다. absolute와 fixed는 요소를 일반 배치 흐름에서 빼내므로 아래 요소가 위로 올라오고 요소의 너비가 내용 크기로 줄어듭니다. 이 항목에는 top이나 left 같은 위치 값을 입력하는 칸이 없으니, 겹침 순서가 목적이라면 relative로 충분합니다.

Z-Index는 겹친 요소 중 어느 쪽이 위에 보일지 정하는 숫자입니다. 값이 클수록 위에 놓이고, 비워 두면 auto입니다. Position이 (기본)인 요소에 Z-Index 숫자를 쓰면 Position이 relative로 함께 바뀌어 숫자가 바로 효과를 냅니다. 아래 그림은 보라색 카드가 노란색 카드보다 먼저 놓여 아래에 깔린 상태에서, 보라색 카드에 5를 넣어 위로 올린 모습입니다.

5. 상위 요소가 만드는 겹침 구역 안내

요소의 상위 요소가 변형(transform), 필터, 투명도 같은 효과를 쓰고 있으면 그 상위 요소 안이 하나의 겹침 구역이 되어, 안쪽 요소는 그 구역 안에서만 위아래 순서가 정해집니다. 이런 상위 요소가 있으면 Z-Index 아래에 주황색 안내 상자가 나타나 어느 태그가 어떤 효과로 구역을 만들었는지 알려 줍니다. 구역 밖의 요소와 겹침 순서를 바꾸려면 안내에 나온 상위 요소를 골라 그 요소의 Z-Index를 조절합니다.

6. 한 번에 따라 해 보기

1. 카드 여러 장을 담은 컨테이너를 고르고 속성 패널의 스타일 탭에서 고급 설정을 펼칩니다.
2. Display를 flex로 바꿔 카드를 가로로 나란히 놓습니다.
3. 위쪽 자식 간격 (GAP)으로 카드 사이를 띄웁니다.
4. 순서를 뒤집고 싶으면 방향에서 ← 역행을 누릅니다.
5. 겹쳐 놓은 카드에서는 위로 올릴 카드를 골라 Z-Index에 숫자를 씁니다.
6. 모양이 마음에 들면 위쪽 저장을 누릅니다.

7. 이렇게 활용해 보세요

• 혜택 카드나 후기 카드 세 장은 flex 행으로 나란히 놓고, 간격은 자식 간격으로 한 번에 맞춥니다.
• 같은 카드 묶음을 방향 열로 바꿔 두면 세로로 긴 구성이 됩니다.
• 이미지 위에 겹치는 문구 카드가 이미지 아래로 숨어 버렸다면 그 카드의 Z-Index를 올립니다.

8. 알아 두실 점

• 값은 고른 요소 하나에만 적용됩니다. 비슷한 상자가 여럿이면 상자마다 같은 값을 넣어 맞춥니다.
• 바꾼 값은 위쪽 저장을 눌러야 저장됩니다. 저장한 뒤 새로고침해도 Display와 방향 값이 그대로 남습니다.
• 안쪽 여백과 간격은 여백을 다룬 글에서, 테두리와 박스 그림자는 각각의 글에서 이어서 다룹니다.