HTML DOM 스타일 width 속성 완벽 정리 – 문법과 예제로 배우기

HTML DOM의 style width 속성은 HTML 문서 내 특정 요소에 적용된 CSS width(너비) 속성 값을 가져오거나 수정할 때 사용합니다. 이 속성을 활용하면 자바스크립트만으로 페이지 로드 후 동적으로 요소의 너비를 제어할 수 있습니다.

문법(Syntax)

style width 속성의 기본 문법은 다음과 같습니다.

1. 너비 값 가져오기

object.style.width

2. 너비 값 설정하기

object.style.width = "value"

설정할 수 있는 값은 픽셀(px), 퍼센트(%), em 등 유효한 CSS 길이 단위입니다.

예제(Example)

버튼을 클릭하면 단락(p) 요소의 너비가 변경되는 간단한 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        color: #000;
        background: lightblue;
        height: 100vh;
    }
    p {
        border: 2px solid #fff;
        margin: 1.5rem auto;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
    }
</style>
</head>
<body>
<h1>DOM Style width Property Example</h1>
<p>
    This is paragraph 1 with some dummy text.
    This is paragraph 1 with some dummy text.
    This is paragraph 1 with some dummy text.
</p>
<button onclick="add()" class="btn">Change Width</button>
<script>
    function add() {
        document.querySelector('p').style.width = "50%";
    }
</script>
</body>
</html>

코드 설명

document.querySelector('p')를 통해 문서에서 첫 번째 단락 요소를 선택합니다.
버튼 클릭 시 add() 함수가 실행되어 해당 요소의 style.width 값이 50%로 변경됩니다.

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM 스타일 width 속성 완벽 정리 – 문법과 예제로 배우기

여기서 “Change Width” 버튼을 클릭하면 단락 요소의 너비가 화면의 50% 크기로 즉시 변경되는 것을 확인할 수 있습니다.

HTML DOM 스타일 width 속성 완벽 정리 – 문법과 예제로 배우기

정리

DOM의 style width 속성은 인라인 스타일 방식으로 요소의 너비를 읽고 쓸 수 있는 간편한 방법입니다. 반응형 레이아웃 조정, 애니메이션 효과 구현, 사용자 인터랙션에 따른 UI 변화 등 다양한 상황에서 유용하게 활용할 수 있습니다.