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

[HTML5] P 태그와 PRE 태그

언제나휴일 2016. 4. 9. 02:15
반응형

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>



P태그와 PRE태그


반응형