HTML navigator.platform 속성이란?
HTML의 navigator.platform 속성은 현재 브라우저가 실행 중인 운영체제(컴파일된 플랫폼) 정보를 문자열로 반환합니다. 예를 들어 'Win32', 'MacIntel', 'Linux x86_64' 같은 값이 반환되며, 이를 활용하면 사용자 환경에 따라 다른 동작을 구현할 수 있습니다.
다만 참고로, 이 속성은 최신 웹 표준에서는 더 이상 권장되지 않는(deprecated) 기능입니다. 신뢰할 수 없는 값이 반환될 수 있으므로, 실무에서는 userAgentData 등 최신 API와 함께 사용하는 것이 좋습니다.
문법(Syntax)
navigator.platform 속성의 기본 문법은 다음과 같습니다.
navigator.platform
별도의 매개변수 없이 호출하며, 브라우저 플랫폼을 나타내는 문자열 값을 반환합니다.
예제 코드(Example)
아래는 navigator.platform 속성을 활용해 버튼 클릭 시 브라우저 플랫폼 정보를 화면에 출력하는 전체 예제입니다.
<!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 platform property Demo</h1>
<button class="btn" onclick="display()">Show Browser Platform</button>
<div class="show"></div>
<script>
function display() {
document.querySelector(".show").innerHTML = "Browser platform is: " + navigator.platform;
}
</script>
</body>
</html>코드 설명
- 버튼(.btn)을 클릭하면 display() 함수가 실행됩니다.
- 함수 내부에서 navigator.platform 값을 읽어옵니다.
- querySelector()를 통해 .show 요소를 찾아 플랫폼 정보를 innerHTML로 삽입해 화면에 표시합니다.
실행 결과(Output)
위 코드를 브라우저에서 실행하면 그라데이션 배경 위에 빨간색 버튼이 나타납니다.
[Show Browser Platform] 버튼을 클릭하면 아래와 같이 브라우저가 컴파일된 플랫폼 정보가 화면에 출력됩니다.
정리
navigator.platform 속성은 간단한 한 줄 코드로 사용자의 운영체제 정보를 확인할 수 있는 편리한 기능입니다. 하지만 deprecated 상태라는 점을 감안하여, 학습 목적이나 간단한 데모에는 유용하지만 프로덕션 환경에서는 보다 안정적인 대체 방안을 고려하는 것이 바람직합니다.