HTML pre 태그 시와 컴퓨터 코드에 적합한 예제 모음

HTML pre 태그

<pre> 태그는 Enter , Space 등으로 작성된 줄바꿈과 띄어쓰기가 그대로 유지되는 태그입니다.

시 또는 컴퓨터 소스 코드와 같은 텍스트를 웹문서에 삽입할 때 가독성을 위해서 줄바꿈과 공백을 유지해야 되는 상황에 유용한 태그입니다.

<pre>
그러다가 또 하나의 길을 택했습니다. 먼저 길과 똑같이 아름답고,
아마 더 나은 듯도 했지요.
풀이 더 무성하고 사람을 부르는 듯했으니까요.
사람이 밟은 흔적은
먼저 길과 비슷하기는 했지만,

-중략-

오랜 세월이 흐른 다음
나는 한숨 지으며 이야기하겠지요.
"두 갈래 길이 숲 속으로 나 있었다, 그래서 나는 -
사람이 덜 밟은 길을 택했고,
그것이 내 운명을 바꾸어 놓았다"라고
</pre>

예제 ▷

프로그램 소스코드의 경우 <pre> 태그 사이에 삽입해야 줄바꿈과 들여쓰기가 유지되므로 유용하게 쓸 수 있습니다.

<pre><code>ul {
  background-color: red;
  font-family: 바탕체;
  font-size: 50px;
}</code></pre>

예제 ▷

그냥 <code> 태그만 사용할 경우, 줄바꿈과 들여쓰기가 적용되지 않습니다.

<code>ul {
  background-color: red;
  font-family: 바탕체;
  font-size: 50px;
}</code>

예제 ▷

<pre> 배경색 변경

<pre> 태그 배경색 변경은 style 속성에 background-color 속성값을 추가해서 작성합니다. #E2EC9A는 HEX 색상 코드입니다.

<pre style="background-color:#E2EC9A;">빛이 있으라

-창세기 1장 3절-</pre>

예제 ▷

<pre> 글자색 변경

<pre> 태그 글자색 변경은 style 속성에 color 속성값을 삽입해서 변경합니다.

<pre style="color:gray;">이것 또한
       지나가리라...

-솔로몬 왕자-</pre>

예제 ▷

<pre> 테두리 삽입

<pre> 태그 테두리 삽입은 style 속성에 border 속성값으로 작성합니다. px은 선의 두께 solid는 선의 종류 black은 선의 색을 정의합니다.

<pre style="border:1px solid black;">나는 생각한다.
고로 존재한다.
-르네 데카르트-</pre>

예제 ▷

<pre> 글씨체 변경

<pre> 태그의 글씨체 변경은 style 속성에 font-family 속성값을 삽입해서 작성합니다.

<pre style="font-family:궁서체;">주사위는
        던져졌다.

-율리시스 카이사르-</pre>

예제 ▷

<pre> 글씨크기 변경

<pre> 태그의 글씨크기 변경은 style 속성에 font-size 속성값을 추가해서 작성합니다.

<pre style="font-size:35px;">좁은 문으로 들어가라

-마태복음 7장 13:14-</pre>

예제 ▷