본문 바로가기
Reference/HTML

code 태그는 소스 코드를 표현할 때 설정합니다.

by @webstoryboy 2022. 11. 22.

code 태그는 소스 코드를 표현할 때 설정합니다.

Reference/HTML

<code> 태그는 소스 코드를 표현할 때 설정합니다.

by @webs 2022. 11. 15.

<code>

<code> 태그는 소스 코드를 표현할 때 설정합니다. 코드를 표현할 때에는 공백도 표현되어야 하기 때문에 <pre> 태그와 같이 사용하게 됩니다.


특징 설명
요소 인라인 요소(Inline Element)
닫는 태그 적용
버전 HTML4
시각적 표현 monospace 폰트로 표현
사용성 ★★★☆☆

정의(Definition)

  • <code> 태그는 소스 코드를 표현할 때 설정합니다.
  • <code> 태그는 브라우저의 기본 글꼴 및 고정 폭으로 표현됩니다. CSS를 설정하면 기본 글꼴은 무시됩니다.
  • <code> 태그는 사용시 화면 공백을 그대로 표현하기 위해서 <pre> 태그와 같이 사용합니다.

코드와 관련된 태그 및 속성

  • <code> 태그는 소스 코드를 표현할 때 설정합니다.
  • <var> 태그는 수학적인 변수나 프로그램의 변수를 표현할 때 설정합니다.
  • <samp> 태그는 프로그램 출력 결과물을 표현할 때 설정합니다.
  • <kbd> 태그는 키보드 입력요소를 표현할 때 설정합니다.

속성(Property)

속성 값(예) 설명 버전
글로벌 속성 accesskey accesskey = "a" 키보드 단축키 힌트를 제공합니다. -
autocapitalize autocapitalize = "off" 텍스트를 자동으로 대문자로 변환할지 여부를 설정합니다. -
autofocus autofocus 문서가 로딩되면 해당 요소에 포커서를 설정합니다. -
contenteditable contenteditable = "true" 사용자가 콘텐츠를 편집할 수 있는지 설정합니다. -
class class = "className" 클래스 이름을 설정합니다. -
data-* data-name = "name" 사용자가 지정하여 속성을 설정할 수 있습니다. -
dir dir = "rtl" 요소 글씨의 방향을 설정합니다. -
draggable draggable = "true" 드래그 사용할 수 있는지 설정합니다. -
enterkeyhint enterkeyhint = "next" 엔터 키에 대한 힌트를 설정합니다. -
hidden hidden 요소를 숨김 처리할 수 있습니다. hidden 요소는 렌더링하지 않습니다. -
id id = "name" 고유 식별자 아이디를 설정합니다. CSS나 Script에서 사용합니다. -
inputmode inputmode = "email" 브라우저가 제공해야 하는 가상 키보드 설정을 알려줍니다 -
itemid itemid = "name" 아이템 요소의 고유 식별자 아이디를 설정합니다. -
itemprop itemprop = "name" 아이템 요소의 고유 식별자 속성을 설정합니다. -
itemref itemref = "name" 아이템 요소의 고유 식별자를 연결합니다. -
itemscope itemscope 아이템 요소의 범위를 설정합니다. -
lang lang = "ko" 요소의 언어를 설정합니다. -
spellcheck spellcheck = "true" 요소의 맞춤법 검사 여부를 설정합니다. -
style style = "margin: 0" 요소의 적용할 CSS 속성을 설정합니다. -
tabindex tabindex = "0" 요소의 탭 인덱스를 설정합니다. -
title title = "titleName" 요소의 타이틀을 설정합니다. -
translate translate = "no" 요소의 번역 여부를 설정합니다. -

예제1(Sample)

코드와 관련된 예제입니다.

  • .prevUntil()는 선택한 요소의 이전에 위치한 요소를 조건에 맞을 때까지 찾습니다.
  • 직각 삼각형의 두 직각변 a, b를 각각 한 변으로 하는 정사각형 면적의 합은 빗변 c를 한 변으로 하는 정사각형의 면적과 같습니다. 이를 피타고라스 정리라고 합니다.
  • 키보드를 찾을 수 없습니다. 계속 하실려면 F1을 눌러주세요.
  • 에디터에서 줄 복사 단축키는 Ctrl + D입니다.
HTML
CSS
SCRIPT
<ul>    
<li><code>.prevUntil()</code>는 선택한 요소의 이전에 위치한 요소를 조건에 맞을 때까지 찾습니다.</li>
<li>직각 삼각형의 두 직각변 <var>a</var>, <var>b</var>를 각각 한 변으로 하는 정사각형 면적의 합은 빗변 <var>c</var>를 한 변으로 하는 정사각형의 면적과 같습니다. 이를 피타고라스 정리라고 합니다.</li>
<li>키보드를 찾을 수 없습니다. 계속 하실려면 <samp>F1</samp>을 눌러주세요.</li>
<li>에디터에서 줄 복사 단축키는 <kbd>Ctrl</kbd> + <kbd>D</kbd>입니다.</li>
</ul>
.sampleView a,
.sampleView code,
.sampleView var,
.sampleView samp,
.sampleView kbd {
color: #FF4B4C;
border-bottom: 1px solid #FF4B4C;
}
//Javascript none

예제2(Sample)

코드를 보여주는 예제입니다.

document.querySelectorAll("#sample1 .sampleBtn3 a").forEach(btn => {
    btn.addEventListener("click", (e)=> {
        const text = btn.innerText;
        document.querySelectorAll("#sample1 .text-box .box").forEach(box => {
            box.setAttribute("style", text);
        })
    })
});
HTML
CSS
SCRIPT
<pre><code>
    document.querySelectorAll("#sample1 .sampleBtn3 a").forEach(btn => {
        btn.addEventListener("click", (e)=> {
            const text = btn.innerText;
            document.querySelectorAll("#sample1 .text-box .box").forEach(box => {
                box.setAttribute("style", text);
            })
        })
    });
</code></pre>
/* css none */
//Javascript none

호환성(Compatibility)

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
<code>

참고(Reference)


댓글