HTML 키보드 입력

HTMLBeginner
지금 연습하기

소개

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> 태그 안에 중첩될 수 있습니다.