JavaScript로 img 요소를 생성하는 가장 좋은 방법은 무엇일까?

JavaScript에서 이미지(img) 요소를 동적으로 생성할 때, 크기를 지정하는 방법은 여러 가지가 있습니다. 상황에 맞는 방식을 선택하면 코드를 더 깔끔하게 유지할 수 있습니다.

1. setAttribute() 메서드 사용

DOM 표준 방식으로 속성을 직접 설정하고 싶다면 setAttribute()를 사용하는 것이 좋습니다.

myImg.setAttribute('width', '5px');

2. width 속성 직접 할당

HTMLImageElement 객체의 width 속성에 값을 바로 대입하는 방법도 가능합니다. 간결하고 가독성이 높아 많이 사용됩니다.

myImg.width = '5';

3. style 속성을 통한 CSS 지정

인라인 스타일로 크기를 제어해야 하는 경우에는 style.width를 활용합니다. CSS 단위(px 등)를 함께 명시해야 한다는 점에 유의하세요.

myImg.style.width = '5px';

4. Image 생성자로 너비와 높이를 한 번에 지정

배경 이미지나 미리 로딩할 이미지를 만들 때는 new Image() 생성자에 너비와 높이를 인자로 전달하는 방법이 편리합니다.

var myImg = new Image(5, 5);
myImg.src = 'https://www.example.com';

어떤 방법을 선택해야 할까?

일반적으로는 new Image() 생성자로 요소를 만들고, 속성 설정은 width나 style.width로 처리하는 조합이 가장 널리 쓰입니다. DOM 속성과 CSS 스타일의 차이를 이해하고 프로젝트의 요구 사항에 맞게 선택하는 것이 중요합니다.