HTML <pre> 태그, 코드와 서식 있는 텍스트 표시하기
HTML의 <pre> 태그는 공백과 줄바꿈을 포함하여 텍스트를 그대로 표시하는 데 사용됩니다. 이는 코드 블록, 시 또는 다른 형태의 서식 있는 텍스트를 표시하는 데 유용합니다. 이번 글에서는 <pre> 태그의 기본 사용법과 실제 활용 예제를 통해 그 기능을 상세히 살펴보겠습니다.
1. <pre> 태그란?
<pre> 태그는 "preformatted text"의 약자로, HTML 문서에서 텍스트를 원래의 서식 그대로 표시하기 위해 사용됩니다. 이 태그 안에 있는 텍스트는 HTML에서 무시되는 공백, 줄바꿈, 탭 등을 포함하여 그대로 브라우저에 나타납니다.
2. 기본 사용법
<pre> 태그의 기본적인 사용법은 간단합니다. 이 태그 안에 텍스트를 작성하면 됩니다:
<pre>
이 텍스트는
공백과
줄바꿈이
그대로 표시됩니다.
</pre>위 코드는 다음과 같이 브라우저에 표시됩니다:
이 텍스트는
공백과
줄바꿈이
그대로 표시됩니다.
3. 코드 블록 표시
<pre> 태그는 코드 블록을 표시할 때 유용합니다. HTML, CSS, JavaScript 등 프로그래밍 언어의 코드를 읽기 쉽게 보여줄 수 있습니다:
<pre>
<html>
<head>
<title>예제</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
</pre>위 코드는 다음과 같이 브라우저에 표시됩니다:
<html>
<head>
<title>예제</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
4. 서식 있는 텍스트 표시
<pre> 태그는 코드 블록뿐만 아니라 서식이 중요한 텍스트를 표시하는 데도 유용합니다. 예를 들어, 시나 ASCII 아트를 사용할 때는 공백과 줄바꿈을 정확히 유지하는 것이 중요합니다. <pre> 태그를 사용하면 원본 텍스트의 서식을 그대로 유지할 수 있습니다.
다음은 시의 예시입니다:
Roses are red,
Violets are blue,
This poem is in
a <pre> tag too.
위의 예시는 <pre> 태그를 사용하지 않고는 원래의 서식을 유지하기 어려웠을 것입니다.
또 다른 예로 ASCII 아트를 들 수 있습니다:
_____
/ \
| () () |
\ ^ /
|||||
|||||
ASCII 아트는 공백과 문자 간격이 중요하므로, <pre> 태그를 사용하여 정확한 모양을 유지할 수 있습니다.
마지막으로, 소스 코드 예시를 들어보겠습니다. 예를 들어, Python 코드를 다음과 같이 표시할 수 있습니다:
def greet(name):
print(f"Hello, {name}!")
greet("World")
이처럼 <pre> 태그는 서식이 중요한 텍스트를 그대로 표시하는 데 매우 유용하며, 다양한 상황에서 활용할 수 있습니다.
5. <pre> 태그의 스타일링
<pre> 태그는 기본적으로 고정폭 글꼴을 사용하지만, CSS를 사용하여 스타일을 변경할 수 있습니다. 예를 들어, 배경색과 글꼴 색상을 변경할 수 있습니다:
<style>
pre {
background-color: #f4f4f4;
color: #333;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
</style>
<pre>
여기에는 스타일이 적용된 텍스트가 있습니다.
</pre>위 코드는 다음과 같이 브라우저에 표시됩니다:
여기에는 스타일이 적용된 텍스트가 있습니다.
6. 결론
<pre> 태그는 텍스트의 서식을 유지한 채로 표시해야 할 때 매우 유용한 도구입니다. 코드 블록, 시, 또는 서식이 중요한 텍스트를 표시할 때 사용하면 좋습니다. 또한, CSS를 활용하여 <pre> 태그의 스타일을 조정함으로써 가독성을 높일 수 있습니다. 이번 글을 통해 <pre> 태그의 활용법을 익히고, 다양한 실전 예제를 통해 적용해 보세요.
'마크업 언어 > HTML' 카테고리의 다른 글
| HTML <ol> 태그, 순서 있는 목록 만들기 (0) | 2024.07.25 |
|---|---|
| HTML <blockquote> 태그로 웹 페이지 인용문 표현하기 (0) | 2024.07.24 |
| HTML 텍스트 태그 <p>, <br>, <hr> 이해와 실전 사용 (0) | 2024.07.22 |
| HTML 헤딩 태그 <h1>부터 <h6>까지, 웹 페이지 제목과 섹션 구성하기 (0) | 2024.07.21 |
| HTML <main> 태그로 주요 콘텐츠 섹션 구성하기 (0) | 2024.07.20 |
