HTML var 태그 | HTML 프로그래밍 | 웹 개발

소개

<var> 태그는 HTML 에서 프로그램 또는 수학 방정식의 변수를 나타내는 데 사용됩니다. <strong> 또는 <em> 태그와 유사하게 작동하지만, 텍스트를 강조하는 대신 텍스트 콘텐츠를 변수로 표시합니다.

이 랩에서는 <var> 태그를 사용하여 HTML 파일 내에서 변수를 만드는 방법을 배우게 됩니다.

참고: index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단의 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

HTML 파일 설정

index.html이라는 새 파일을 만들고, 문서의 기본 구조를 설정하기 위해 다음 HTML 코드를 추가합니다.

<!doctype html>
<html>
  <head>
    <title>HTML Var Tag Lab</title>
  </head>
  <body>
    <h1>Creating a Variable in HTML Using the Var Tag</h1>
  </body>
</html>

`태그를 사용하여 변수 생성`

HTML 에서 변수를 생성하려면 <var> 태그를 사용해야 합니다. 다음 HTML 코드를 추가하여 문장 내에 userName이라는 변수를 생성합니다.

<p>The current user is <var>userName</var>.</p>

<var> 태그는 변수 이름 userName을 묶습니다. 이 태그는 프로그래밍 컨텍스트의 변수 또는 수학 방정식의 변수를 나타내는 데 사용될 수 있습니다.

변수 스타일 지정

<var> 태그는 기본적으로 이탤릭 스타일을 가지고 있습니다. 하지만 이 태그에 CSS 속성을 추가하여 모양을 변경할 수 있습니다. 다음 CSS 를 추가하여 변수 텍스트를 굵게 하고 밑줄을 긋습니다.

<style>
  var {
    font-weight: bold;
    text-decoration: underline;
  }
</style>

변수 값 표시

<var> 태그를 사용하여 변수 값을 텍스트로 전달하여 변수 값을 표시할 수도 있습니다. userName의 값을 표시하려면 다음 코드를 추가합니다.

<p>The current user is <var>John Doe</var>.</p>

글로벌 속성 사용

<var> 태그는 class, id, style과 같은 전역 속성 (global attributes) 을 지원합니다. 이러한 속성을 추가하여 변수 텍스트의 CSS 속성을 정의하거나 JavaScript 를 사용하여 변수에 접근할 수 있습니다. <var> 태그의 클래스 (class) 와 id 를 설정하려면 다음 코드를 추가합니다.

<p>
  The current user is <var class="user-name" id="current-user">John Doe</var>.
</p>

이벤트 속성 사용

onclick 및 onmouseover와 같은 이벤트 속성을 사용하여 변수 텍스트를 클릭하거나 마우스 오버했을 때 이벤트를 트리거할 수도 있습니다. 변수 텍스트를 클릭했을 때 알림 메시지를 표시하려면 다음 코드를 추가합니다.

<p>The current user is <var onclick="alert('User clicked!')">John Doe</var>.</p>

요약

이 랩에서는 <var> 태그를 사용하여 HTML 에서 변수를 생성하는 방법과 CSS 속성을 사용하여 변수의 스타일을 지정하는 방법을 배웠습니다. 또한 변수 값을 표시하는 방법과 태그에 전역 속성 (global attributes) 및 이벤트 속성을 사용하는 방법을 배웠습니다. 이 지식을 통해 이제 HTML 문서에서 변수를 생성하고 CSS 를 사용하여 모양을 사용자 정의할 수 있습니다.

HTML 변수 선언

소개