소스 코드를 본문에 포함할 때는 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 태크를 제공하여 작성하면 입력한 내용의 개행과 들여쓰기를 그대로 유지시켜 편집할 때 보는 것과 브라우저에서 보는 것을 같게 할 수 있습니다.
참고로 <는 < >는 > 로 표현합니다.
- 하노이 타워 소스를 <pre>태그 사용한 예
<!DOCTYPE>
<html>
<head>
<title>p태그 사용한 예</title>
</head>
<body>
<pre>
#include <stdio.h>
#include <time.h>
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 태그를 사용.zip
'언어 자료구조 알고리즘 > HTML5' 카테고리의 다른 글
| [HTML5] 10. HTML 문서를 작성하는 사람 입장에서는 보기 불편한 특수 문자 (0) | 2016.05.31 |
|---|---|
| [HTML5] 9. time 태그로 날짜와 시각 정보를 표시하는 습관을 기릅시다. (1) | 2016.05.09 |
| [HTML5] 8. 굵게 표시하는 태그 <strong>은 강조 <b>는 그냥 굵게 (0) | 2016.05.07 |
| [HTML5] 7. mark 태그를 이용하여 중요한 텍스트에 형광펜 효과를 주자. (0) | 2016.05.07 |
| [HTML5] 6. 안전한 구조를 위해 br 태그에 종료를 표시하자. (0) | 2016.05.05 |
| [HTML5] 4. 주석으로 가독성을 높이자. (0) | 2016.05.05 |
| [HTML5] 3. 글자가 이상하게 보일 때 깨지지 않게 meta태그에 인코딩 설정 (0) | 2016.05.04 |
| [HTML5] 2. 간단해진 HTML 문서 형식 선언 <!DOCTYPE html> (0) | 2016.05.04 |
| [HTML5] 1. 첫 번째 만드는 HTML 문서, "Hello, HTML" (0) | 2016.05.04 |
| [HTML5] 이미지 (0) | 2016.04.09 |