HTML ononline 이벤트 속성 완벽 가이드

HTML ononline 이벤트 속성은 브라우저가 네트워크에 다시 연결되어 온라인 상태로 전환되는 순간 실행되는 이벤트 핸들러입니다. 사용자의 인터넷 연결이 끊겼다가 복원될 때 알림을 표시하거나, 동기화 작업을 자동으로 재개하는 등의 기능을 구현할 때 유용하게 활용됩니다.

ononline 이벤트 속성 문법

ononline 이벤트 속성의 기본 문법은 다음과 같습니다.

<tagname ononline="script"></tagname>

일반적으로 <body> 태그와 함께 사용되며, 짝을 이루는 onoffline 속성과 함께 활용하면 네트워크 상태 변화를 양방향으로 감지할 수 있습니다.

HTML ononline 이벤트 속성 예제

아래 예제는 ononline과 onoffline 이벤트를 함께 사용하여 네트워크 연결 상태가 변경될 때마다 경고창을 띄우는 코드입니다.

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
        text-align: center;
    }
    .show {
        font-size: 1.2rem;
        color: #fff;
    }
</style>
<body ononline="onlineFn()" onoffline="offlineFn()">
<h1>HTML onoffline/ononline Event Attribute Demo</h1>
<p style="color:#db133a;">네트워크를 비활성화/활성화해 보세요.</p>
<div class="show"></div>
<script>
    function onlineFn() {
        alert("Hey! You are online");
    }
    function offlineFn() {
        alert("Hey! You are offline");
    }
</script>
</body>
</html>

실행 결과

위 코드를 브라우저에서 실행하면 그라데이션 배경 화면과 함께 안내 문구가 표시됩니다.

HTML ononline 이벤트 속성 완벽 가이드

이제 네트워크를 비활성화했다가 다시 활성화해 보면, 각 상태 변화 시점에 onoffline/ononline 이벤트가 어떻게 작동하는지 확인할 수 있습니다.

HTML ononline 이벤트 속성 완벽 가이드

추가로 알아두면 좋은 정보

지원 브라우저: ononline/onoffline 이벤트는 Chrome, Firefox, Safari 등 주요 브라우저에서 지원되지만, 일부 모바일 환경에서는 동작 방식이 다를 수 있으므로 실무에서는 반드시 테스트를 권장합니다.
navigator.onLine 속성: JavaScript의 navigator.onLine 속성을 사용하면 페이지 로드 시점의 네트워크 연결 여부를 불리언 값(true/false)으로 즉시 확인할 수 있습니다.
addEventListener 방식: 인라인 속성 대신 window.addEventListener('online', 함수) 형태로도 동일한 기능을 구현할 수 있어, 코드 관리 측면에서 더 선호되기도 합니다.
활용 사례: 오프라인 상태에서 임시 저장한 데이터를 온라인 전환 시 서버로 자동 동기화하는 PWA(Progressive Web App) 개발에 널리 사용됩니다.