Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML 태그로 프로그램 출력 결과를 표시하는 방법

HTML <samp> 태그란?

<samp> 태그는 HTML의 구문(phrase) 태그 중 하나로, 컴퓨터 프로그램의 샘플 출력 결과를 나타낼 때 사용합니다. 예를 들어, 스크립트 실행 결과나 콘솔에 출력되는 메시지 등을 문서 안에서 보여줄 때 유용합니다.

대부분의 브라우저는 <samp> 요소를 고정폭(monospace) 글꼴로 렌더링하기 때문에, 일반 본문과 시각적으로 구분됩니다. 필요에 따라 CSS를 사용해 원하는 스타일로 변경할 수도 있습니다.

주요 특징

  • 프로그램이나 스크립트의 출력 예시를 의미론적으로(markup) 표현합니다.
  • 기본적으로 고정폭 글꼴로 표시되어 코드와 유사한 느낌을 줍니다.
  • 검색 엔진과 스크린 리더가 해당 부분을 '출력 결과'로 인식하도록 도와 접근성과 SEO에도 긍정적입니다.

사용 예제

다음은 HTML 문서에서 <samp> 태그를 사용하는 기본적인 방법입니다.

<html>
<head>
   <title>문서 제목</title>
</head>
<body>
<samp>
  <h2>HTML 문서</h2>
  <p>이것은 단락입니다.</p>
  <p>이것은 또 다른 단락입니다.</p>
</samp>
</body>
</html>

위 예제처럼 <samp> 태그로 감싼 내용은 브라우저에서 고정폭 글꼴로 표시되어, 실제 프로그램 출력 화면과 비슷하게 보여집니다.

관련 태그

<samp>와 함께 자주 사용되는 관련 태그도 알아두면 좋습니다.

  • <kbd>: 사용자가 입력한 키보드 입력을 나타냅니다.
  • <code>: 프로그래밍 코드 조각을 나타냅니다.
  • <var>: 수식이나 프로그램의 변수를 나타냅니다.

이 태그들을 적절히 조합하면 기술 문서나 개발 가이드에서 입력, 코드, 출력 결과를 명확하게 구분하여 전달할 수 있습니다.