[formatting] HTML - <pre>, <xmp> 태그 ★ - 공백줄바꿈보존 (= 보존태그 = 있는그대로태그 = 있는대로태그 /= pre태그 = 프리태그 / xmp태그 = 엑스엠피태그) (HTML5수정)

1. <pre> 예제 - (공백+줄바꿈) 보존
2. <pre> 정의
3. <pre> 구문
4. <pre> 속성
5. <pre> 태그 vs. white-space:pre 스타일
6. <pre> 태그 vs. <xmp> 태그
7. <pre> 예제 - PHP_EOL 개행 상수 작동 확인

<pre> 예제 - (공백+줄바꿈) 보존 

 

<pre>
홈짱닷컴 (homzzang.com)   너무     너무나   좋은    카페

홈페이지 제작 왕초보자에게 한 줄기 빛이 되어줄 무료 카페

 

<a href="http://www.homzzang.com" target="blank"><img src= "https://i.imgur.com/WfW5mBC.png" border=0></a>

</pre>

결과보기

<pre> 정의

 

내부 태그를 실행시킨 상태에서 띄어쓰기 공백과 줄바꿈을 브라우저가 그대로 인식할 수 있도록 보존.

 

---

1.

pre : (preserve : 보존하다) 또는 (preformatted : 사전서식정의된)의 세 글자.

2. cf.

• <pre> 태그:  html 태그 실행 O 상태에서 공백 줄 바꿈 인식.
• <xmp> 태그: html 태그 실행 X 상태에서 공백 줄 바꿈 인식.

 

3.
시작태그와 종료태그로 구성

 

4.

CSS 경우, white-space:pre 이용.

 

<pre> 구문

 

<pre> 뜨어쓰기 공백이나 줄바꿈 보존해 그대로 화면에 보이기 </pre>

 

<pre> 속성

<pre> 태그 vs. white-space:pre 스타일

<pre>내     용</pre>

<div style="white-space:pre;">내     용</div>

 

결과보기

<pre> 태그 vs. <xmp> 태그

[<pre> 태그] - HTML 태그 실행 O 후, 공백/줄바꿈 인식

 

<pre>홈짱닷컴 (homzzang.com)   너무     너무나   좋은    카페

홈페이지 제작 왕초보자에게 한 줄기 빛이 되어줄 무료 카페

 

 

<a href=https://homzzang.com target=blank><img src="https://i.imgur.com/WfW5mBC.png" border=0></a>

</pre>

결과보기

---

[<xmp> 태그] - HTML 태그 실행 X 후, 공백/줄바꿈 인식

 

<xmp>홈짱닷컴 (homzzang.com)   너무     너무나   좋은    카페

홈페이지 제작 왕초보자에게 한 줄기 빛이 되어줄 무료 카페

 

<a href=https://homzzang.com target=blank><img src="https://i.imgur.com/WfW5mBC.png" border=0></a>

</xmp>

결과보기

<pre> 예제 - PHP_EOL 개행 상수 작동 확인

 

<?php

$site= "홈짱닷컴" ;

$url = "Homzzang.com";

echo '<pre>'.$site . PHP_EOL . $url.'</pre>';

?>

 

결과값:

홈짱닷컴

Homzzang.com

※ 주의

<pre> 태그로 안 감싸면 「홈짱닷컴 Homzzang.com」처럼 한 칸만 띄어짐.

시스템 상에선 개행이 이루어 졌으나, 실제 사람 눈엔 한 칸 띄어져 보일 뿐임.

PHP_EOL https://homzzang.com/b/code-1839