웹 페이지에 컴퓨터 코드나 프로그래밍 관련 내용을 표시해야 할 때, HTML은 이를 위한 다양한 전용 요소를 제공합니다. 각 요소는 용도가 다르므로 상황에 맞게 사용하는 것이 중요합니다. 지금부터 주요 요소들을 하나씩 살펴보겠습니다.
- <kbd>
- <pre>
- <code>
- <var>
- <samp>
HTML의 <kbd> 요소
<kbd> 태그는 키보드 입력을 정의할 때 사용합니다. 사용자에게 키보드로 입력하거나 누르길 원하는 키를 나타낼 때 유용합니다. 예를 들어 복사 단축키 Ctrl+C, 종료 키 Esc 등을 표시할 수 있습니다.
다음은 <kbd> 태그를 구현한 예제입니다.
예제
<!DOCTYPE html> <html> <body> <h2>단축키</h2> <p>아래 단축키를 사용하세요 −</p> <p><strong>잘라내기</strong> − <kbd>CTRL</kbd>+<KBD>X</kbd></p> <p><strong>복사</strong> − <kbd>CTRL</kbd>+<KBD>C</kbd></p> <p><strong>붙여넣기</strong> − <kbd>CTRL</kbd>+<KBD>V</kbd></p> <p><strong>실행 취소</strong> − <kbd>CTRL</kbd>+<KBD>Z</kbd></p> </body> </html>
실행 결과
HTML의 <pre> 요소
<pre> 태그는 미리 정의된(preformatted) 텍스트를 설정할 때 사용합니다. 이 태그 안의 텍스트는 공백과 줄바꿈이 그대로 유지되며, HTML 코드에 작성된 그대로 웹 페이지에 표시됩니다. 또한 고정폭(fixed-width) 글꼴로 출력되어 코드 블록을 보여줄 때 특히 유용합니다.
다음은 <pre> 태그를 구현한 예제입니다.
예제
<!DOCTYPE html> <html> <body> <h2>데모 제목</h2> <pre> 이것은 데모 텍스트입니다 작성된 그대로의 형식으로 화면에 나타납니다. pre 태그는 고정폭 글꼴로 텍스트를 표시하며, 공백과 줄바꿈을 모두 그대로 보존합니다. </pre> </body> </html>
실행 결과
HTML의 <code> 요소
<code> 태그는 HTML 문서에서 코드를 서식 있게 표현할 때 사용합니다. 예를 들어 Java나 C++ 같은 프로그래밍 코드를 문서에 작성하고 적절하게 포맷팅하고 싶다면 <code> 요소를 활용하면 됩니다.
다음은 HTML에서 <code> 요소를 구현한 예제입니다.
예제
<!DOCTYPE html> <html> <body> <h1>헤더 파일</h1> <h2>C++</h2> <code> #include <iostream> </code> <h2>C</h2> <code> #include <stdio> </code> </body> </html>
실행 결과
HTML의 <var> 요소
<var> 요소는 수학적 표현식이나 변수를 화면에 표시할 때 사용합니다. 계산 공식이나 방정식의 변수를 강조하고 싶을 때 유용합니다.
다음은 HTML에서 <var> 태그를 구현한 예제입니다.
예제
<!DOCTYPE html> <html> <body> <h2>수학 방정식</h2> 샘플 방정식 − <var>2x</var> - <var>2z</var> = <var>3y</var> + 9 </body> </html>
실행 결과
HTML의 <samp> 요소
<samp> 태그는 <em>, <code>, <strong> 등과 같은 구문(phrase) 태그의 하나로, HTML 문서에서 텍스트를 서식화하는 데 사용됩니다. 주로 프로그램이나 시스템이 출력한 샘플 결과를 나타낼 때 활용됩니다.
다음은 <samp> 요소를 구현한 예제입니다.
예제
<!DOCTYPE html> <html> <body> <h2>시험 결과</h2> <p><s>결과는 6월 6일에 발표될 예정입니다.</s></p> <samp>성적 발표일이 6월 7일로 변경되었습니다.</samp> </body> </html>
실행 결과
