Computer >> 컴퓨터 >  >> 프로그래밍 >> CSS

CSS position 속성 완벽 가이드: 웹 요소 배치의 모든 것

CSS position 속성은 HTML 페이지에서 요소의 위치를 조정하는 역할을 합니다. top, right, left, bottom 속성은 박스 가장자리를 기준으로 요소가 어디에 배치될지 정의하며, position 속성에는 static, fixed, relative, sticky, absolute라는 다섯 가지 값이 있습니다.

웹 디자인에서 좋은 결과물을 만들기 위해서는 기획 의도에 맞게 요소를 정확한 위치에 배치하는 것이 매우 중요합니다.

바로 이럴 때 CSS position 속성이 유용하게 사용됩니다. position 속성은 다섯 가지 값을 제공하며, 이를 통해 웹 페이지에서 요소가 어떻게 배치될지 자유롭게 정의할 수 있습니다.

이 글에서는 다양한 예제와 함께 position 속성을 활용해 웹 페이지에 요소를 배치하는 방법을 살펴봅니다. 글을 끝까지 읽고 나면 전문가처럼 position 속성을 활용할 수 있게 될 것입니다.

CSS position 속성이란?

position 속성을 사용하면 웹 페이지에서 요소의 위치를 정의할 수 있습니다. 기본 문법은 다음과 같습니다.

position: positionType;

position 속성은 다양한 상황에서 활용할 수 있습니다. 예를 들어, 화면 하단에 항상 고정되어 있는 내비게이션 바를 디자인하고 싶을 때 이 속성을 사용하면 됩니다.

요소의 위치를 설정할 때 사용할 수 있는 값은 다음과 같이 다섯 가지입니다.

  • static
  • fixed
  • relative
  • sticky
  • absolute

위 다섯 가지 값 중 하나를 선택해 요소의 배치 방식을 지정할 수 있으며, top, bottom, left, right 속성을 함께 사용하면 페이지에서 요소의 위치를 더욱 세밀하게 조정할 수 있습니다. 각 속성이 어떻게 동작하는지 아래 예제를 통해 자세히 알아보겠습니다.

CSS position 속성의 5가지 값

이제 position 속성에 사용할 수 있는 각각의 값이 어떻게 동작하는지 하나씩 살펴보겠습니다.

static (정적 위치)

HTML 요소는 기본적으로 static으로 배치됩니다. 즉, top, bottom, left, right 속성의 영향을 받지 않습니다. 코드에서 별도로 지정하지 않는 한 브라우저는 모든 요소를 static 위치로 렌더링합니다.

예를 들어 텍스트가 들어 있는 박스를 디자인한다고 가정해 보겠습니다. 기본 위치를 사용해 박스를 배치하려면 다음과 같은 코드를 작성할 수 있습니다.

<html>

<div class="outer">
	<p>This is a positioned box.</p>
</div>

<style>

.outer {
	position: static;
	border: 2px solid lightblue;
}

위 코드는 페이지에 static 방식으로 배치된 박스를 생성합니다. 즉, 박스는 특별한 방식으로 배치되지 않고 브라우저의 기본 규칙에 따라 위치하게 됩니다. 박스에는 너비 2px의 연한 파란색 실선 테두리가 적용되어 있어 시각적으로 더 잘 보입니다.

fixed (고정 위치)

fixed 값은 요소를 웹 페이지의 특정 위치에 고정시킵니다.

fixed 값을 사용하면 해당 요소는 항상 같은 자리에 머무릅니다. 사용자가 페이지를 아래로 스크롤해도 요소는 고정된 위치에 그대로 있습니다. 이는 fixed 요소가 일반적인 문서 흐름에서 분리되기 때문입니다. fixed 값으로 요소를 배치하려면 반드시 top, right, bottom, left 속성을 함께 사용해야 합니다.

박스를 만들어 웹 페이지의 오른쪽 하단 모서리에 고정하고 싶다면 다음과 같은 코드를 사용할 수 있습니다.

<html>

<p>This is the contents of a web page.</p>
<div class="outer">
	<p>This is a positioned box.</p>
</div>

<style>

.outer {
	width: 200px;
	border: 2px solid lightblue;
	position: fixed;
	bottom: 0;
	right: 0;
}

이 예제에서는 fixed 위치 값을 사용해 웹 페이지의 특정 위치에 고정되는 박스를 만들었습니다. bottom: 0과 right: 0 속성 덕분에 박스는 페이지의 오른쪽 하단 모서리에 배치됩니다.

또한 박스의 너비를 200px로 지정하고, 너비 2px의 연한 파란색 실선 테두리를 적용해 눈에 잘 띄도록 했습니다.

결과를 보면 박스가 웹 페이지의 오른쪽 하단에 배치된 것을 확인할 수 있습니다. 사용자가 아래로 스크롤해도 박스는 화면상의 위치를 그대로 유지합니다. 즉, 스크롤을 내려도 사용자는 계속 화면 오른쪽 하단에서 박스를 볼 수 있습니다.

relative (상대 위치)

relative 값은 요소를 자신의 원래 위치(기본 위치)를 기준으로 배치합니다.

relative 값은 top, bottom, left, right 속성과 함께 사용됩니다. 이 네 가지 속성은 요소가 기본 위치에서 얼마나 이동(offset)할지를 지정합니다. 참고로, relative로 배치된 박스가 이동하면서 생긴 빈 공간은 다른 요소로 채워지지 않습니다.

예를 들어 어떤 요소를 왼쪽으로 50px 이동시키고 싶다면 left 속성에 값을 지정하면 됩니다. 이러한 박스를 만드는 코드는 다음과 같습니다.

<html>

<p>This is the contents of a web page.</p>
<div class="outer">
	<p>This is a positioned box.</p>
</div>

<style>

.outer {
position: relative;
left: 50px;
	border: 2px solid lightblue;
}

이 예제에서는 relative 위치 지정을 적용한 박스를 정의했습니다. left 속성을 사용해 박스를 왼쪽 방향으로 50px 이동시켰습니다. 그 결과 페이지 시작점과 박스 시작점 사이에 50px의 간격이 생긴 것을 확인할 수 있습니다. 이것은 position: relative와 left: 50px 속성을 통해 구현된 것입니다.

박스가 이동하면서 왼쪽에 생긴 빈 공간은 다른 어떤 요소로도 채워지지 않습니다.

sticky (스티키 위치)

sticky 위치 값은 방문자가 특정 지점(threshold)을 지나기 전까지는 요소를 relative처럼 배치하고, 그 지점을 넘으면 fixed처럼 고정합니다.

즉, sticky 위치는 relative와 fixed의 성격을 절반씩 섞어 놓은 방식이라고 할 수 있습니다. sticky 요소가 처음 로드될 때는 relative처럼 배치되며, 사용자가 페이지의 특정 지점을 지나 스크롤하면 그 순간부터 고정된 위치에 붙어 있습니다.

sticky 위치는 문서의 흐름을 유지하면서 특정 요소를 계속 화면에 보이게 하고 싶을 때 유용합니다. 요소를 특정 위치에 '붙여' 두면 방문자가 그 요소를 놓치지 않게 됩니다.

sticky 위치는 사용자가 페이지를 아래로 스크롤할 때 내비게이션 바가 화면 상단에 달라붙도록 만드는 용도로 가장 많이 사용됩니다.

이번에는 박스가 페이지 상단에 나타나도록 만들어 보겠습니다. 이 박스는 텍스트 뒤에 등장하고, 사용자가 아래로 스크롤하면 화면 상단에 고정되어야 합니다. 다음 코드로 이 작업을 수행할 수 있습니다.

<html>

<p>Lorem ipsum dolor sit amet, … </p>
<div>
	<p class="inner">This is a positioned box.</p>
</div>
<p>Pulvinar pellentesque habitant morbi tristique senectus et netus et malesuada. Tortor at auctor urna nunc id. … </p>

<style>

.inner {
	position: sticky;
	top: 0;
	border: 2px solid lightblue;
}

아직 스크롤하지 않은 초기 화면에서는 박스가 첫 번째 단락 뒤에 나타납니다. 사용자가 아직 박스 위치까지 스크롤하지 않았기 때문입니다. 그럼 사용자가 박스를 지나 스크롤하면 어떻게 되는지 살펴보겠습니다.

페이지 상단에는 Lorem ipsum … 표준 텍스트 단락이 있고, 그 아래에 This is a positioned box라는 텍스트가 담긴 박스가 배치되어 있습니다. 사용자가 아래로 스크롤해 선언된 박스 위치에 도달하면, 박스는 화면 상단에 고정됩니다. 이후 사용자가 계속 스크롤해도 박스는 화면 상단에 그대로 머무릅니다.

반대로 사용자가 위로 스크롤해 박스보다 위로 올라가면, 박스는 다시 두 단락 사이의 원래 위치로 돌아갑니다.

absolute (절대 위치)

absolute 값은 요소를 이미 위치가 지정되어 있는 다른 요소를 기준으로 배치합니다.

absolute 속성은 이미 위치가 지정된 부모 요소를 기준으로 요소를 배치합니다. 예를 들어, absolute로 배치된 요소는 텍스트 단락을 포함하는 박스 안의 텍스트일 수 있으며, 이 박스는 relative 또는 fixed 위치를 가질 수 있습니다.

이번에는 어떤 박스의 왼쪽 하단 모서리에 나타나는 박스를 디자인해 보겠습니다. 다음 코드로 이 박스들을 만들 수 있습니다.

<html>

<div class="outer">
	<p>This is the outer box.</p>
	<p class="inner">This is a positioned box.</p>
</div>

<style>

.outer {
	position: relative;
	border: 2px solid lightblue;
	width: 300px;
	height: 300px;
}

.inner {
	position: absolute;
	left: 0;
	bottom: 0;
	border: 2px solid pink;
}

HTML 파일에서는 두 개의 박스를 정의합니다. 첫 번째 박스는 <div> 태그로 선언하고 outer 클래스를 할당했으므로, 이 박스에는 outer 클래스에 연결된 CSS 스타일이 적용됩니다. 두 번째 박스는 <p> 태그로 선언하고 inner 클래스를 할당했습니다.

CSS에서 외부 박스(outer)에는 다음과 같은 스타일을 지정했습니다.

  • 웹 페이지의 다른 요소를 기준으로 relative 배치
  • 너비 2px의 연한 파란색 실선 테두리
  • 가로 300px, 세로 300px 크기

내부 박스(inner)에는 다음과 같은 스타일을 지정했습니다.

  • absolute 방식으로 배치
  • 외부 박스의 왼쪽 하단에 배치 (left: 0, bottom: 0 사용)
  • 너비 2px의 분홍색 실선 테두리

이 예제에서는 분홍색 박스(inner)를 outer 박스의 왼쪽 하단에 배치했습니다. 만약 여기서 fixed 키워드를 사용했다면, 분홍색 박스는 outer 박스가 아니라 웹 페이지 전체의 하단에 배치되었을 것입니다.



결론

CSS position 속성은 웹 페이지에서 요소의 위치를 정의합니다. top, right, bottom, left 속성과 함께 사용하면 요소를 페이지의 원하는 위치에 정확하게 배치할 수 있습니다. 이제 position 속성을 활용해 전문가처럼 CSS에서 요소를 자유롭게 배치해 보세요!