thinkNote

■ 요약

▶ <kbd> 요소는 키보드 입력을 정의한다.

▶ <samp> 요소는 컴퓨터 프로그램의 샘플 출력을 정의한다.

▶ <code> 요소는 컴퓨터 코드 조각을 정의한다.

▶ <var> 요소는 프로그래밍 또는 수학 표현식에서 변수을 정의한다.

▶ <pre> 요소는 미리 서식이 지정된 텍스트를 정의한다.

▶ HTML은 사용자 입력 및 컴퓨터 코드를 정의하기 위한 여러 요소가 포함되어 있다.

<code>
x = 5;
y = 6;
z = x + y;
</code>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_formatting_intro3 

■ HTML 키워드 입력을 위한 <kdb> 

▶ HTML <kbd> 요소는 키보드 입력을 정의하는 데 사용된다.

▶ 내부 콘텐츠는 Browser의 기본 모노스페이스 글꼴로 표시된다.

<p>Save the document by pressing <kbd>Ctrl + S</kbd></p>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_formatting_kbd 

■ HTML 프로그램 출력을 위한 <samp> 

▶ HTML <samp> 요소는 컴퓨터 프로그램의 샘플 출력을 정의하는 데 사용된다.

▶ 내부 콘텐츠는 Browser의 기본 모노스페이스 글꼴로 표시된다.

<p>Message from my computer:</p>
<p><samp>File not found.<br>Press F1 to continue</samp></p>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_formatting_samp 

■ HTML 컴퓨터 코드를 위한 <code>

▶ HTML <code> 요소는 컴퓨터 코드 조각을 정의하는데 사용된다.

▶ 내부 콘텐츠는 Browser의 기본 모노스페이스 글꼴로 표시된다.

<code>
x = 5;
y = 6;
z = x + y;
</code>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_formatting_code 

▶ <code> 요소는 추가 공백과 줄 바꿈을 유지하지 않는다.

▶ 위 문제를 해결하려면 <code> 요소 안에 <pre> 요소를 넣을 수 있다.

<pre>
<code>
x = 5;
y = 6;
z = x + y;
</code>
</pre>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_formatting_codepre 

■ HTML 변수를 위한 <var>

▶ HTML <var> 요소는 프로그래밍 또는 수학적 표현에서 변수를 정의하는 데 사용된다.

▶ 내부 콘텐츠는 일반적으로 기울임 글꼴로 표시된다.

<p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>, where <var>b</var> is the base, and <var>h</var> is the vertical height.</p>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_formatting_var 

출처 : https://www.w3schools.com/html/html_computercode_elements.asp