HTML 미리 서식 지정 텍스트 마스터하기 - 웹 개발 튜토리얼

소개

HTML 에서 <pre> 태그는 미리 서식이 지정된 텍스트를 표시하는 데 사용됩니다. HTML 파일에 있는 그대로 웹 페이지에 정확하게 표시됩니다. 이 태그 내에서 사용된 공백은 작성된 대로 표시됩니다. <pre> 태그 사이에 작성된 텍스트는 고정 폭 글꼴로 표시됩니다. 특이한 서식이 필요한 경우 또는 컴퓨터 코드를 작성하려는 경우 <pre> 태그를 사용하는 것이 좋습니다.

이 Lab 에서는 <pre> 태그를 사용하여 웹 페이지에 미리 서식이 지정된 텍스트를 표시하는 방법을 배우게 됩니다.

참고: index.html에서 코딩을 연습하고 Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스 (web service) 를 포트 8080 에서 실행하려면 오른쪽 하단 모서리에 있는 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

HTML 파일 생성

원하는 텍스트 편집기에서 index.html 파일을 생성하고 다음 기본 HTML 코드를 추가합니다.

<!doctype html>
<html>
  <head>
    <title>Using the HTML Pre Tag</title>
  </head>
  <body>
    <h1>Using the HTML Pre Tag</h1>
  </body>
</html>

웹 페이지에 콘텐츠 추가

<pre> 태그를 사용하여 미리 서식이 지정된 텍스트 블록을 생성하기 위해 <body> 태그 사이에 다음 코드를 추가합니다.

<pre>
This text
will be
displayed
in a
fixed-width font
</pre>

cols 속성 사용

cols 속성을 사용하여 미리 서식이 지정된 텍스트 블록에서 한 줄이 가져야 하는 선호하는 문자 수를 설정하기 위해 <pre> 태그 사이에 다음 코드를 추가합니다.

<pre cols="20">
This text will be
displayed in a
fixed-width font
</pre>

width 속성 사용

width 속성을 사용하여 미리 서식이 지정된 텍스트 블록에서 한 줄이 가져야 하는 선호하는 문자 수를 설정하기 위해 <pre> 태그 사이에 다음 코드를 추가합니다.

<pre width="20">
This text will be
displayed in a
fixed-width font
</pre>

wrap 속성 사용

wrap 속성을 사용하여 텍스트가 다음 줄로 줄 바꿈되도록 지정하기 위해 <pre> 태그 사이에 다음 코드를 추가합니다.

<pre wrap="hard">
This text will wrap to the
next line in the
preformatted text block
</pre>

웹 페이지에 컴퓨터 코드 추가하기

미리 서식이 지정된 텍스트 블록에 컴퓨터 코드 조각을 표시하기 위해 <pre> 태그 사이에 다음 코드를 추가합니다.

<pre>
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Using the HTML Pre Tag&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Using the HTML Pre Tag&lt;/h1&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>

preformatted 텍스트 블록 스타일 지정

미리 서식이 지정된 텍스트 블록의 스타일을 지정하기 위해 <head> 태그 사이에 다음 CSS 코드를 추가합니다.

<style>
  pre {
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1em 0;
    border: 1px solid black;
    padding: 10px;
  }
</style>

index.html 파일에 적용된 변경 사항을 저장하고 웹 브라우저에서 열어 결과를 미리 봅니다.

요약

축하합니다! 랩을 성공적으로 완료했으며 웹 페이지에서 <pre> 태그를 사용하여 미리 서식이 지정된 텍스트를 표시하는 방법을 배웠습니다. cols 및 width 속성을 사용하여 미리 서식이 지정된 텍스트 블록에서 한 줄이 가져야 하는 원하는 문자 수를 설정하는 방법과 wrap 속성을 사용하여 텍스트가 다음 줄로 줄 바꿈되도록 지정하는 방법을 배웠습니다. 또한 미리 서식이 지정된 텍스트 블록에 컴퓨터 코드 조각을 추가하는 방법과 CSS 를 사용하여 미리 서식이 지정된 텍스트 블록의 스타일을 지정하는 방법을 배웠습니다.