HTML에서 미리 형식이 지정된 텍스트(Preformatted Text)를 만드는 방법

미리 형식이 지정된 텍스트란?

HTML에서 미리 형식이 지정된(preformatted) 텍스트란, 소스 코드 안에 작성된 공백과 줄바꿈이 브라우저에서 그대로 유지되어 화면에 출력되는 텍스트를 의미합니다. 일반적으로 HTML은 연속된 공백이나 줄바꿈을 하나의 공백으로 처리하지만, 형식이 지정된 텍스트는 원본 그대로 표시됩니다.

과거에는 <xmp> 태그를 사용하여 이러한 텍스트를 손쉽게 만들 수 있었습니다.

참고: <xmp> 태그는 현재 공식적으로 폐기(deprecated)된 요소이므로, 최신 웹 개발에서는 사용하지 않는 것이 좋습니다. 대신 <pre> 태그를 사용하는 것이 표준적인 방법입니다.

<xmp> 태그 사용 예제

다음 코드를 실행하면 <xmp> 태그가 어떻게 동작하는지 직접 확인할 수 있습니다.

<!DOCTYPE html>
<html>
   <head>
      <title>HTML xmp Tag</title>
   </head>
   <body>
      HTML tags include
      <xmp><b> for bold text</b>, <i> for italic text.</i></xmp>
   </body>
</html>

<xmp> 태그 내부에 작성된 HTML 태그는 해석되지 않고 입력한 그대로 화면에 출력됩니다. 위 예제에서는 굵게 표시하는 <b> 태그와 기울임꼴을 적용하는 <i> 태그가 실제 서식으로 적용되지 않고, 태그 자체가 텍스트로 보여지는 것을 확인할 수 있습니다.

권장 대안: <pre> 태그 사용하기

현재 HTML 표준에서는 <pre> 태그가 미리 형식이 지정된 텍스트를 표현하는 올바른 방법입니다. 다만 <pre> 태그 내부에서 HTML 태그를 문자 그대로 보여주려면 <, >처럼 특수문자를 엔티티(entity)로 변환해야 합니다.

<!DOCTYPE html>
<html>
   <head>
      <title>HTML pre Tag</title>
   </head>
   <body>
      <pre>
function greet() {
    console.log("Hello, World!");
}
      </pre>
   </body>
</html>

정리

<xmp> 태그는 내부의 HTML 태그를 그대로 텍스트로 출력했지만, 현재는 폐기된 상태입니다.
미리 형식이 지정된 텍스트를 만들 때는 <pre> 태그를 사용하는 것이 표준입니다.
코드나 마크업을 화면에 보여줄 때는 특수문자(<, >)를 HTML 엔티티로 변환해 주어야 합니다.