HTML <code> 태그, 소스 코드 표시하기

웹 개발에서 코드 예제를 명확하고 가독성 있게 표시하는 것은 매우 중요합니다. HTML의 <code> 태그는 이러한 작업을 간편하게 해주는 요소입니다. 이 가이드에서는 <code> 태그의 기본 사용법부터 다양한 활용법까지 자세히 살펴보겠습니다.

<code> 태그란?

<code> 태그는 HTML에서 프로그래밍 코드의 한 조각을 표시할 때 사용됩니다. 이 태그는 주로 짧은 코드 스니펫이나 키워드를 나타내는 데 적합하며, 웹 페이지 내에서 코드를 명확하게 구분해줍니다.

<code> 태그를 사용하려면, 단순히 코드 스니펫을 해당 태그로 감싸기만 하면 됩니다. 예를 들어, 자바스크립트 함수 호출을 표시하려면 다음과 같이 작성할 수 있습니다:

<p>자바스크립트 함수 호출: <code>myFunction()</code></p>

이렇게 하면 "myFunction()"이라는 코드가 브라우저에서 코드로 인식되어 표시됩니다.

여러 줄의 코드를 표시할 때는 <pre> 태그와 <code> 태그를 함께 사용하는 것이 좋습니다. <pre> 태그는 줄 바꿈과 공백을 유지하여 코드를 그대로 보여줍니다:

<pre>
<code>
def hello_world():
    print("Hello, world!")
</code>
</pre>

<code> 태그는 기본적으로 브라우저에서 고정 폭 글꼴로 렌더링됩니다. CSS를 사용하여 추가적인 스타일링을 적용할 수 있습니다. 예를 들어, 배경색과 글자색을 변경하려면 다음과 같이 할 수 있습니다:


<style>
code {
    background-color: #f4f4f4;
    color: #c7254e;
    padding: 2px 4px;
    border-radius: 4px;
}
</style>

이렇게 하면 <code> 태그로 감싸진 텍스트가 더욱 돋보이게 됩니다.

다양한 프로그래밍 언어의 예제를 <code> 태그로 표시해보겠습니다:

<code>
<div>Hello, HTML!</div>
</code>

<code>
body {
    background-color: #ffffff;
}
</code>

<code>
function greet() {
    console.log("Hello, JavaScript!");
}
</code>

이 글에서는 HTML <code> 태그의 기본 사용법과 다양한 활용법을 살펴보았습니다. <code> 태그는 웹 페이지에서 소스 코드를 명확하고 가독성 있게 표시하는 데 매우 유용합니다. 이를 적절히 활용하여 더욱 이해하기 쉬운 문서를 작성해보세요.