samp element - by. UXKM

요약 설명

<samp> 요소는 컴퓨터 시스템의 출력 결과(sample output)를 나타내는 시맨틱 태그로, 사용자에게 보여지는 콘솔 출력, 에러 메시지, 시스템 응답 등과 같은 텍스트를 표현할 때 사용됩니다.
일반적으로 고정폭 글꼴로 렌더링되며, <code>, <kbd>, <pre> 등과 함께 사용되어 사용자와 시스템 간의 상호작용을 명확하게 구분해주는 역할을 합니다. 코드 설명이나 명령줄 예제에서 시스템의 응답을 구분할 때 유용합니다.

주요 역할 및 특징

  1. 프로그램 출력 텍스트 표현
    • <samp>는 프로그램이나 시스템이 생성한 텍스트를 표시하는 데 적합합니다.
    • 예: 콘솔 출력, 오류 메시지, 시스템 로그 등.
  2. 고정폭 글꼴 사용

    브라우저에서 고정폭 글꼴(예: Monospace)로 렌더링되어 출력의 가독성과 구성을 명확히 합니다.

  3. 의미론적 역할

    <samp>는 단순한 텍스트 강조가 아닌, 출력 결과를 의미론적으로 명확히 표현합니다.

  4. 다른 요소와의 조합

    <pre>와 함께 사용하여 줄바꿈과 공백을 유지하면서 긴 출력 결과를 표시할 수 있습니다.

CSS 기본 값

<samp> 요소는 기본적으로 인라인 레벨 요소이며, 별도의 CSS를 지정하지 않아도 아래와 같은 기본값이 적용됩니다.

기본 문법

속성

<samp> 요소는 고유 속성을 가지지 않으며, 글로벌 속성(class, id, style, aria-*, data-* 등)만 사용할 수 있습니다.

예제

상황별 예제

긴 출력 예제

CSS로 스타일링된 샘플 출력

접근성을 고려한 샘플 출력

주의사항

  • <samp>는 반드시 프로그램 출력이나 시스템 메시지와 같은 내용을 표현할 때만 사용해야 하며, 단순한 스타일링 목적으로 사용해서는 안 됩니다.
  • 줄바꿈과 공백을 유지해야 하는 긴 출력 결과는 <pre>와 함께 사용하는 것이 적합합니다.