var 태그는 수학적인 변수나 프로그램의 변수를 표현할 때 설정합니다.

var 태그는 수학적인 변수나 프로그램의 변수를 표현할 때 설정합니다.

Reference/HTML

<var> 태그는 수학적인 변수나 프로그램의 변수를 표현할 때 설정합니다.

by @webs 2022. 11. 15.

<var>

<var> 태그는 수학적인 변수나 프로그램의 변수를 표현할 때 설정합니다.

---

특징	설명
요소	인라인 요소(Inline Element)
닫는 태그	적용
버전	HTML4
시각적 표현	이탤릭체
사용성	★☆☆☆☆

정의(Definition)

• <var> 태그는 수학적인 변수나 프로그램의 변수를 표현할 때 설정합니다.
• 기울임체 사용을 위한 <var> 요소 설정은 적절하지 않습니다. 기울기를 위함이라면 CSS 속성을 설정합니다.

코드와 관련된 태그 및 속성

• <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)

수학과 관련된 예제입니다.

질량 에너지 등가는 모든 질량은 그에 상당하는 에너지를 가지고 그 역 또한 성립한다. 모든 에너지는 그에 상당하는 질량을 가진다는 개념으로, 1905년 아인슈타인이 발표하였다. 특수 상대성이론에서 다음과 같은 같은 질량-에너지 등가 관계식으로 나타난다. E = m c²
출처 : 위키백과

HTML

CSS

SCRIPT

<p>
    질량 에너지 등가는 모든 질량은 그에 상당하는 에너지를 가지고 그 역 또한 성립한다.
    모든 에너지는 그에 상당하는 질량을 가진다는 개념으로, 
    1905년 아인슈타인이 발표하였다. 
    특수 상대성이론에서 다음과 같은 같은 질량-에너지 등가 관계식으로 나타난다.
    <var>E</var> = <var>m</var> <var>c</var><sup>2</sup><br>
    출처 : 위키백과
</p>

.sampleView a,
.sampleView code,
.sampleView var,
.sampleView samp,
.sampleView kbd {
    color: #FF4B4C;
    border-bottom: 1px solid #FF4B4C;
}

//Javascript none

호환성(Compatibility)

						6	7	8	9	10	11
<var>	○	○	○	○	○	○	○	○	○	○	○	○	○	○

참고(Reference)

• https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-var-element

---