<code> 태그의 정의 및 사용법

<code> 태그는 컴퓨터 코드의 일부를 나타냅니다.
한 줄로 된 코드나 짧은 코드 조각 등에 적용하며, 대부분의 브라우저에서 기본적으로 고정폭(monospace) 글꼴로 텍스트를 표시합니다.

코드 스니펫, HTML 태그, CSS 속성, 명령어, 함수 이름, 문법 등
짧은 코드 조각이나 인라인 코드를 표현하는 데 사용됩니다.

부연설명
'인라인 코드'란 문장 안에 포함되어 다른 텍스트와 함께 표시되는 코드 조각을 의미합니다.

예제

다음은 <code> 태그의 사용 예제입니다.

코드 스니펫

코드 스니펫은 짧은 코드 조각을 의미합니다. 예를 들어, 특정 프로그래밍 언어의 기능을 간단히 보여줄 때 사용됩니다.

HTML 
<p>
    파이썬에서 문자열을 출력하는 코드는
    <code>print("Hello, World!")</code>입니다.
</p>
실제 적용된 모습

<code> 태그는 대부분의 브라우저에서 기본적으로 글꼴(font-family 속성)이 고정폭(monospace) 글꼴로 텍스트를 표시합니다.

HTML 태그

HTML 태그는 웹 페이지에서 요소를 정의하는 마크업 언어의 구문입니다. <code> 태그를 사용하여 실제 HTML 태그를 보여줄 수 있습니다.

HTML 
<p>
    HTML에서 특정 시간 또는 날짜는
    <code>&lt;time&gt;</code> 태그를 사용합니다.
</p>

코드 부연설명
time 앞뒤의 < 기호와 >는 HTML에서는 태그의 시작과 끝을 나타내는 예약된 문자입니다.
이 두 기호를 대신해서 특수문자를 사용(&lt;, &gt;)했습니다. HTML 특수 문자 사용법과 의의를 참조하세요.

실제 적용된 모습

CSS 속성

CSS 속성은 웹 페이지의 스타일을 정의하는 코드입니다. <code> 태그는 CSS 코드를 설명하거나 보여줄 때 유용합니다.

HTML 
<p>
    텍스트 색상을 빨간색으로 변경하려면
    <code>color: red;</code> CSS 속성을 사용할 수 있습니다.
</p>
실제 적용된 모습

명령어

명령어는 컴퓨터나 터미널에서 실행하는 명령을 의미합니다. 터미널 명령어도 <code> 태그로 표현할 수 있습니다.

HTML 
<p>
    파일 목록을 확인하려면
    터미널에서 <code>ls</code> 명령어를 입력하세요.
</p>
실제 적용된 모습

함수 이름

함수 이름은 프로그래밍에서 특정 작업을 수행하는 코드 블록을 호출할 때 사용됩니다. <code> 태그로 함수 이름을 나타낼 수 있습니다.

HTML 
<p>
    PHP에서 문자열 길이를
    반환하는 함수는 <code>strlen()</code>입니다.
</p>
실제 적용된 모습

문법

문법은 프로그래밍 언어에서 코드의 구조와 규칙을 의미합니다. 문법 설명에도 <code> 태그를 사용합니다.

HTML 
<p>
    JavaScript에서 조건문은
    <code>if (condition) { // code }</code> 형식으로 작성됩니다.
</p>
실제 적용된 모습

사용 팁

<code> 태그와 관련된 유용한 팁을 소개합니다.
CSS를 활용한 스타일링 방법, <code>와 <var> 태그의 차이점, 그리고 여러 줄의 코드를 표현하는 방법에 대해 알아보겠습니다. 이 정보를 통해 웹 페이지에서 코드 표현을 보다 효과적으로 사용할 수 있습니다.

CSS 활용

<code> 태그는 대부분의 브라우저에서 기본적으로 고정폭(monospace) 글꼴로 텍스트를 표시되지만, CSS를 이용해 스타일을 조정할 수 있습니다. 예를 들어, 배경색을 변경하거나 텍스트 색상을 설정할 수 있습니다.

CSS 
code {
    background-color: #f4f4f4;
    color: #d63384;
    padding: 2px 4px;
    border-radius: 4px;
}
HTML 
<p>
    여기에서 <code>background-color</code> 속성을 사용하여
    CSS를 적용할 수 있습니다.
</p>
실제 적용된 모습

<code>와 <var> 태그의 차이점

<code>와 <var> 태그는 둘 다 코드나 변수를 표현하는 데 사용되지만, 각각의 목적과 의미가 다릅니다.

<code> 태그

코드 스니펫, HTML 태그, CSS 속성, 명령어, 함수 이름, 문법 등을 나타내는 데 사용됩니다.
즉, 코드의 일부분임을 나타냅니다.

<var> 태그

수학 공식이나 프로그래밍 문맥에서 변수나 상징적인 값을 나타낼 때 사용됩니다.
즉, 코드나 수학 공식 등의 변수만을 나타냅니다.

HTML 
<p>수학 공식에서 <var>a</var>는 <var>b</var>와 <var>c</var>의 합입니다.</p>
실제 적용된 모습

대부분의 브라우저에서는 <var> 태그의 글꼴 스타일(font-style)을 이탤릭체(italic)로 표현합니다.

여러 줄의 코드를 나타내려면 <pre> 태그로

<code> 태그는 짧은 코드 조각이나 인라인 코드를 표현하는 데 사용됩니다.

반면에, <pre> 태그는 코드의 공백과 줄바꿈을 그대로 유지하면서 여러 줄에 걸친 코드를 보여주기 위해 사용됩니다.

여러 줄의 코드 블록을 나타내려면 <code> 태그를 <pre> 태그로 감싸세요.

부연설명
<pre> 태그는 작성한 서식을 유지한 텍스트 블록을 나타낼때 사용합니다.
즉, 이 태그를 사용하면 들여쓰기, 줄바꿈, 공백 등 작성한 그대로의 원본 서식이 브라우저에 표시됩니다.

HTML 
<pre><code>
    function greet(name) {
        console.log("Hello, " + name + "!");
    }
</code></pre>
실제 적용된 모습

브라우저 호환성

code 태그의 브라우저 호환성
태그
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<code> 1 12 1 4

명세서

code 태그의 명세서 사양
명세서 사양
<code> HTML Standard
#the-code-element

참고문헌

같이 보기