자바스크립트로 크롬에서 이미지 표시하는 방법

안녕하세요! 크롬에서 자바스크립트를 사용하여 이미지를 표시하는 방법에 대해 알려드리겠습니다. 이 글은 초보자도 쉽게 이해할 수 있도록 작성되었으며, 여러 예제와 함께 제공되어 직접 실습해볼 수 있습니다.

1. 이미지 로딩하기

먼저, 자바스크립트를 사용하여 이미지를 로딩하는 방법부터 알아보겠습니다. 아래의 코드를 사용하면 이미지를 표시할 수 있습니다.

```javascript const image = document.createElement('img'); image.src = '이미지 URL'; document.body.appendChild(image); ```

위 코드에서 '이미지 URL'을 원하는 이미지의 경로로 변경해주세요. 자바스크립트로 이미지를 생성한 후, 이미지의 소스(`src`)를 설정하고, `appendChild`를 사용하여 페이지의 body에 추가합니다. 실행하면 이미지가 표시됩니다.

2. 이미지 크기 조절하기

이미지의 크기를 조절하려면 다음과 같이 스타일 속성을 사용하여 크기를 지정할 수 있습니다.

```javascript const image = document.createElement('img'); image.src = '이미지 URL'; image.style.width = '300px'; image.style.height = '200px'; document.body.appendChild(image); ```

위 코드에서 `width`와 `height` 속성에 원하는 크기를 설정하면 이미지의 크기가 조절됩니다. 이렇게 원하는 크기로 이미지를 조절할 수 있습니다.

3. 이미지 클릭 이벤트 처리하기

이미지에 클릭 이벤트를 추가하여 원하는 동작을 처리할 수도 있습니다. 아래의 코드를 사용하면 이미지를 클릭했을 때 해당 이미지의 URL이 출력되도록 할 수 있습니다.

```javascript const image = document.createElement('img'); image.src = '이미지 URL'; image.addEventListener('click', function () { console.log('이미지 URL:', image.src); }); document.body.appendChild(image); ```

위 코드에서 `addEventListener` 함수를 사용하여 이미지에 클릭 이벤트를 추가하고, 클릭 시 해당 이미지의 URL을 콘솔에 출력합니다. 이렇게 이미지에 다양한 이벤트를 추가하여 상호작용할 수 있습니다.

4. 여러 이미지 표시하기

마지막으로, 여러 이미지를 표시하는 방법을 알아보겠습니다. 아래의 코드를 사용하면 여러 개의 이미지를 간단하게 표시할 수 있습니다.

```javascript const images = [ '이미지 URL 1', '이미지 URL 2', '이미지 URL 3' ]; images.forEach(function (url) { const image = document.createElement('img'); image.src = url; document.body.appendChild(image); }); ```

위 코드에서 `images` 배열에 이미지들의 URL을 저장한 후, `forEach` 함수를 사용하여 배열의 각 요소마다 이미지를 생성하여 페이지에 표시합니다. 이렇게 배열에 여러 개의 이미지를 저장하고, 반복문을 통해 모두 표시할 수 있습니다.

이제 여러분은 자바스크립트를 사용하여 크롬에서 이미지를 표시하는 방법을 알게 되었습니다. 직접 코드를 작성하고 실행해보며 익혀보세요! 재미있는 결과물이 나올 것이라 확신합니다 🚀