HTML 태그 코드 그대로 보여주기 - CODE 태그, PRE 태그, XMP 태그의 차이점
페이지 정보
조회 709회 작성일 22-06-27 01:19
본문
태그 코드 그대로 보여주기
CODE 태그, PRE 태그, XMP 태그의 차이점
태그 코드를 그대로 보여주는 방법은 XMP, PRE, CODE 등의 코드를 사용하는 것이다.
그런데, PRE, CODE, XMP의 차이점은 무엇일까?
그 사용법과 태그를 입력한 그대로 보여주는 방법을 설명한다.
태그 코드 그대로 보여주기 - CODE 태그, PRE 태그, XMP 태그의 차이점
태그를 입력 한대로 보여준다는 의미는?
브라우저란 html 코드를 눈으로 볼 수 있게 번역해서 보여주는 프로그램이라고 생각하면 쉽다.
여기서 번역이란, 태그를 감추는 대신 모양을 만들어 주는 것을 말한다.
그런데 문제는, html 태그를 설명하기 위해 글을 썼는데 브라우저가 html 코드라고 생각해서 번역해 버리는 것에 있다.
예를 들어, 링크 태그를 설명하기 위해 아래처럼 썼을 때 문제가 발생한다.
[code]
<a href="http://www.kiss7.kr">키 스 세 븐</a>
[/code]
브라우저가 이 코드를 오해하면 아래처럼 진짜로 링크가 걸린 글자를 보여 준다. html 태그를 보여주고 싶어도 보여 줄 수가 없는 것이다.
띄어쓰기든 html 태그든 다 실행돼서 안 보이게 되어 버렸다. 태그를 적용하면서 눈에 안 보이게 해 버리는 문제점이 생기는 것이다.
이런 문제점 때문에 CODE 태그, PRE 태그, XMP 태그를 사용하게 된다.
사용법은 세 가지가 모두 같다. 아래처럼 코드 바깥쪽을 감싸게 해 주면 된다.
[code]
<태그>
보여 줄 내용
</태그>
[/code]
위의 기본 코드에서 "태그"라고 적힌 부분에 XMP, PRE, CODE 등을 적어 주면 된다.
CODE 태그, PRE 태그, XMP 태그의 차이점
일단, 각 태그의 차이점을 정리한다.
여기서 "실행된다"는 의미는 태그 부분이 바뀌어서 안 보인다는 것이고, "실행되지 않는다"는 의미는 태그를 바꾸지 않고 그대로 보여준다는 의미다.
- PRE : 띄어쓰기와 줄바꿈 부분까지 보여 준다. 그러나 태그는 실행된다. 또한 block 속성이다. 즉 무조건 한 줄을 혼자 다 차지한다.
- CODE : 프로그래밍 코드를 보여 준다. 띄어쓰기와 줄바꿈은 보이지 않는다. 또한 inline 속성이다. 즉 일반 글자처럼 옆으로 나타난다.
- XMP : 모든 것을 그대로 보여 준다. 태그도 실행되지 않는다. 다만 띄어쓰기와 엔터는 보이지 않는다.
예를 들어, 이렇게 입력하면...
[code]
<xmp><a href="http://www.kiss7.kr">키 스 세 븐</a></xmp>
[/code]
이렇게 코드까지 다 보여 주는 것이다. 위의 초록 박스 부분과 비교하면 차이점이 확실히 느껴질 것이다.
[code]
<a href="http://www.kiss7.kr">키 스 세 븐</a>
[/code]
그러므로 이렇게 사용하면 된다.
상황에 따라 아래처럼 기억하면 차이점을 활용하기 편할 것이다. [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)
- 글자와 띄어쓰기, 줄바꿈 등 문장의 모양을 제대로 보여주면 될 때 : PRE를 사용한다.
- 문장을 쓰다가 중간에 html코드를 보여주려고 할 때 : CODE를 사용한다.
- 입력된 그대로의 html 코드 등 모든 것을 그대로 보여주려고 할 때 : XMP를 사용한다.
태그 소스를 그대로 보여주는 태그의 차이점을 이용해서 중복으로 사용할 수도 있다.
예를 들면, 아래처럼 이중으로 감싸서 사용할 수도 있는 것이다.
[code]
<pre><code><a href="http://www.kiss7.kr">키 스 세 븐</a></code></pre>
[/code]