DOM(Document Object Model)은 HTML, XML 문서의 프로그래밍 인터페이스로, 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 이를 조작할 수 있는 방법을 제공합니다. 이번 포스트에서는 JavaScript를 사용하여 DOM을 탐색하고 요소의 크기를 변경하는 방법에 대해 알아보겠습니다.

요소 크기 변경하기

요소의 크기를 변경하려면 querySelector나 getElementById 등을 사용하여 해당 요소에 접근해야 합니다. 그 후에 style 속성을 활용하여 width와 height 속성 값을 변경할 수 있습니다.

let element = document.querySelector('.target-element');
element.style.width = '200px';
element.style.height = '150px';

위의 코드에서는 querySelector를 사용하여 클래스 이름이 target-element인 요소를 선택하고, 선택된 요소의 style 속성을 이용하여 가로(width)는 200픽셀, 세로(height)는 150픽셀로 변경하는 예시를 보여줍니다.

요소의 크기 계산하기

요소의 크기를 동적으로 계산하려면 getBoundingClientRect 메서드를 사용할 수 있습니다. 이 메서드를 호출하면 요소의 크기와 위치에 관한 정보를 담은 객체를 반환합니다.

let element = document.querySelector('.target-element');
let rect = element.getBoundingClientRect();
console.log("Width: " + rect.width + "px, Height: " + rect.height + "px");

위 코드에서는 getBoundingClientRect를 사용하여 target-element 클래스를 가진 요소의 너비와 높이를 콘솔에 출력하는 예시를 보여줍니다.

결론

JavaScript를 사용하여 DOM을 탐색하고 요소의 크기를 변경하는 방법을 알아보았습니다. 이를 응용하면 웹 페이지의 동적인 UI를 구현하는 데 유용하게 활용할 수 있습니다. DOM 조작 기법은 웹 프론트엔드 개발에서 중요한 역할을 하는데, 효과적으로 활용하기 위해서는 DOM에 대한 심층적인 이해가 필요합니다.

이상으로 DOM을 탐색하여 요소의 크기를 변경하는 방법에 대해 알아보았습니다.

참고 자료: MDN Web Docs - DOM