웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
안녕하세요^^ PRE 태그와 XMP 태그... 쓰이는 빈도가 아주 높은 것은 아니지만 알아두면 너무나도 편리하기 때문에 반드시 알아두어야 하는 코드 중 하나입니다! 이 태그를 이용해 할 수 있는 건 무엇이고 어떤 차이가 있는지 알아보도록 하겠습니다. 먼저 태그의 쓰임은 무엇일까요?
[ 1 ] PRE 태그
; PRE태그는 preformatted를 의미하며 이미 형식화 되었음을 뜻합니다. 즉, 개행 문자를 사용해 줄바꿈 할 필요가 없이 태그 안에 입력한 그대로 보여줄 수 입니다.
Example
<html>
<body>
<pre>
줄바꿈을 하기 위해 br 또는 p 태그를
사용하지 않아도 됩니다
그대로 보여줄 수 있습니다
</pre>
</body>
</html>
// 위의 예제는 웹페이지 상에서 적힌 그대로 줄바꿈되어 보여줍니다. 아래 처럼요...
Result
줄바꿈을 하기 위해 br 또는 p 태그를
사용하지 않아도 됩니다
그대로 보여줄 수 있습니다
? PRE는 언제 쓸 수 있을까요
; 줄바꿈이 필요한 경우가 되겠죠... 그 중에서도 특히 textarea를 태그를 이용해 서버에 글을 저장했다면? 이를 다시 서버의 데이터베이스에서 불러올 경우 별도의 줄바꿈이 필요하죠(replace 함수를 이용한다든지요...) 물론 php나 기타 서버 사이드 언어는 nl2br 함수처럼 편리하게 줄바꿈 할 수 있도록 도와줍니다^^ 이럴때 pre 태그를 이용한다면 간단한 텍스트 내용을 별다른 줄바꿈 없이 그래로 보여줄 수 있습니다.
[ 2 ] XMP 태그
; XMP태그는 태그 안에 적힌 내용 그대로 표현해주며 태그까지 그대로 보여주기 때문에 예제를 나타낼 때 사용하면 편리합니다. 참고로 Default 폰트가 monospace로 적용되기 때문에 다른 폰트를 원하시면 바꾸셔야 합니다...
Example
<xmp><b>예제입니다</b></xmp>
// 위의 예제는 안에 위치한 b태그 역시 그대로 보여줍니다. 아래의 결과를 확인하세요...
Result
? xmp태그는 가급적 사용을 피해야 합니다.
; xmp태그는 html 5에서부터는 축소된 태그로 pre태그의 사용을 권합니다. 그렇기 때문에 가급적 xmp 태그는 사용하지 말아야 할 것입니다. 그 대신 특수코드를 이용하거나 code 또는 pre 태그로 대체해야 할 것입니다^^
(참고) !! 하지만 xmp 태그의 사용에 되한 의견은 엇갈립니다. xmp태그 대신 pre 태그를 사용하라고 하지만 100% 대응되는 코드가 아니기 때문에 어떤이는 스크립트를 사용하기도 하며, 완전히 사라지기 전까지는 꽤 시간이 걸릴 것이기 때문에 그때까지는 사용하는 것이 최선이라고도 합니다.
? xmp태그는 언제 쓸 수 있을까요
; 예제를 보여줄 때 코드 그대로 보여주기 위해 사용하는 방법이 좋겠습니다. 특수문자 역시 이 태그를 사용하면 편리하겠죠!! 하지만 html5에서는 지원하지 않는다는 점을 꼭 유념하시고 가급적 다른 방법을 사용해야 합니다~
? 특수코드를 사용한 예제, b태그
위와 같이 특수코드를 사용하여 클라이언트 화면에 그대로 출력할 수 있습니다.
아래의 글도 찾고 계시지 않나요?
