P 태그와 PRE 태그
HTML에서는 단락을 표현할 때 <p> 태그를 사용합니다.
그런데 공백이 여러 개 있어도 하나의 공백으로 처리합니다.
프로그램 소스 코드를 웹 페이지에 게시하면 보는 이는 매우 불편할 것입니다.
<pre> 태그는 문맥에 입력하는 그대로 화면에 표시합니다.
아직 스크린 리더에서 pre 태그를 만나면 건너뛰어 웹 접근성에 대해 고려해야 한다고 말하는 이들도 있습니다.
다음은 하노이 타워 소스 코드를 <p> 태그를 이용한 것과 <pre> 태그를 이용한 것을 비교하기 위한 것입니다.
<!DOCTYPE html />
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>언제나 휴일 - 프로그램 코드</title>
<style>
section h2
{
background-color:Aqua;
color:Red;
}
footer
{
margin:10px;
clear:both;
text-align:center;
}
.style_a
{
background-color:White;
color:Green;
}
.style_b
{
background-color:Green;
color:White;
}
</style>
</head>
<body>
<section>
<article id="use_p_tag" class="style_a">
<h2>하노이 타워 - p 태크 사용</h2>
<p>
int main(void)
{
hanoi("A", "B", "C", 16);
}
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);
}
</p>
</article>
<article id="use_pre_tag">
<h2>하노이 타워 - pre 태크 사용</h2>
<pre class="style_b">
int main(void)
{
hanoi("A", "B", "C", 16);
}
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);
}
</pre>
</article>
</section>
<footer>
<p>Copyright 2015 언제나 휴일 ehclub.co.kr</p>
</footer>
</body>
</html>
'언어 자료구조 알고리즘 > HTML5' 카테고리의 다른 글
| [HTML5] 6. 안전한 구조를 위해 br 태그에 종료를 표시하자. (0) | 2016.05.05 |
|---|---|
| [HTML5] 5. 소스 코드를 본문에 포함할 때는 pre 태그를 사용! (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 |
| [HTML5] 테이블 (0) | 2016.04.09 |
| [HTML5] 목록 태그 <ul>, <ol>, <dl> (0) | 2016.04.09 |
| [HTML5] 시맨틱 태그와 CSS (0) | 2016.04.09 |