CSS 레이아웃 배치하기 (2)

Position 속성

포토샵을 보면 여러개의 레이어(layer)를 겹쳐 하나의 이미지를 만든다. CSS도 마찬가지다. 여러 개의 태그를 겹쳐 웹 디자인을 만들어낸다. 이를 위해 CSS는 position 속성을 제공한다. position 속성은 태그의 상태를 2차원 혹은 3차원으로 만들어주는 속성이다. position 속성값에는 static, fixed, relative, absolute 4가지 값이 있다. static 속성값은 태그를 2차원으로 만들며 fixed와 absolute 속성값은 태그를 3차원으로 만들고 relative 속성값은 태그를 2,3차원으로 만들어준다.

 

2차원의 태그들끼리는 서로 영향을 준다. 즉 2차원의 특징을 갖는 태그끼리 마진 병합이 발생할 수도 있으며 부모가 높이를 갖고 있지 않을 때 자식의 높이가 부모의 높이에 영향을 줄수도 있다. 

 

반면 3차원의 태그는 다른 태그에 영향을 주지 않는다. 마치 포토샵의 레이어가 다른 레이어에 영향을 주지 못하고 앞 또는 뒤에 겹치는 것과 같다. 즉 다른 태그와 마진 병합이 발생하지 않고 부모가 높이를 갖고 있지 않을 때 자식의 높이가 부모의 높이에 영향을 주지 못한다. 또한 좌표 설정 속성(top·bottom·left·right)을 사용할 수 있다. 2차원의 태그들은 블록 쌓듯 배치 할 수 밖에 없지만 3차원의 태그들은 이 속성을 통해 원하는 위치에 배치시킬 수 있다.

• static 속성값 (2차원)
  태그의 디폴트 position 값이다. position 속성을 명시하지 않았을 경우 static 속성값이 적용된다. 
• fixed 속성값 (3차원)
  태그를 3차원으로 만든다. 좌표 설정 속성의 기준은 브라우저이다. fixed 속성값을 가진 태그는 화면에 고정된다. 따라서 스크롤해도 태그는 고정된 상태로 움직인다. 사이드바, 배너 광고 등에 많이 쓰인다. 
• relative 속성값 (2,3차원)
  태그를 2,3차원으로 만든다. 즉 2차원의 태그와 영향을 주고받지만 3차원의 특징인 좌표 설정 속성을 사용할 수 있다. 좌표 설정 기준은 부모 태그이다.
• absolute 속성값 (3차원)
  태그를 3차원으로 만든다. 좌표 설정 속성의 기준은 부모의 position 속성에 따라 다르다. 부모가 static 속성값이면 좌표 설정 기준은 브라우저이지만 부모가 relative 속성값이면 좌표 설정 기준은 부모이다. 보통 부모 태그내에서 원하는 위치에 배치시킬 때 사용한다. (부모는 relative, 자신은 absolute)

다양한 position 값의 태그들이 중첩됨에 따라 레이아웃 구성은 복잡해질 수 있다. 하지만 많이 사용하는 구조가 있으니 웹 디자인을 많이 보는 것이 제일 빠른 학습의 길이다. 보통 부모의 position 속성 값으로 fixed나 absolute를 적용하는 경우는 드물다.

position 속성

부모 relative, 자식 absolute

z-index 속성

3차원의 특징을 갖는 태그들 (fixed, relative, absolute)은 z-index 속성으로 z축 값을 설정할 수 있다. z축을 통해 태그의 높낮이가 결정된다. z축이 낮은 태그는 z축이 높은 태그에 가려진다. 마치 레이어들이 겹쳐져 있을 때 레이어 우선 순위를 정하는 것과 같다.

z-index 속성