<xmp> 태그와 <pre> 태그의 차이
<pre>와 <xmp> 태그는 언뜻보면 비슷합니다.
하지만 분명히 차이는 있습니다.
1. <xmp> 태그
#1. <xmp>태그의 이해
<xmp>태그는 <xmp>과 </xmp>사이의 문자,숫자와 태그소스를 그대로 출력합니다.
물론 자바스크립트도 예외는 아닙니다. <xmp>과 </xmp>사이에 태그뿐만 아니라
자바스크립트가 있다면 자바스크립트 소스도 출력됩니다.
그리고 소스가 출력되면서 소스는 실행되지 않습니다. 즉, 소스를 보여주고
실행할려면 완성된 소스를 복사해서 하나는 <xmp>과 </xmp>사이에 넣고 실행해야 합니다.
아니면 태그를 <xmp> 태그의 바깥에서 실행되어야 합니다.
따라서, <xmp>와 </xmp>사이에서는 줄띄우기 태그인 <br>를 실행할 수 없다는
사실을 알 수 있습니다. 그러므로 애초에 소스를 입력할 때 입력된 문자형태를 입력할 때는
<xmp>과 </xmp>사이에 <br>태그를 쓸 수 없다는 사실을 고려해서 줄을 엔터(Enter)키로 눌러줄을 띄워주고 소스를 완성해야 합니다.
#2. <xmp>의 응용
<xmp>태그는 사용된 HTML소스나 보여주고 싶은 HTML소스를 보여주고자 할때 사용합니다.
#3. <xmp>의 형식및 예제
*형식
<xmp>과 </xmp>사이에 보여질 내용이나 HTML소스를 적으면 됩니다.
*예제
-------------------------
예제내용
-------------------------
<xmp>
웹디자인<br>
웹디자인
웹디자인
</xmp>
-------------------------
실행결과
-------------------------
웹디자인<br> <----------<br>태그가 실행되지 않고 입력된 그대로 출력되었습니다.
웹디자인
웹디자인
2. <pre>태그
#1. <pre>태그 이해
<pre>태그는 입력된 문자형태 그대로 출력하면서 <pre>과 </pre>안의 태그는 실행됩니다.
<xmp>과는 달리 태그소스는 출력되지 않고 HTML소스가 실행됩니다.
단지 문자의 띄어쓰기, 줄띄우기등의 문자형태를 그대로 출력만 할 뿐입니다.
만일 <br>태그나 <p>태그등을 사용할 경우 한줄을 더 띄워주게 됩니다.
#2. <pre>의 응용
<pre> 태그는 이미지로 꾸민 테이블에서 글넣는 곳에 쓰면
<br>태그나 <p>태그를 사용하지 않아도 되어 매우 유용합니다.
그리고 글의 양이 많아서 <br>나 <p>등을 쓰기 번거로울때 쓰면 좋습니다.
#3. <pre> 태그 형식및 예제
*형식
<pre> 글내용(태그) </pre>
태그를 넣어도 출력되지 않고 실행되기 때문에 넣어도 무방합니다.
*예제
-------------------------
예제내용
-------------------------
웹디자인<br>
웹디자인
웹디자인
----------------------------
실행결과
----------------------------
웹디자인
<------------- <br> 태그로 인해 한줄 더 띄어짐.
웹디자인
웹디자인