HTML DOM의 Style top 속성은 HTML 문서 내에서 위치(position)가 지정된 요소의 상단(top) 위치를 반환하거나 수정하는 데 사용됩니다. 이 속성을 활용하면 자바스크립트만으로도 요소의 세로 위치를 동적으로 제어할 수 있습니다.
문법(Syntax)
top 속성의 기본 문법은 다음과 같습니다.
1. top 값 반환하기
object.top
2. top 값 설정하기
object.top = "value"
value에 사용할 수 있는 값은 아래 표를 참고하세요.
| 번호 | 값 & 설명 |
|---|---|
| 1 | initial 이 속성을 기본(default) 값으로 설정합니다. |
| 2 | inherit 부모 요소로부터 이 속성 값을 상속받습니다. |
| 3 | percentage(%) 부모 요소의 높이를 기준으로 한 백분율(%) 값으로 상단 위치를 지정합니다. |
| 4 | length px, em, rem 등 길이 단위를 사용해 상단 위치를 지정합니다. |
| 5 | auto 브라우저가 상단 위치 값을 자동으로 계산하도록 합니다. |
참고: top 속성은
position속성이relative,absolute,fixed,sticky로 설정된 요소에만 적용됩니다. 정적(static) 위치 요소에는 효과가 없습니다.
예제 코드
다음은 HTML DOM Style top 속성을 실제로 사용하는 예제입니다.
<!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 top Property Demo</h1>
<div class='square'></div>
<button onclick="set()" class="btn">Set top position</button>
<script>
function set() {
document.querySelector('.square').style.top = "200px";
}
</script>
</body>
</html>실행 결과
위 예제에서는 분홍색 사각형(.square)이 position: relative로 설정되어 있습니다. 페이지 하단의 “Set top position” 버튼을 클릭하면 자바스크립트가 실행되어 사각형의 top 값이 200px로 변경됩니다.
버튼 클릭 후 분홍색 사각형이 원래 위치에서 아래쪽으로 200px 이동한 것을 확인할 수 있습니다. 이처럼 Style top 속성을 사용하면 버튼 클릭, 마우스 이벤트 등 다양한 상황에서 요소의 위치를 손쉽게 제어할 수 있습니다.