code element - by. UXKM

  • Publishing
  • HTML
  • 문자 콘텐츠(Text-level semantics)
  • code element
요약 설명

<code> 요소는 컴퓨터 코드나 프로그래밍 관련 텍스트를 나타내는 시맨틱 태그로, 코드 조각이나 명령어, 함수명, 변수명 등을 문서 내에서 구분해 보여줄 때 사용됩니다.
기본적으로 고정폭 글꼴(monospace)로 표시되어 일반 텍스트와 시각적으로 구분되며, 블록 형태의 코드와 함께 사용할 경우 <pre> 요소와 함께 쓰이는 경우가 많습니다. 문서 내에서 코드의 의미와 구조를 명확히 전달하기 위한 시맨틱 마크업입니다.

주요 역할 및 특징

  1. 코드 콘텐츠 표현
    • <code>는 소스 코드, 명령어, 변수명, 파일명 등과 같은 텍스트를 강조하여 표현합니다.
    • 예: console.log(), int a = 10;.
  2. 고정폭 글꼴 사용

    브라우저에서 고정폭 글꼴로 렌더링되어 코드의 구조를 명확히 나타냅니다.

  3. 의미론적 사용
    • <code>는 해당 콘텐츠가 코드임을 나타내며, 단순히 스타일링을 위한 요소가 아닙니다.
    • 문맥적으로 코드와 관련된 텍스트에만 사용해야 합니다.
  4. 다른 요소와의 조합

    긴 코드 블록은 <pre>와 함께 사용하여 줄바꿈과 공백을 유지하면서 코드를 표시합니다.

  5. CSS로 스타일링 가능

    기본 고정폭 글꼴 외에도 CSS를 사용해 배경색, 테두리 등을 커스터마이징할 수 있습니다.

CSS 기본 값

<code> 요소는 기본적으로 인라인 레벨 요소이며, 별도의 CSS를 지정하지 않아도 아래와 같은 기본값이 적용됩니다.

기본 문법

속성

<code> 요소는 고유 속성을 가지지 않으며, 글로벌 속성(class, id, style, aria-*, data-* 등)만 사용할 수 있습니다.

예제

간단한 코드 표시

<pre>와 함께 사용

CSS로 스타일 변경

접근성을 고려한 코드

주의사항

  • <code>는 반드시 코드와 관련된 텍스트에만 사용하세요. 단순히 텍스트를 스타일링하려면 CSS를 사용하세요.
  • 코드가 아닌 의미론적 강조가 필요하면 <em> 또는 <strong>을 사용하는 것이 더 적절합니다.
  • HTML 코드(<, >, & 등)를 표시하려면 반드시 이스케이프 처리(&lt;, &gt;, &amp;)를 해야 합니다.