Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML 태그 완벽 가이드 – 코드 서식 지정 방법

HTML의 <code> 태그는 웹 문서 안에서 프로그래밍 코드를 표시하고 서식을 지정할 때 사용하는 인라인 요소입니다. 예를 들어, Java나 C++ 같은 소스 코드를 웹페이지에 삽입하면서 가독성 있게 정렬하고 싶다면 <code> 요소를 활용하면 됩니다.

<code> 태그는 기본적으로 고정폭(monospace) 글꼴로 렌더링되기 때문에 일반 본문과 시각적으로 구분되며, 짧은 코드 조각이나 명령어를 강조할 때 특히 유용합니다.

그럼 실제로 HTML에서 <code> 요소를 어떻게 사용하는지 예제를 통해 살펴보겠습니다.

예제

<!DOCTYPE html>
<html>
<body>
<h1>Header Files</h1>
<h2>C++</h2>
<code>
    #include <iostream>
</code>
<h2>C</h2>
<code>
    #include <stdio>
</code>
</body>
</html>

실행 결과

HTML code 태그 완벽 가이드 – 코드 서식 지정 방법

예제 분석

위 예제에서는 웹페이지에 C와 C++의 헤더 파일을 나타내는 간단한 코드 조각을 작성했습니다. 핵심 부분은 다음과 같습니다.

<h2>C++</h2>
<code>
    #include <iostream>
</code>

헤더 파일 선언문인 #include <iostream>이 <code> 요소 내부에 배치되어 있으며, 이 덕분에 해당 코드가 고정폭 글꼴로 서식화되어 화면에 출력됩니다.

<code>
    #include <iostream>
</code>

참고 사항

여러 줄로 된 긴 코드 블록을 표시할 때는 <code> 태그를 <pre> 태그와 함께 사용하는 것이 좋습니다. <pre>는 공백과 줄바꿈을 그대로 유지해 주므로, 두 태그를 조합하면 원본 코드의 들여쓰기와 구조를 그대로 보존할 수 있습니다.