var element - by. UXKM

2025-05-16

요약 설명
<var> 요소는 수학식이나 프로그래밍 코드에서 변수(variable)를 나타내는 시맨틱 태그로, 텍스트 내에서 변수명, 사용자 정의 식별자, 수식의 미지수 등을 표현할 때 사용됩니다.
브라우저는 기본적으로 기울임체로 렌더링하며, 일반 텍스트와 변수 표현을 의미적으로 구분하기 위해 활용됩니다. 수학적 의미뿐만 아니라 코드 문서에서 파라미터나 변수명을 명확히 전달할 때 적합한 태그입니다.

주요 역할 및 특징

가변적인 값을 표현
- <var>는 변수명, 함수 인수, 수학 방정식의 미지수 등 변할 수 있는 값을 나타냅니다.
- 예: 수학 공식 E = mc²에서 m과 c를 <var>로 표현.
의미론적 역할
- <var>는 단순한 스타일링 요소가 아니라, 텍스트가 "변수"임을 의미론적으로 나타냅니다.
- 코드나 수학식의 가독성을 높이고 구조적으로 명확히 표현합니다.
브라우저 렌더링
텍스트는 기본적으로 이탤릭체(font-style: italic;)로 표시됩니다.
다른 요소와의 관계
- <var>는 변수명을 강조하는 데 사용되며, 코드 전체를 표현할 때는 <code>와 함께 사용하는 것이 적합합니다.
- 예: let <var>x</var> = 10;.
CSS로 스타일링 가능
기본 스타일 외에도 CSS로 폰트 스타일, 색상 등을 자유롭게 변경할 수 있습니다.

CSS 기본 값

<var> 요소는 기본적으로 인라인 레벨 요소이며, 별도의 CSS를 지정하지 않아도 아래와 같은 기본값이 적용됩니다.

							var {
								display: inline;
								font-style: italic;
							}

기본 문법

							<var>변수 이름</var> <!-- 기본 문법 -->

속성

<var> 요소는 고유 속성을 가지지 않으며, 글로벌 속성(class, id, style, aria-*, data-* 등)만 사용할 수 있습니다.

예제

수학 공식

코드에서 변수 표현

CSS로 스타일링된 변수

접근성을 고려한 변수

								<p>
									수학식에서 <var aria-label="변수 a">a</var>와 <var aria-label="변수 b">b</var>는 미지수입니다.
								</p>

주의사항

<var>는 반드시 변수나 가변적인 값을 나타낼 때만 사용해야 하며, 단순히 이탤릭체 스타일을 적용하기 위해 사용해서는 안 됩니다.
<var>는 특정 맥락에서 "변수"라는 의미를 전달하므로, 문맥과 맞지 않는 경우 사용을 피해야 합니다.