HTML 에서 <pre> 태그는 미리 서식이 지정된 텍스트를 표시하는 데 사용됩니다. HTML 파일에 있는 그대로 웹 페이지에 정확하게 표시됩니다. 이 태그 내에서 사용된 공백은 작성된 대로 표시됩니다. <pre> 태그 사이에 작성된 텍스트는 고정 폭 글꼴로 표시됩니다. 특이한 서식이 필요한 경우 또는 컴퓨터 코드를 작성하려는 경우 <pre> 태그를 사용하는 것이 좋습니다.
이 Lab 에서는 <pre> 태그를 사용하여 웹 페이지에 미리 서식이 지정된 텍스트를 표시하는 방법을 배우게 됩니다.
참고:
index.html에서 코딩을 연습하고 Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스 (web service) 를 포트 8080 에서 실행하려면 오른쪽 하단 모서리에 있는 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
원하는 텍스트 편집기에서 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 속성을 사용하여 미리 서식이 지정된 텍스트 블록에서 한 줄이 가져야 하는 선호하는 문자 수를 설정하기 위해 <pre> 태그 사이에 다음 코드를 추가합니다.
<pre cols="20">
This text will be
displayed in a
fixed-width font
</pre>width 속성을 사용하여 미리 서식이 지정된 텍스트 블록에서 한 줄이 가져야 하는 선호하는 문자 수를 설정하기 위해 <pre> 태그 사이에 다음 코드를 추가합니다.
<pre width="20">
This text will be
displayed in a
fixed-width font
</pre>wrap 속성을 사용하여 텍스트가 다음 줄로 줄 바꿈되도록 지정하기 위해 <pre> 태그 사이에 다음 코드를 추가합니다.
<pre wrap="hard">
This text will wrap to the
next line in the
preformatted text block
</pre>미리 서식이 지정된 텍스트 블록에 컴퓨터 코드 조각을 표시하기 위해 <pre> 태그 사이에 다음 코드를 추가합니다.
<pre>
<html>
<head>
<title>Using the HTML Pre Tag</title>
</head>
<body>
<h1>Using the HTML Pre Tag</h1>
</body>
</html>
</pre>미리 서식이 지정된 텍스트 블록의 스타일을 지정하기 위해 <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 를 사용하여 미리 서식이 지정된 텍스트 블록의 스타일을 지정하는 방법을 배웠습니다.
