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

HTML에서 미리 서식이 지정된 텍스트를 추가하는 방법

HTML <pre> 태그란?

HTML에서 미리 서식이 지정된(preformatted) 텍스트를 추가하려면 <pre> 태그를 사용합니다. HTML의 <pre> 태그는 원본 텍스트의 형식을 그대로 유지해야 하는 내용을 나타낼 때 사용되며, 소스 코드를 마크업할 때는 <code> 태그가 해당 코드를 감싸는 역할을 합니다.

브라우저는 일반적으로 <pre> 태그로 감싸진 텍스트를 고정폭(fixed-pitch) 글꼴로 렌더링합니다. 이때 공백과 줄바꿈이 그대로 유지되며, 화면 너비에 맞춘 자동 줄바꿈(word wrap)도 적용되지 않습니다.

이러한 특성 덕분에 <pre> 태그는 소스 코드 출력, ASCII 아트, 시처럼 줄바꿈이 중요한 텍스트를 표현하는 데 매우 유용합니다.

예제

다음 코드를 직접 실행해 보면 <pre> 태그의 동작 방식을 쉽게 확인할 수 있습니다.

<!DOCTYPE html>
<html>
    <head>
       <title>HTML pre Tag</title>
    </head>
    <body>
       <pre>
          This text is
          in a fixed-pitch
          font, and it preserves
          both spaces and line breaks
       </pre>
    </body>
</html>