<samp> 태그의 정의 및 사용법

<samp> 태그는
다른 프로그램 또는 컴퓨팅 시스템의 샘플(sample) 출력이나 인용된 출력을 나타냅니다.

주로 컴퓨터가 생성하는 출력 내용에 대한 샘플을 나타내거나,
시스템 메시지나 이전에 실행된 프로그램의 결과를 인용하는 데 적합합니다.

<samp> 태그는 프로그램이나 시스템에서 실행되는 샘플이나 결과의 인용을 나타냅니다. 실제적인 결과를 나타내지 않습니다.

<output> 태그는 웹 애플리케이션이 수행한 계산 결과나, 사용자의 웹 양식 관련 컨트롤을 통한 다양한 상호작용의 결과에 대한 출력을 나타낸다는 점에서 대조적입니다.

기본 예제

다음은 <samp> 태그의 사용 예제입니다.

컴퓨팅 시스템의 샘플 출력

이 예제에서는 프로그램에서 발생한 오류 메시지를 표시하는 상황을 나타냅니다.

HTML 
<p>다음은 컴파일러가 반환한 샘플 오류 메시지입니다.</p>
<samp><em>error:</em> expected ';' before 'return'</samp>
실제 적용된 모습

<samp> 태그는 대부분의 브라우저에서 기본적으로 글꼴(font-family 속성)이 고정폭(monospace) 글꼴로 텍스트를 표시합니다.

인용된 출력

외부 프로그램 또는 컴퓨팅 시스템이 반환한 출력 결과를 인용하여 표시하는 상황을 나타냅니다.
다음의 예제는 사용자가 웹 서버로부터 받은 응답 메시지를 인용하는 상황입니다.

HTML 
<p>
    서버로부터 받은 응답 메시지는
    <samp>HTTP/1.1 404 Not Found</samp>를 출력합니다.
</p>
실제 적용된 모습

다른 태그와 함께 사용하는 예제

<samp> 태그는 다른 HTML 태그들과 함께 사용되어 출력 결과를 더욱 명확하게 표현할 수 있습니다.

아래 예제에서는 <samp> 태그와 <kbd>, <code>, <pre> 등의 태그를 조합하여 입력과 출력, 또는 특정 부분을 나타내는 방법을 보여줍니다. 각각의 예제는 CSS로 스타일을 추가했습니다.

셸 프롬프트 출력 예제

CSS 
samp kbd {
    font-weight: bold;
}
.prompt {
  color: brown;
}
.cursor {
    color: blue;
    font-weight: bold;
}
HTML 
<pre><samp><span class="prompt">user@localhost:~$</span> <kbd>echo Hello, World!</kbd>
Hello, World!

<span class="prompt">user@localhost:~$</span> <span class="cursor">_</span></samp></pre>

코드 부연설명
<pre> 태그는 작성한 서식을 유지한 텍스트 블록을 나타낼때 사용합니다.
즉, 이 태그를 사용하면 들여쓰기, 줄바꿈, 공백 등 작성한 그대로의 원본 서식이 브라우저에 표시됩니다.

코드 부연설명
<span> 태그는 자체적으로 특별한 의미가 전혀 없는 인라인 컨테이너로, 단순 텍스트나 인라인 콘텐츠 등에 스타일이나 속성, 스크립트를 위한 범위를 위해 감싸주는 태그입니다.

실제 적용된 모습

웹 콘솔 출력 예제

CSS 
.language-javascript {
    color: blue;
}
samp {
    color: green;
}
HTML 
<pre>
<code class="language-javascript">console.log(5 + 10);</code>
<samp>15</samp>
</pre>

코드 부연설명
<pre> 태그는 작성한 서식을 유지한 텍스트 블록을 나타낼때 사용합니다.
즉, 이 태그를 사용하면 들여쓰기, 줄바꿈, 공백 등 작성한 그대로의 원본 서식이 브라우저에 표시됩니다.

코드 부연설명
<code> 태그는 컴퓨터 코드의 일부를 나타냅니다.
코드 스니펫, HTML 태그, CSS 속성, 명령어, 함수 이름, 문법 등에 사용됩니다.

실제 적용된 모습

브라우저 호환성

samp 태그의 브라우저 호환성
태그
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<samp> 1 12 1 4

명세서

samp 태그의 명세서 사양
명세서 사양
<samp> HTML Standard
#the-samp-element

참고문헌

같이 보기