pre 요소 : 입력한 HTML 소스코드의 내용을 그대로 보여주고 싶을때

이 요소는 HTML 의 태그의 특성도 적용이 되면서 입력한 내용 그대로 화면에 출력을 해준다. 이태그는 형식은 아래와 같다.

<pre> 내용(태그포함) </pre>

pre 태그의 본래 목적은 형태 그대로 노출시켜야될 텍스트 등을 쉽게 나타내기 위해서 사용한다. 사용 목적에 속하는 예로 아래와 같은 경우를 들 수 있다. 아래는 code 요소를 사용하여 C언어의 소스코드를 나타내었다.

 

<pre>

<code>#include &lt;stdio.h&gt;

#include &lt;stdlib.h&gt;

void main() {

printf("Hello World\n");

}</code>

</pre>

실행결과

---

위의 예제 코드를 보면 알겠지만, pre 요소안에서는 다른 요소들도 사용할 수 있다. 위의 예제에서는 code 요소를 사용하여 나타내었다. 중요한점은 pre요소 안에서 다른요소를 사용시, 처음시작부분과 끝부분도 내용과 동일한 위치에서 작성해주어야,  빈공간을 없앨 수 있다. 그이유는  pre 요소 특성상 안에 위치한 모든 요소나 텍스트는 pre 요소의 특성이 전부 적용되기 때문이다. 이 관계는 부모 요소와 자식요소의 스타일이 상속된다고 표현할 수 있다.

☞ pre 요소의 문제점

나같은 경우 오래전 웹싸이트의 에디터 기능을 만들때 너무 귀찮기도 하고, 안되는 기능도 많아서,  pre 요소를 사용하여 텍스트글만 입력하도록 만든적이 있다. 처음에는 별 문제없이 잘 사용되는것같아서, 그대로 사용하였지만, 얼마않되서 문제점 하나가 발견되기 시작했다. 그 문제점은 바로 웹페이지의 본문영역이 고정이 아닐경우 아래 그림과 같이 텍스트가 본문영역을 이탈해 버리는 것이였다.  

(pre 요소를 사용했을 시 텍스트가 이탈하는 현상)

텍스트가 넘치는 현상을 해결 하기 위해서 CSS 의 white-space 프로퍼티 와 word-break 프로퍼티 를 pre 요소에 적용시켜 주면된다. 아래는 pre요소에 CSS의 프로퍼티를 사용하여 줄바꿈을 적용한 예제이다.

 스페이스바로 띄운 공간이나 탭으로 띄운 공간을 그대로 표현하면서 줄바꿈을 하고싶을때

---

pre{
white-space:pre-wrap; /*공백이나 탭공간을 그대로 둔다*/
word-break:break-all; /*텍스트가 넘칠경우 줄바꿈을 해준다*/
}

 스페이스바로 띄운 공간이나 탭으로 띄운 공간을 없애고 줄바꿈을 하고싶을때

---

pre{
white-space:pre-line; /*공백이나 탭공간을 없앤다*/
word-break:break-all; /*텍스트가 넘칠경우 줄바꿈을 해준다*/
}