HTML navigator.product 속성 – 브라우저 엔진 이름 확인 방법

HTML의 navigator.product 속성은 현재 사용 중인 브라우저의 엔진(engine) 이름을 문자열로 반환합니다. 참고로 최신 브라우저에서는 호환성 유지를 위해 이 속성이 대부분 "Gecko"라는 고정 값을 반환합니다.

문법(Syntax)

navigator.product 속성의 기본 문법은 다음과 같습니다.

navigator.product

아래 예제를 통해 navigator.product 속성이 실제로 어떻게 동작하는지 살펴보겠습니다.

예제(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.2rem;
        color: #fff;
    }
</style>
<body>
<h1>HTML navigator product property Demo</h1>
<button class="btn" onclick="display()">Show Browser Engine Name</button>
<div class="show"></div>
<script>
    function display() {
        document.querySelector(".show").innerHTML = "Browser engine name is: " + navigator.product;
    }
</script>
</body>
</html>

실행 결과(Output)

HTML navigator.product 속성 – 브라우저 엔진 이름 확인 방법

위 코드를 실행하면 화면에 "Show Browser Engine Name"(브라우저 엔진 이름 보기) 버튼이 표시됩니다. 이 버튼을 클릭하면 아래와 같이 브라우저의 엔진 이름이 출력됩니다.

HTML navigator.product 속성 – 브라우저 엔진 이름 확인 방법

버튼 클릭 시 자바스크립트의 navigator.product 값이 읽혀져 화면에 표시되며, 대부분의 브라우저 환경에서 "Gecko"가 출력되는 것을 확인할 수 있습니다.