반응형
1. <pre> 태그 - 입력하는 그대로 화면에 표시하기
기본형 : <pre> 텍스트 </pre>
- HTML에서는 아무리 많은 공백(스페이스 바)을 넣어도 브라우저 창에는 한 개의 공백만 표시됩니다.
아래 <사진 1.1> 코드는 ABCD는 스페이스바를 한 번 입력했고 E와 F는 스페이스를 엄청 눌렀습니다.
|
1
2
3
4
5
6
7
8
9
10 |
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title><pre> 태그 사용</title>
</head>
<body>
A B C D E F
</body>
</html> |
cs |
<사진 1.1>
아래는 결과 화면입니다.
<사진 1.1 결과 화면>
많은 공백을 원했지만 웹 브라우저는 많은 공백을 무시하고 단 하나의 공백으로만 표현이 되었습니다. 이 문제를 해결하고자
<pre> 태그를 사용할 경우, 소스에 표시한 모든 공백이 웹 브라우저에 그대로 표시됩니다.
|
1
2
3
4
5
6
7
8
9
10 |
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title><pre> 태그 사용</title>
</head>
<body>
<pre>A B C D E F</pre>
</body>
</html> |
cs |
<사진 1.2>
<사진 1.1>에서 작성한 코드에서 <pre> 태그를 사용해봤습니다. 결과 화면은 아래와 같습니다.
<사진 1.2 결과 화면>
<pre> 태그를 사용하니 제가 원하던 공백이 모두 표현이 되었습니다.
반응형
'Web Basic > HTML5' 카테고리의 다른 글
| [HTML5] <q>태그 사용 방법 (0) | 2018.03.08 |
|---|---|
| [HTML5] <strong>태그, <b>태그 사용 방법 (0) | 2018.03.08 |
| [HTML5] <blockquote>태그 사용 방법 (0) | 2018.03.07 |
| [HTML5] <hr> 태그 사용 방법 (0) | 2018.03.05 |
| [HTML5] <br> 태그 사용 방법 (0) | 2018.03.05 |