2 position 속성으로 HTML 태그에 차원 부여하기

 

차원이란 기하학적 도형에서 한 점의 위치를 나타내는 데 필요한 수의 개수를 의미합니다. 보통 1차원은 선의 세계, 2차원은 평면의 세계, 3차원은 공간의 세계라고 말합니다.

우리가 보는 웹 사이트는 평면 세계로 보이지만 실제로는 2차원과 3차원이 혼합된 상태입니다. 포토샵에서 말하는 레이어(layer) 개념이 웹 사이트 제작에도 똑같이 적용됩니다.

position 속성은 선택된 태그의 상태를 2차원 또는 3차원으로 지정합니다. 여기에 맞춰 레이어가 생기고 좌표 기준점이 달라집니다. position 속성의 속성값에는 static, fixed, relative, absolute가 있습니다. 각 속성값의 특징은 다음 세 가지 조건으로 확인할 수 있습니다.

■ 부모 자식 간에 발생하는 마진 병합 현상 유무

■ top, right, bottom, left 속성 적용 유무

■ 부모가 높이를 갖고 있지 않을 때 자식의 높이가 부모의 높이에 영향을 주는지 유무

 

2차원 특징을 갖는 position 속성값은 부모 자식 간에 발생하는 마진 병합 현상이 일어나고, top·right·bottom·left 속성을 사용할 수 없으며, 자식의 높이가 부모의 높이에 영향을 미칩니다. 반면 3차원 특징을 갖는 position 속성값은 부모 자식 간에 발생하는 마진 병합 현상이 일어나지 않으며, top·right·bottom·left 속성을 사용할 수 있으며, 자식의 높이가 부모의 높이에 영향을 줄 수 없습니다.

그럼 각 position 속성값에는 어떤 특징이 있는지 차근차근 알아보겠습니다.