HTML navigator appName 속성 – 브라우저 이름 확인하는 방법

HTML navigator appName 속성이란?

HTML에서 navigator 객체의 appName 속성은 현재 실행 중인 웹 브라우저의 이름을 문자열로 반환합니다. 이 속성은 읽기 전용(read-only)이며, 브라우저 환경 정보를 제공하는 Navigator 인터페이스에 포함되어 있습니다.

참고: 호환성 유지를 위해 최신 브라우저(Chrome, Edge, Firefox 등)는 대부분 "Netscape"라는 동일한 값을 반환합니다. 따라서 실제 브라우저를 정확하게 판별하려면 navigator.userAgent 속성을 함께 활용하는 것이 좋습니다.

구문(Syntax)

appName 속성의 기본 구문은 다음과 같습니다.

navigator.appName

예제(Example)

버튼을 클릭하면 현재 브라우저의 이름이 화면에 표시되는 간단한 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
        text-align: center;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 20px;
        width: 330px;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin: 1rem auto;
    }
    .show {
        font-size: 1.5rem;
        color: #fff;
    }
</style>
<body>
<h1>HTML navigator appName property Demo</h1>
<button class="btn" onclick="display()">Show Browser Name</button>
<div class="show"></div>
<script>
    function display() {
        document.querySelector(".show").innerHTML = "Browser Name: " + navigator.appName;
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 초기 화면이 나타납니다.

HTML navigator appName 속성 – 브라우저 이름 확인하는 방법

"Show Browser Name" 버튼을 클릭하면 현재 사용 중인 브라우저의 이름이 화면에 출력됩니다.

HTML navigator appName 속성 – 브라우저 이름 확인하는 방법

이처럼 navigator.appName 속성을 활용하면 자바스크립트만으로 간단하게 브라우저 이름 정보를 가져올 수 있습니다.