HTML에서 특정 요소의 로딩이 완료되었을 때 스크립트를 실행하려면 onload 속성을 사용하면 됩니다. 이 속성은 페이지나 이미지 등의 요소가 완전히 불러와진 시점에 지정한 자바스크립트 함수를 자동으로 호출해 줍니다.
onload 속성이란?
onload 속성은 주로 <body> 태그에 사용되어 웹페이지 전체의 로딩이 끝난 후 특정 동작을 수행하도록 합니다. 예를 들어 환영 메시지를 표시하거나, 초기 데이터를 설정하는 작업에 활용할 수 있습니다.
예제 코드
아래 코드는 body 요소의 로딩이 완료되면 display() 함수를 호출하여 알림 창을 띄우는 예제입니다. 직접 실행해 보면서 onload 속성의 동작을 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<script>
function display() {
alert("Welcome!");
}
</script>
</head>
<body onload = "display()">
<h3>웹사이트에 오신 것을 환영합니다.</h3>
<p>다양한 학습 콘텐츠를 제공합니다.</p>
</body>
</html>실행 결과
위 코드를 브라우저에서 열면 페이지 로딩이 완료되는 순간 "Welcome!"이라는 문구가 담긴 알림 창이 나타납니다. 이처럼 onload 속성을 활용하면 요소 로딩 완료 시점에 원하는 스크립트를 간편하게 실행할 수 있습니다.