[HTML] code 태그

목 차

• HTML <code> 태그란?
• <code> 태그 기본 문법
• 여러 줄 코드 표시하기 (<pre> 태그와 함께 사용)
• <code> 태그 스타일 변경 (CSS 적용)
• 코드 블록에 문법 강조 적용하기
  • Prism.js 예제
• <code> 태그와 <kbd>, <samp>, <var>의 차이점
• <code> 태그 요약

 

HTML <code> 태그란?

<code> 태그는 프로그래밍 코드(소스 코드)를 표시할 때 사용하는 HTML 태그입니다. 웹 브라우저에서 <code> 태그로 감싼 텍스트는 기본적으로 고정폭 글꼴(monospaced font, 예: Courier New) 로 표시됩니다.

 

---

 

<code> 태그 기본 문법

<p>변수 선언은 <code>let x = 10;</code> 이렇게 합니다.</p>
<p>HTML에서 태그를 사용할 때 <code>&lt;div&gt;</code>을 자주 씁니다.</p>

• <code> 태그를 사용하면 코드가 고정폭 폰트로 표시됩니다.
• < 와 > 같은 특수 문자는 HTML 엔티티 (&lt;, &gt;) 로 변환해야 합니다.

 

---

 

여러 줄 코드 표시하기 (<pre> 태그와 함께 사용)

<code> 태그만 사용하면 공백과 줄 바꿈이 유지되지 않지만, <pre> 태그와 함께 사용하면 형식을 그대로 유지할 수 있습니다.

<pre><code>
function greet(name) {
  return "Hello, " + name + "!";
}
</code></pre>

출력 결과:

function greet(name) {
  return "Hello, " + name + "!";
}

<pre> 태그는 코드의 공백과 줄 바꿈을 유지하여 보기 좋게 표시할 수 있습니다.

 

---

 

<code> 태그 스타일 변경 (CSS 적용)

<code> 태그는 기본적으로 고정폭 글꼴(monospace) 로 표시되지만, CSS를 적용하여 스타일을 변경할 수도 있습니다.

code {
  font-family: 'Courier New', monospace; /* 고정폭 폰트 */
  background-color: #f4f4f4; /* 배경색 추가 */
  padding: 2px 4px; /* 안쪽 여백 */
  border-radius: 4px; /* 모서리 둥글게 */
  color: #d63384; /* 글자 색 */
}

<p>Python에서 변수 선언은 <code>x = 10</code> 입니다.</p>

위와 같이 CSS를 적용하면 가독성을 높일 수 있습니다.

 

---

 

코드 블록에 문법 강조 적용하기

프로그래밍 코드의 가독성을 높이려면 프리즘(Prism.js)이나 하이라이트.js(Highlight.js) 같은 라이브러리를 사용할 수 있습니다.

💡 Prism.js 예제

<!-- Prism.js 라이브러리 추가 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>

<!-- 코드 블록 -->
<pre><code class="language-javascript">
function hello() {
  console.log("Hello, world!");
}
</code></pre>

Prism.js를 사용하면 자동으로 코드 색상이 적용됩니다.

 

---

 

<code> 태그와 <kbd>, <samp>, <var>의 차이점

태그	용도	예제
<code>	프로그래밍 코드 표시	<code>console.log("Hello")</code>
<kbd>	키보드 입력 표시	<kbd>Ctrl + C</kbd>
<samp>	프로그램 출력 값 표시	<samp>출력 결과: 42</samp>
<var>	변수 이름 표시	<var>x</var> = 10

예제 코드:

<p>파일을 저장하려면 <kbd>Ctrl + S</kbd>를 누르세요.</p>
<p>계산 결과: <samp>42</samp></p>
<p>변수 <var>x</var>의 값은 10입니다.</p>

 

각 태그는 용도에 맞게 사용하는 것이 중요합니다.

 

---

 

<code> 태그 요약

• <code> 태그는 프로그래밍 코드를 표시할 때 사용
• 고정폭 폰트(monospaced font) 로 자동 적용됨
• 여러 줄 코드를 표시하려면 <pre>와 함께 사용
• 가독성을 위해 배경색, 테두리 등을 추가 가능 (CSS 적용)
• 문법 강조를 위해 Prism.js, Highlight.js 같은 라이브러리 사용 가능
• 키보드 입력 <kbd>, 출력 값 <samp>, 변수 <var> 와 구별해야 함

 

---

 

관련글

• [HTML] cite 태그
• [HTML] caption 태그
• [HTML] em 태그 (텍스트 의미 강조&검색엔진최적화)