<pre> 태그와 <xmp> 태그 > 기술자료

• 목록

<pre>와 <xmp> 태그는 언뜻보면 비슷합니다.
하지만 분명히 차이는 있습니다.

1. <xmp> 태그

1-1. <xmp>태그의 이해
<xmp>태그는 <xmp>과 </xmp>사이의 문자,숫자와 태그소스를 그대로 출력합니다.
물론 자바스크립트도 예외는 아닙니다. <xmp>과 </xmp>사이에 태그뿐만 아니라
자바스크립트가 있다면 자바스크립트 소스도 출력됩니다.

그리고 소스가 출력되면서 소스는 실행되지 않습니다.
즉, 소스를 보여주고 실행할려면 완성된 소스를 복사해서 하나는 <xmp>과 </xmp>사이에 넣습니다.

아니면 태그를 <xmp> 태그의 바깥에서 실행되어야 합니다.

따라서, <xmp>와 </xmp>사이에는 줄띄우기 태그인 <br />를 실행할 수 없습니다.
그러므로 애초에 소스를 입력할 때 입력된 문자형태를 입력할 때는 <xmp>과 </xmp>사이에 <br />태그를 쓸 수 없다는 사실을 고려해서 줄을 엔터(Enter)키로 눌러줄을 띄워주고 소스를 완성해야 합니다.

1-2. <xmp>의 응용
<xmp>태그는 사용된 HTML소스나 보여주고 싶은 HTML소스를 보여주고자 할때 사용합니다.

1-3. <xmp>의 형식및 예제
[ 형식 ]
<xmp>과 </xmp>사이에 보여질 내용이나 HTML소스를 적으면 됩니다.

[ 예제 ]
-------------------------
예제내용
-------------------------
<xmp>
제목1<br />
 
제목2
</xmp>

-------------------------
실행결과
-------------------------
제목1<br />  <----------<br />태그가 실행되지 않고 입력된 그대로 출력되었습니다.

제목2


2. <pre>태그
2-1. <pre>태그 이해
<pre>태그는 입력된 문자형태 그대로 출력하면서 <pre>과 </pre>안의 태그는 실행됩니다.
<xmp>과는 달리 태그소스는 출력되지 않고 HTML소스가 실행됩니다.
단지 문자의 띄어쓰기, 줄띄우기등의 문자형태를 그대로 출력만 할 뿐입니다.
만일 <br />태그나 <p></p>태그등을 사용할 경우 한줄을 더 띄워주게 됩니다.

2-2. <pre>의 응용
<pre> 태그는 이미지로 꾸민 테이블에서 글넣는 곳에 쓰면
<br />태그나 <p></p>태그를 사용하지 않아도 되어 매우 유용합니다.
그리고 글의 양이 많아서 <br />나 <p></p>등을 쓰기 번거로울때 쓰면 좋습니다.  

2-3. <pre> 태그 형식및 예제
[ 형식 ]
<pre> 글내용(태그) </pre>

태그를 넣어도 출력되지 않고 실행되기 때문에 넣어도 무방합니다.

[ 예제 ]
-------------------------
예제내용
-------------------------
제목1<br />

제목2

----------------------------
실행결과
----------------------------
제목 1
            <------------- <br /> 태그로 인해 한줄 더 띄어짐.

제목2


2-4. width 제한하기
style sheet 를 사용해서 pre 의 폭을 제한할수 있습니다.
<pre style="width:500px; white-space:pre; word-wrap:Flash Animation break-word;">긴 내용</pre>

※ 위의 내용 적용시  
IE8 O, IE9 X : <td style="width:500px; white-space:pre; word-wrap:Flash Animation break-word;">긴 내용</td>
IE8 O, IE9 O : <pre style="width:500px; white-space:pre; word-wrap:Flash Animation break-word;">긴 내용</pre>


참고자료
http://selfesteem.tistory.com/16
http://cafe.naver.com/studyprogram.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=116