HTML DOM의 Style right 속성은 HTML 문서에서 위치 지정(position)된 요소의 오른쪽(right) 위치 값을 가져오거나 변경하는 데 사용됩니다. 이 속성을 활용하면 자바스크립트만으로 요소의 수평 위치를 동적으로 제어할 수 있으며, 애니메이션이나 인터랙티브한 UI 구현에도 유용하게 쓰입니다.
문법(Syntax)
right 속성의 기본 문법은 다음과 같습니다.
1. right 값 가져오기
object.right
2. right 값 설정하기
object.right = "value"
value에 지정할 수 있는 값은 아래 표와 같습니다.
| 번호 | 값 및 설명 |
|---|---|
| 1 | initial 이 속성값을 기본(default) 값으로 되돌립니다. |
| 2 | inherit 부모 요소로부터 속성값을 상속받습니다. |
| 3 | percentage(%) 부모 요소 너비를 기준으로 백분율(%) 단위로 값을 정의합니다. |
| 4 | length px, em 등 길이 단위로 오른쪽 위치 값을 정의합니다. |
| 5 | auto 브라우저가 오른쪽 위치 값을 직접 계산하도록 합니다. |
참고: right 속성은 요소의 position 값이 absolute, relative, fixed, sticky 중 하나일 때만 적용됩니다. position이 static인 요소에는 아무런 영향을 주지 않으므로 주의해야 합니다.
이제 HTML DOM Style right 속성의 실제 동작 예제를 살펴보겠습니다.
예제(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;
position: relative;
}
.show {
font-size: 1.2rem;
margin: 1rem 0;
}
</style>
<body>
<h1>DOM Style right Property Demo</h1>
<div class='square'></div>
<button onclick="set()" class="btn">Set right position</button>
<script>
function set() {
document.querySelector('.square').style.right = "-400px";
}
</script>
</body>
</html>
출력 결과(Output)
위 예제에서는 분홍색 사각형(.square)이 position: relative로 설정되어 있으며, 버튼을 클릭하면 자바스크립트의 set() 함수가 실행되어 해당 요소의 right 값을 -400px로 변경합니다.
"Set right position" 버튼을 클릭하면 분홍색 사각형의 오른쪽 위치가 즉시 변경되는 것을 확인할 수 있습니다.
정리
HTML DOM Style right 속성은 positioned 요소의 오른쪽 오프셋을 읽고 쓸 수 있는 강력한 도구입니다. initial, inherit, %, 길이 단위, auto 등 다양한 값을 지원하므로 상황에 맞게 활용하면 됩니다. 특히 클릭 이벤트와 결합하면 위 예제처럼 간단한 코드만으로도 요소의 위치를 동적으로 조작할 수 있습니다.