언어 자료구조 알고리즘/HTML5

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

언제나 휴일 언제나휴일 2016. 5. 5. 09:06
반응형

소스 코드를 본문에 포함할 때는 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> 태그 사용

 

하지만 프로그램 소스를 <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>


소스 코드를 <p>태그를 사용한 예

 

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> 태그를 사용한 예

 

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


소스 코드를 본문에 포함할 때는 pre 태그를 사용.zip


반응형
1 2 3 4 5 6 7 8 9 10 ··· 15