💡 퀵 접속: htm.kr/codes

HTML5 Code/Pre 태그 사용법

1. Code/Pre 태그란?

Code 태그와 Pre 태그는 HTML 문서에서 코드를 표시하는 데 사용되는 태그입니다. Code 태그는 인라인 코드를, Pre 태그는 여러 줄의 코드 블록을 표시할 때 사용됩니다. 이 태그들은 프로그래밍 코드, 명령어, 설정 등을 표시할 때 유용합니다.

2. 기본 구조

Code/Pre 태그의 기본 사용법

<p>
    HTML에서 <code>div</code> 태그는 블록 레벨 요소입니다.
</p>

<pre>
<code>
function greeting() {
    console.log("Hello, World!");
}
</code>
</pre>

3. 자주 사용되는 속성

속성 설명 예시
class CSS 클래스 지정 <code class="language-html">
id 고유 식별자 <pre id="code-block">
style 인라인 스타일 <pre style="background: #f8f8f8;">

4. 실제 사용 예제

<article class="code-example">
    <h2>HTML 기본 구조</h2>
    
    <p>
        HTML 문서는 <code>DOCTYPE</code> 선언으로 시작합니다.
    </p>
    
    <pre>
    <code>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>웹 페이지 제목</title>
</head>
<body>
    <h1>안녕하세요!</h1>
    <p>이것은 첫 번째 웹 페이지입니다.</p>
</body>
</html>
    </code>
    </pre>
    
    <div class="note">
        <p>
            위 코드는 기본적인 HTML5 문서 구조를 보여줍니다.
            <code>lang="ko"</code>는 한국어 문서임을 나타냅니다.
        </p>
    </div>
</article>

💡 주의사항

  • code 태그는 짧은 인라인 코드를 표시할 때 사용합니다.
  • pre 태그는 여러 줄의 코드 블록을 표시할 때 사용합니다.
  • pre 태그 내의 공백과 줄바꿈이 그대로 유지됩니다.
  • 접근성을 고려한 마크업을 사용합니다.
  • 코드 하이라이팅을 위해 적절한 클래스를 사용합니다.

5. 스타일링 예제

<style>
    /* 기본 코드 스타일 */
    code {
        font-family: 'Consolas', monospace;
        background-color: #f5f5f5;
        padding: 2px 4px;
        border-radius: 3px;
        color: #d63384;
    }

    /* 코드 블록 스타일 */
    pre {
        background-color: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 5px;
        padding: 15px;
        overflow-x: auto;
    }

    pre code {
        background-color: transparent;
        padding: 0;
        color: inherit;
        font-size: 0.9em;
        line-height: 1.5;
    }

    /* 언어별 스타일 */
    .language-html {
        color: #e83e8c;
    }

    .language-css {
        color: #20c997;
    }

    .language-javascript {
        color: #fd7e14;
    }

    /* 반응형 스타일 */
    @media (max-width: 768px) {
        pre {
            padding: 10px;
        }
        
        pre code {
            font-size: 0.8em;
        }
    }
</style>

6. 성능 최적화 팁

  • code/pre 태그의 중첩을 최소화합니다.
  • CSS로 스타일링을 처리합니다.
  • 접근성을 고려한 마크업을 사용합니다.
  • 코드 하이라이팅 라이브러리를 적절히 사용합니다.
  • 긴 코드 블록은 별도 파일로 분리합니다.

7. 검증 및 테스트

code/pre 태그가 올바르게 사용되었는지 확인하는 방법:

  • W3C 마크업 검증 서비스 사용
  • 스크린 리더 테스트
  • 다양한 브라우저에서 테스트
  • 접근성 검사 도구 사용
  • 코드 하이라이팅 테스트