HTML <samp> 요소는 컴퓨터 프로그램 출력의 예시(혹은 인용문)를 나타냅니다. 보통 브라우저의 기본 고정폭 글씨체(보통 Courier, Lucida Console)를 사용해 렌더링합니다.
<p>I was trying to boot my computer, but I got this hilarious message:</p>
<p>
<samp>Keyboard not found <br />Press F1 to continue</samp>
</p>
samp {
font-weight: bold;
}
| 콘텐츠 카테고리 | 플로우 콘텐츠, 구문 콘텐츠, 뚜렷한 콘텐츠. |
|---|---|
| 가능한 콘텐츠 | 구문 콘텐츠. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는 것은 필수입니다. |
| 가능한 부모 요소 | 구문 콘텐츠를 허용하는 모든 요소. |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | `HTMLElement` |
특성
이 요소는 전역 특성만 포함합니다.
사용 일람
브라우저가 <samp> 요소에 사용하는 기본 글씨체는 CSS를 사용해 바꿀 수 있습니다. 그러나 브라우저의 사용자 설정값이 모든 CSS보다 우선할 수도 있습니다.
기본 글씨체를 덮어쓸 수 있는 CSS는 다음과 같은 형태입니다.
samp {
font-family: "Courier";
}
웹사이트나 앱의 JavaScript 코드 출력을 담을 컨테이너 요소가 필요하다면
<output>요소를 사용해야 합니다.
기본 예제
다음 간단한 예제는 문단이 프로그램 출력 예시를 포함하고 있습니다.
<p>
프로세스가 완료되면 유틸리티가
<samp>Scan complete. Found <em>N</em> results.</samp> 를 출력합니다. 출력을
확인한 후 다음 단계로 진행하세요.
</p>
결과는 다음과 같습니다.
사용자 입력을 포함한 출력 예시
<samp> 블록 안에 <kbd> 요소를 중첩해서 사용자가 입력하는 텍스트 예제를 나타낼 수 있습니다. 다음 예제 코드는 Linux 또는 macOS 콘솔 세션의 텍스트 복사본을 나타냅니다.
HTML
<pre>
<samp><span class="prompt">mike@interwebz:~$</span> <kbd>md5 -s "Hello world"</kbd>
MD5 ("Hello world") = 3e25960a79dbc69b674cd4ec67a72c62
<span class="prompt">mike@interwebz:~$</span> <span class="cursor">█</span></samp></pre>
<span>을 사용해 셸 프롬프트, 콘솔 커서 등 예제 텍스트의 특정 부분에 다른 스타일을 적용했습니다. 또, <kbd>를 사용해 사용자가 입력한 텍스트를 나타내고 있습니다.
CSS
원하는 외형을 얻을 수 있는 CSS는 다음과 같습니다.
.prompt {
color: #b00;
}
samp > kbd {
font-weight: bold;
}
.cursor {
color: #00b;
}
프롬프트와 커서에 강렬하지 않은 색을 입히고, 예제 텍스트의 입력 부분을 굵게 하는 단순한 코드입니다.
같이 보기
- 관련 요소:
<kbd>,<code>,<pre> - 스크립트로 생성한 출력을 담는
<output>요소