HTML DOM Kbd 객체 완벽 가이드 – 키보드 입력 요소 다루기

HTML DOM Kbd 객체란?

HTML DOM의 Kbd 객체는 HTML 문서 내의 <kbd> 요소를 나타냅니다. <kbd> 태그는 사용자의 키보드 입력을 정의하는 데 사용되며, 대부분의 브라우저에서는 기본적으로 고정폭(monospace) 글꼴로 표시되는 인라인(inline) 요소입니다.

Kbd 객체는 HTMLElement를 상속하므로 id, className, style 등 표준 DOM 속성과 메서드를 모두 사용할 수 있습니다.

문법(Syntax)

Kbd 객체를 다루는 기본 문법은 다음과 같습니다.

<kbd> 요소 새로 생성하기

var kbdObject = document.createElement("KBD");

기존 <kbd> 요소에 접근하기

var kbdObject = document.getElementById("myKbd");

예제

아래 예제에서는 사용자가 입력한 텍스트를 가져와 <kbd> 요소로 변환하여 화면에 출력하는 방법을 살펴볼 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<title>Kbd Object</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
<form>
<fieldset>
<legend>Kbd Object</legend>
<label for="textSelect">Keyboard Input: </label>
<input id="textSelect" type="text" placeholder="John Doe">
<input type="button" onclick="convertKBD()" value="Check">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var textSelect = document.getElementById("textSelect");
    function convertKBD() {
        var kbdObject = document.createElement("KBD");
        var kbdText = document.createTextNode(textSelect.value);
        kbdObject.appendChild(kbdText);
        divDisplay.appendChild(kbdObject);
    }
</script>
</body>
</html>

코드 설명

위 예제의 핵심 로직은 convertKBD() 함수에 있습니다.

먼저 document.createElement("KBD")를 호출하여 새로운 <kbd> 요소를 생성합니다. 그다음 createTextNode()로 입력 필드의 값을 텍스트 노드로 만들고, appendChild()를 통해 해당 텍스트를 <kbd> 요소의 자식으로 추가합니다. 마지막으로 완성된 <kbd> 요소를 결과를 표시할 div 영역에 추가하면, 입력된 텍스트가 고정폭 글꼴의 키보드 입력 스타일로 화면에 나타납니다.

실행 결과

이 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.

'Check' 버튼을 클릭하기 전 −

HTML DOM Kbd 객체 완벽 가이드 – 키보드 입력 요소 다루기

'Check' 버튼을 클릭한 후 −

HTML DOM Kbd 객체 완벽 가이드 – 키보드 입력 요소 다루기