소개
HTML <kbd> 태그는 웹 페이지에서 사용자를 위한 키보드 입력 요소를 생성하는 데 사용됩니다. 이 태그는 키보드, 음성 입력 또는 키보드를 통한 기타 텍스트 입력 형식의 입력을 나타내는 인라인 텍스트 범위를 나타냅니다.
이 Lab 에서는 HTML kbd 태그를 사용하여 웹 페이지에 키보드 입력 요소를 만드는 방법을 배우게 됩니다.
참고:
index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단 모서리에 있는 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
HTML 파일 설정
index.html이라는 새 HTML 파일을 생성하고 HTML 문서의 기본 구조를 설정합니다.
다음 코드를 index.html 파일에 추가하여 문서 구조를 설정합니다.
<!doctype html>
<html>
<head>
<title>HTML kbd 태그를 사용한 키보드 입력 요소</title>
</head>
<body>
<!-- 여기에 콘텐츠 추가 -->
</body>
</html>
태그를 사용하여 키보드 입력 요소 추가
웹 페이지에서 키보드 입력 요소를 나타내려는 모든 위치에 <kbd> 태그를 사용하여 키보드 입력 요소를 추가합니다.
"CTRL + V" 명령에 대한 <kbd> 태그를 사용하여 키보드 입력 요소를 정의하려면 다음 코드를 <body> 태그 안에 추가합니다.
<p>텍스트를 붙여넣으려면 <kbd>Ctrl</kbd> + <kbd>V</kbd>를 누르세요.</p>
이제 "Shift + Enter" 명령에 대한 <kbd> 태그를 사용하여 키보드 입력 요소를 정의하려면 다음 코드를 <body> 태그 안에 추가합니다.
<p>새 줄을 만들려면 <kbd>Shift</kbd> + <kbd>Enter</kbd>를 누르세요.</p>
태그 안에 태그 중첩
입력이 시스템에 의해 사용자에게 응답되었음을 지정하려면 <kbd> 태그를 <samp> 태그 안에 중첩할 수 있습니다.
시스템에 의해 응답된 입력을 지정하기 위해 <kbd> 태그를 <samp> 태그 안에 중첩하려면 다음 코드를 <body> 태그 안에 추가합니다.
<p>
입력된 값은:<samp><kbd>Enter Value</kbd>:</samp>
</p>
요약
이 랩에서는 HTML <kbd> 태그를 사용하여 웹 페이지에서 키보드 입력 요소를 만드는 방법을 배웠습니다. 웹 페이지에서 키보드 입력 요소를 나타내려는 모든 위치에서 이 태그를 사용할 수 있습니다. <kbd> 태그는 시스템에 의해 사용자에게 다시 응답된 입력을 지정하기 위해 <samp> 태그 안에 중첩될 수 있습니다.
