HTML5, Pre 태그 알아 보기
- HTML/HTML 기초
- 2020. 8. 2.
<Pre> 태그는 HTML 소스 안에 표현한 문자 형태 그대로를 표현할 때 쓰입니다. 문자 그대로를 표현한다고 해서 Pre태그 안에 다른 태그를 사용하지 못하는 것은 아닙니다.
프리 태그의 가장 큰 특징은 프리 태그 안에서는 띄어쓰기나 줄 바꿈을 할 경우에 별도의 태그가 필요하지 않다는 점입니다.
예를 들어 위의 문장을 프리태그에 넣고 줄 바꿈이나 스페이스를 여러 번 넣었다고 가정해 보면 아래와 같습니다.
<Pre>프리태그의
가장 큰 특징은
프리태그안에서는
띄어쓰기나 줄 바꿈을 할 경우에
별도의
태그가 필요하지 않다는 점 입니다. </Pre>
만약 위의 문장과 같은 줄바꿈과 스페이스가 있는 문장을 프리 태그 없이 넣는 다면 어떻게 보일까요?
아래처럼 줄바꿈이나 스페이스가 모두 무시되어 표시되게 됩니다.
프리 태그의 가장 큰 특징은 프리 태그 안에서는 띄어쓰기나 줄 바꿈을 할 경우에 별도의 태그가 필요하지 않다는 점입니다.
프리 태그를 넣는 경우에는 아래와 같이 보이게 됩니다.
프리태그의 가장 큰 특징은 프리태그안에서는 띄어쓰기나 줄 바꿈을 할 경우에 별도의 태그가 필요하지 않다는 점 입니다.
하나의 완전한 페이지를 예를 들어 아래와 같이 pre 태그를 넣어 코딩했다고 가정해 보기로 하겠습니다.
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
<Pre>프리태그의
가장 큰 특징은
프리태그안에서는
띄어쓰기나 줄 바꿈을 할 경우에
별도의
태그가 필요하지 않다는 점 입니다.
</Pre>
</body>
</html>
출력물은 아래와 같게 됩니다.
프리 태그를 빼버리면 이 페이지는 아래와 같이 보입니다.
'HTML > HTML 기초' 카테고리의 다른 글
| HTML5, <sup> <sub> 태그 알아 보기 (0) | 2020.08.02 |
|---|---|
| HTML5, abbr 태그 알아보기 (0) | 2020.08.02 |
| 웹, HTML5 기본 구조와 용어의 의미 정리 (0) | 2020.08.01 |
| 줄바꿈이 안되는 경우 CSS : white-space, word-break (0) | 2020.05.25 |