[HTML5] 5. 소스 코드를 본문에 포함할 때는 pre 태그를 사용!

HTML 문서를 작성할 때 작성할 때 보이는 것과 브라우저에서 보이는 내용이 다르게 보일 수 있습니다.

간단한 예를 들어볼게요.

  • 태그없이 입력한 예
<!DOCTYPE>
<html>
<head>
    <title>태그없이 입력한 예</title>
</head>
<body>
정몽주의 '단심가'
이몸이 죽고 죽어 일백번 고쳐 죽어
백골이 진퇴되어 넋이라도 있고 없고
님 향한 일편단심이야 가실 줄이 있으랴
</body>

</html>
웹 브라우저 화면

보시는 것처럼 편집할 때 여러 문단으로 작성한 것이 하나의 문단으로 나타나는 것을 알 수 있습니다.

HTML에서는 <p> 태그를 통해 새로운 문단을 시작하는 것을 나타내 줄 수 있습니다.

  • <p> 태그 사용한 예
<!DOCTYPE>
<html>
<head>
    <title>p태그 사용한 예</title>
</head>
<body>
    <p>정몽주의 '단심가'</p>
    <p>이몸이 죽고 죽어 일백번 고쳐 죽어</p>
    <p>백골이 진퇴되어 넋이라도 있고 없고</p>
    <p>님 향한 일편단심이야 가실 줄이 있으랴</p>
</body>
</html>
웹 브라우저 화면

하지만 프로그램 소스를 <p> 태그를 사용해서 표현하면 들여쓰기가 사라집니다. 이를 위해 <br>태그를 제공하고 있지만 편집하기가 불편합니다. 다음은 <br> 태그없이 <p> 태그만 사용하여 하노이 타워 소스를 편집한 예입니다.

  • 하노이 타워 소스를 <p>태그 사용한 예
<!DOCTYPE>
<html>
<head>
    <title>p태그 사용한 예</title>
</head>
<body>
    <p>#include <stdio.h> </p>
    <p>#include <time.h>
    <p>void Hanoi(const char *src, const char *use, const char *dest, int n)</p>
    <p>{</p>
    <p>    if(n<=0)</p>
    <p>    {</p>
    <p>        return;</p>
    <p>    }        </p>
    <p>    Hanoi(src,dest,use,n-1);</p>
    <p>    printf("move %s -> %s\n",src,dest);</p>
    <p>    Hanoi(use,src,dest,n-1);</p>
    <p>    }</p>
    <p>int main()</p>
    <p>{</p>
    <p>    clock_t st,et;</p>
    <p>    st = clock();</p>
    <p>    Hanoi("a","b","c",5);</p>
    <p>    et = clock();</p>
    <p>    printf("%d개의 돌 옮기기:%d\n",5,et-st);</p>
    <p>    st = clock();</p>
    <p>    Hanoi("a","b","c",7);</p>
    <p>    et = clock();</p>
    <p>    printf("%d개의 돌 옮기기:%d\n",7,et-st);</p>
    <p>    return 0;</p>
    <p>}</p>
</body>
</html>
웹 브라우저 화면

HTML5에서는 pre 태크를 제공하여 작성하면 입력한 내용의 개행과 들여쓰기를 그대로 유지시켜 편집할 때 보는 것과 브라우저에서 보는 것을 같게 할 수 있습니다.

참고로 <는 &lt; >는 &gt; 로 표현합니다.

  • 하노이 타워 소스를 <pre>태그 사용한 예
<!DOCTYPE>
<html>
<head>
    <title>p태그 사용한 예</title>
</head>
<body>
    <pre>
#include &lt;stdio.h&gt;
#include &lt;time.h&gt;

void Hanoi(const char *src, const char *use, const char *dest, int n)
{
    if(n<=0)
    {
        return;
    }     
    Hanoi(src,dest,use,n-1);
    printf("move %s -> %s\n",src,dest);
    Hanoi(use,src,dest,n-1);
}
int main()
{
    clock_t st,et;
    st = clock();
    Hanoi("a","b","c",5);
    et = clock();
    printf("%d개의 돌 옮기기:%d\n",5,et-st);
    st = clock();
    Hanoi("a","b","c",7);
    et = clock();
    printf("%d개의 돌 옮기기:%d\n",7,et-st);
    return 0;
}
    </pre>

</body>
</html>
브라우저 화면

이제 소스 코드를 본문에 포함할 때는 pre 태그를 사용하세요.

HTML5