[HTML5] P 태그와 PRE 태그
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>
