JavaScript를 사용하여 위치가 지정된(positioned) 요소의 하단 위치를 설정하려면 bottom 속성을 활용하면 됩니다. 이 속성은 CSS의 bottom 스타일 속성과 동일하게 작동하며, 픽셀(px)과 같은 단위로 값을 지정할 수 있습니다.
사전 조건
bottom 속성이 정상적으로 적용되려면 해당 요소의 position 값이 absolute, relative, fixed, sticky 중 하나로 설정되어 있어야 합니다. 기본값인 static 상태에서는 하단 위치가 변경되지 않습니다.
예제 코드
아래 예제는 버튼을 클릭하면 해당 버튼의 하단 위치가 400px로 변경되는 코드입니다. 직접 실행해 보면서 동작을 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
#newBtn {
position: absolute;
}
</style>
</head>
<body>
<button type="button" id="newBtn" onclick="display()">Set Bottom Position</button>
<script>
function display() {
document.getElementById("newBtn").style.bottom = "400px";
}
</script>
</body>
</html>
코드 설명
- <style> 블록에서
#newBtn버튼에position: absolute;를 적용하여 위치 제어가 가능한 상태로 만듭니다. - 버튼을 클릭하면
onclick이벤트를 통해display()함수가 호출됩니다. document.getElementById("newBtn").style.bottom = "400px";구문이 실행되어 버튼의 하단 위치가 화면 아래쪽에서 400px 위로 이동합니다.
이처럼 JavaScript의 style.bottom 속성을 사용하면 동적으로 요소의 세로 위치를 자유롭게 제어할 수 있습니다. 애니메이션 효과나 반응형 레이아웃 구현 시에도 유용하게 활용됩니다.