HTML + CSS 주요 개념 정리(7) - 레이아웃에 영향을 미치는 요소 Ⅲ

레이어에 Z 축 조정에 영향을 주는 z-index 속성과 브라우저의 왼쪽, 오른쪽 끝에 공간을 배치할 때 사용하는 float와 clear 속성에 대해 알아보겠습니다.

 

---

1. 레이어 z축을 조정하는 속성, z-index

z축z 축 개념을 어렵게 생각할 필요는 없습니다. 수학에서 x, y 축과 z 축이 있든 html에서도 그런 개념이 존재하는 것이죠.

다만 우리가 보는 웹페이지는 우리가 현실에서 3차원을 보듯 보는 방식이 아닙니다. 마치 우리를 위에서 쳐다보는것 과 같은 방식으로 우리는 웹사이트를 바라보는 것이죠. 이해하기 편하게 그림으로 보여주겠습니다.

 

그림1 - HTML Z축 표현 방법 설명도

이런 식으로 보이기 때문에 우리는 여기서 몇 가지 주의할 점이 있습니다.

간단한 예제로 Z축의 개념과 주의할점을 알알 보겠습니다. 우선 저는

z-index-1, z-index-2 라는 같은 크기를 도형을 만들어 웹페이지에 실행해 봤습니다.

그림2- Z축이 이해를 위한 예제

그림3- z축 이해 예제 실행결과

그림을 보면, 파란색 박스만 생성된것을 볼 수 있는데, 사실은 이 밑에 노란색이 숨어있습니다. 확인해볼까요?

z-index-1에 height 300px와 크기를 주어 파란색 박스보다 삐죽 튀어나오게끔 예제를 만들고 실행해 봅니다.

그림4 -z축 이해 예제 실행결과 2

그림을 보면 실제로 노란색이 100px만큼 삐죽 튀어나왔습니다. 네 실제로 노란색 박스가 숨겨져 있다는 사실입니다.

여기서 우리는 여러 속성을 부여해서 노란색이 앞으로 나오게했다가, z 축 값을 조정해 다시 파란색이 앞으로 나오게 바꿀 수 있습니다.

하나 중요한 것은 z 축이라는 개념 때문에 저희가 여러 속성을 쓸 때 원하는 레이아웃의 형태가 안 나올 수 있음을 인지하고 혹여 원하는 페이지 형태를 만들 때 이점을 간과하지 말라는 부분에서 이 개념을 설명하는 것입니다.

---

2. 속성  요약 표

position 주요 속성값	차원	부모 자식 간에 발생 하는 마진 병합 현상	top, right, bottom, left 적용	자식의 높이 값이 부모에게 미치는 영향	z - index 적용
static	2차원	o	x	o	x
fixed	3차원	x	o	x	o
roelative	2차원, 3차원	o	o	o	o
absolute	3차원	x	o	x	o

속성 요약 표를 통해 각 속성이 무슨 차원인지 인지하고 z-index 적용 여부를 따진 후 레이아웃을 표현해야 좀 더 원활하고 매끄러운 작업이 될 것입니다.

---

후기

 

정말 간 단학 게 html에 z 축에 관해 알아봤습니다. 제가 공부하면서 중요하게 여기 부분은 이런 부분이고 실제로

여기를 공부하면서 float, clear 속성을 추가로 배우면서 예제를 실행하고 학습했지만 이 개념은 부차적인 것으로 생각했기 때문에 여기서 느 생략했습니다.

다음에는 마지막으로 html에서 간단한 동적 표현을 공부해볼 것입니다. 실제로 더 많은 개념들과 배울 것들이 있지만, 여기는 제가 복습 차 작성하는 공간이므로 중요 부분만 작성하려고 합니다.