HTML & CSS - [CSS]position속성 (요소의 배치방법)

서론

지난 포스트에서 요소의 크기와 좌표를 제어하는 속성을 알아봤습니다. 원하는 위치에 요소들을 배치하기 위해서는 그것만으로는 한계가 있습니다.

HTML에서 태그로 생성되는 요소들(Elements)을 어떻게 사용자에게 보여주는가는 매우 중요합니다.

본문에서는 이 요소들에서는 position속성이 존재합니다. 

이 속성을 통해서 요소들을 원하는 방식으로 적절하게 배치할 수 있어야만 좋은 웹페이지를 구성할 수 있습니다.

본문에서는 position속성의 종류들을 이해하고 적용해 보도록 합시다.

 

position 속성의 종류

CSS에서 position 속성은 요소를 어떤 방식으로 어떻게 위치시키는지 정할 수 있습니다. 

우선 방식으로 종류를 구분하자면 다음과 같습니다.

종류	설명
static (기본 설정값)	순서대로 요소를 배치 (크기만 적용 가능)
relative	순서대로 요소를 배치 (자신을 기준으로 좌표 설정 및 크기 설정 가능)
fixed	화면을 기준으로 해서 위치를 결정
absolute	HTML 규칙을 적용한 위치대비 상대적인 거리로 위치를 결정
sticky	스크롤 상태에 따른 기준으로 위치를 결정
inherit	상위요소의 position속성을 따름

static 속성 (position : static)

이 속성은 HTML규칙에 따라 위치를 배치하는 속성입니다.

이 특성은 아무런 position 속성을 정의하지 않으면 기본적으로 적용이 됩니다.

HTML규칙에 따라 순서대로 요소들이 배치되며, 크기는 조절할 수 있으나 좌표위치는 적용되지 않습니다.

 

See the Pen Untitled by Gon (@gon-91) on CodePen.

relative 속성 (position : relative)

relative 속성은 static과 다르게 자신을 기준으로 좌표 개념의 위치를 적용할 수 있습니다.

이를 보통 오프셋(offset)이라고 합니다. 

즉, 자신의 위치에서 오프셋 값을 주어 요소의 위치를 변경할 수 있습니다.

 

See the Pen Untitled by Gon (@gon-91) on CodePen.

relative에서 과도한 off 셋으로 다른 요소를 침범할 수 있다. (overflow : hidden)

위의 예제처럼 가장 마지막 요소의 경우 의도하지 않게 상위 요소인 article클래스 요소의 경계를 넘어서 배치되고 있습니다.

이런 경우 article클래스에 overflow : hidden을 주어 넘치는 영역을 버릴 수 있습니다.

단, 보이고 싶은 요소의 정보가 잘리는 경우가 있으니 주의가 필요합니다.

 

See the Pen Position-relative-overflow by Gon (@gon-91) on CodePen.

fixed 속성 (position : fixed)

fixed 속성은 웹브라우저의 화면, 즉 뷰포트를 기준으로 좌표를 지정합니다.

웹 페이지를 경험하다 보면 화면에 고정되어 있는 아이템들을 본 적이 있을 것입니다.

이런 요소들이 fixed형태로 요소를 배치한 것입니다.

 

See the Pen Position-fixed by Gon (@gon-91) on CodePen.

absolute 속성 (position : absolute)

absolute 속성은 relative와는 반대로 독립적인 요소로 존재합니다. 이 때문에 absolute 절대적인 의미를 가진다는 표현을 하게 된 속성입니다.

독립적인 요소여도 어딘가의 기준은 있어야 됩니다.

가장 기본적으로 가장 최상위 요소의 크기 안에 좌표로서 존재하게 됩니다. 

하지만 상위 요소에 static을 제외한 다른 요소가 있다면 그 요소를 기준으로 좌표를 가지게 됩니다.

 

See the Pen Position-absolute by Gon (@gon-91) on CodePen.

예제를 보면 class A, C요소는 가장 최상위 요소에서 좌표를 이용해 배치합니다.

하지만 class B 요소는 그 상위 요소의 position속성이 relative여서 상위 요소를 기준으로 요소가 배치됩니다.

inherit 속성 (position : inherit)

이 요소는 상위 요소의 position특성을 그대로 가지고 옵니다. 

 

See the Pen Untitled by Gon (@gon-91) on CodePen.

sticky 속성 (position : sticky)

sticky 속성은 가장 가까운 상위 요소에 끈끈하게 달라붙는 속성입니다. 이후 상위 요소에 달라붙은 이 요소는 스크롤이 넘어가 상위 요소가 사라지면 뷰포트에 달라붙는 특징이 있습니다.

만약 특정 위치부터 fixed속성처럼 부여하고 싶은 요소에 효과적입니다.

간단하게 정리하자면 다음과 같습니다.

• static과 같이 순차적으로 배치되는 요소이다.
• 하지만 offset 값을 적용할 수 있다.
• 또한 스크롤이 넘어가며 offset값이 적용된, 즉 비교점인 상위 요소가 안 보이게 되면 뷰포트에 붙는다.

 

See the Pen Untitled by Gon (@gon-91) on CodePen.

마침 글

CSS를 통하여 원하는 요소를 배치하기 위해서는 position특성에 대한 특징과 종류를 이해하면 좋습니다.

또한 상위 객체의 특성에 따라 상황이나 동작이 변경될 수 있으니 잘 활용해야 됩니다.