HTML DOM Style position 속성은 HTML 문서 내에서 특정 요소가 어떤 방식으로 배치되는지를 나타내는 위치 지정 방식을 가져오거나 변경하는 데 사용됩니다. 자바스크립트를 통해 동적으로 요소의 위치 동작을 제어할 수 있어, 인터랙티브한 웹 페이지 제작에 필수적인 속성입니다.
문법(Syntax)
position 속성의 기본 문법은 다음과 같습니다.
1. position 값 가져오기
object.position
2. position 값 설정하기
object.position = "value"
value에 들어갈 수 있는 값은 아래 표와 같습니다.
| 번호 | 값 및 설명 |
|---|---|
| 1 | initial 이 속성 값을 기본(default) 값으로 설정합니다. |
| 2 | inherit 부모 요소로부터 이 속성 값을 상속받습니다. |
| 3 | static 요소가 문서의 일반적인 흐름(document flow) 순서대로 렌더링됩니다. position의 기본값입니다. |
| 4 | absolute 요소가 문서 내에서 위치 지정(position)된 가장 가까운 조상 요소를 기준으로 배치됩니다. |
| 5 | fixed 요소가 브라우저 창(viewport)을 기준으로 배치되며, 스크롤해도 화면에 고정됩니다. |
| 6 | relative 요소가 자신의 원래 위치(일반적인 위치)를 기준으로 상대적으로 배치됩니다. |
| 7 | sticky 사용자의 스크롤 위치에 따라 요소가 배치됩니다. relative와 fixed의 동작이 결합된 형태입니다. |
이제 HTML DOM Style position 속성이 실제로 어떻게 작동하는지 예제를 통해 살펴보겠습니다.
예제(Example)
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem 0;
}
.square {
width: 100px;
height: 100px;
background: #db133a6b;
top: 150px;
left: 50%;
}
.show {
font-size: 1.2rem;
margin: 1rem 0;
}
</style>
<body>
<h1>DOM Style position Property Demo</h1>
<div class='square'></div>
<button onclick="set()" class="btn">Set Position</button>
<script>
function set() {
document.querySelector('.square').style.position = "fixed";
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 분홍색 사각형과 “Set Position” 버튼이 화면에 나타납니다. 버튼을 클릭하면 자바스크립트의 set() 함수가 실행되어 사각형 요소의 position 값이 fixed로 변경됩니다.
position이 fixed로 설정된 후에는 해당 분홍색 사각형이 브라우저 창을 기준으로 배치되며, 페이지를 스크롤해도 항상 같은 위치에 고정되는 것을 확인할 수 있습니다. 이처럼 DOM Style position 속성을 활용하면 버튼 클릭 한 번으로 요소의 배치 방식을 손쉽게 제어할 수 있습니다.