코드랩 레퍼런스

<kbd> 본문

HTML

<kbd>

webstoryboy 2016. 6. 3. 16:56
<kbd> 태그는 키보드 입력을 정의합니다.
특징 설명
콘텐츠 카테고리 Flow content, Phrasing content, Palpable content.
콘텐츠 속성 Global Attributes, Event Attributes
콘텐츠 요소 Inline Element
닫는 태그 Closing (<kbd>~</kbd>)
시각적 표현 monotype 폰트로 표현
버전 HTML4

Definition

  • <kbd> 태그는 키보드 입력을 정의합니다.
  • <kbd> 태그는 시각적으로 브라우저 기본 폰트 monospace으로 표현됩니다.

Compare

  • 컴퓨터 소스 코드를 사용한다면 <code> 태그를 사용합니다.
  • 수학적인 변수나 프로그램의 변수를 나타낼 대는 <var> 태그를 사용합니다.
  • 컴퓨터 프로그램으로 출력된 결과물은 <samp> 태그를 사용합니다.
  • 사용자가 컴퓨터에 입력하는 문자는 <kbd> 태그를 사용합니다.

Compatibility

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 안드로이드 아이콘 ios 아이콘 익스플로러6 아이콘 6 익스플로러7 아이콘 7 익스플로러8 아이콘 8 익스플로러9 아이콘 9 익스플로러10 아이콘 10 익스플로러11 아이콘 11 엣지 아이콘
<kbd>

Sample

Kbd 태그

$("a[href^='#']").on("click",function(e){
    var target = $($(this).attr("href"));
    if(target.length){
        $("html, body").animate({ scrollTop:target.offset().top },400);
    }
});    
  • target의 값은 #content입니다.
  • #으로 시작하는 a 링크를 클릭하면 클릭한 대상의 주소는 변수 target에 할당됩니다.
  • 사용자는 Shift+F12를 눌러서 결과를 확인합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>kbd</title>
</head>
<body>
    <div class="code">
        <pre><code>
		$("a[href^='#']").on("click",function(e){
			var target = $($(this).attr("href"));
			if(target.length){
				$("html, body").animate({ scrollTop:target.offset().top },400);
			}
		});    
        </code></pre>
    </div>
    <div>
        <ul>
			<li>target의 값은 <samp>#content</samp>입니다.</li>
			<li>#으로 시작하는 a 링크를 클릭하면 클릭한 대상의 주소는 변수 <var>target</var>에 할당됩니다.</li>
			<li>사용자는 <kbd><kbd>Shift</kbd>+<kbd>F12</kbd></kbd>를 눌러서 결과를 확인합니다.</li>
        </ul>
    </div>
</body>
</html>

Ad

Comments