HTML의 navigator.appVersion 속성은 사용자가 현재 사용 중인 웹 브라우저의 버전 정보를 문자열 형태로 반환합니다. 이 속성은 Navigator 객체에 속해 있으며, 브라우저의 버전뿐만 아니라 운영 체제 관련 정보까지 함께 제공하여 브라우저 환경을 파악하는 데 유용하게 활용됩니다.
문법(Syntax)
appVersion 속성의 기본적인 사용 문법은 다음과 같습니다.
navigator.appVersion
예제(Example)
아래 예제는 버튼을 클릭하면 navigator.appVersion 속성을 통해 브라우저의 버전 정보를 가져와 화면에 출력하는 방법을 보여줍니다.
<!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 appVersion property Demo</h1>
<button class="btn" onclick="display()">Show Browser Version Information</button>
<div class="show"></div>
<script>
function display() {
document.querySelector(".show").innerHTML = "<p>Browser Version Information:</p>" + "<p>" + navigator.appVersion + "</p>";
}
</script>
</body>
</html>
실행 결과(Output)
페이지에서 “Show Browser Version Information”(브라우저 버전 정보 표시) 버튼을 클릭하면, 현재 브라우저의 버전 정보가 아래와 같이 화면에 표시됩니다.
참고 사항
appVersion 속성은 오랫동안 사용되어 온 레거시(legacy) API입니다. 최신 웹 개발에서는 보다 상세하고 정확한 브라우저 정보를 얻기 위해 navigator.userAgent 속성을 함께 활용하는 것이 권장되며, 브라우저별 호환성 문제를 피하려면 사용자 에이전트 문자열에 의존하기보다 기능 탐지(feature detection) 방식을 사용하는 것이 좋습니다.