Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML 속성 사용법 완벽 가이드: href부터 커스텀 속성까지

가장 널리 사용되는 속성 이름과 값들을 살펴보면서 HTML 속성을 사용하는 방법을 배워보세요.

HTML 속성이란?

HTML에서 속성(attribute)은 HTML 요소에 추가 정보를 제공하거나 요소의 기본(default) 동작을 변경하는 데 사용되는 수정 도구입니다.

속성이 없는 HTML 요소는 다음과 같이 작성합니다:

<tag>Content</tag>

속성이 있는 HTML 요소는 다음과 같이 정의합니다:

<tag attribute="value">Content</tag>

이 구조를 염두에 두고, 실제 속성 예제를 몇 가지 살펴보겠습니다.

href 속성

href 속성은 HTML에서 가장 중요한 속성 중 하나입니다.

href는 다음과 같은 경우 URL을 지정하는 데 사용됩니다:

  • 하이퍼링크(흔히 "링크"라고 부릅니다)
  • 스타일이나 스크립트 같은 외부 리소스 가져오기

href의 가장 일반적인 용도는 앵커(anchor) 요소인 <a>에 링크 URL을 추가하는 것입니다:

<a href="url-path">Link text</a>

이러한 링크를 통해 사용자는 한 페이지에서 다른 페이지로 클릭하여 이동할 수 있습니다. 이동 대상은 같은 웹사이트/도메인 내부(내부 링크)일 수도 있고, 다른 웹사이트 도메인(외부 링크)일 수도 있습니다.

내부 링크

내부 링크는 상대 경로(relative path)를 사용합니다:

<a href="/">Home</a>

표준에 따라 "/"는 모든 웹사이트의 첫 페이지, 즉 index.html 페이지로 연결됩니다.

예를 들어 About이라는 페이지와 그에 해당하는 about.html 문서가 있다면, 다음과 같이 내부 링크를 만들 수 있습니다:

<a href="/about">About</a>

이 링크는 사이트의 About 페이지로 연결됩니다.

외부 링크

외부 링크에는 절대 경로(absolute path)가 필요합니다:

<a href="https://www.youtube.com">Go to YouTube.com</a>

target 속성

앵커 요소를 다루고 있으니, 또 하나의 중요한 앵커 요소 속성인 target 속성도 살펴보겠습니다.

target 속성은 사용자가 링크를 클릭했을 때 링크를 어디에서 열지 지정합니다.

예를 들어 아래 외부 링크를 클릭하면 현재 보고 있는 브라우저 탭의 같은 창에서 YouTube.com으로 이동합니다:

<a href="https://www.youtube.com/">Go to YouTube.com</a>

이런 동작이 발생하는 이유는 기본적으로 <a> 요소에 값이 _self인 target 속성이 적용되어 있기 때문입니다. 즉, href에 지정된 링크를 사용자가 현재 있는 같은 창에서 연다는 의미입니다.

따라서 다음 링크 요소는:

<a href="https://www.youtube.com/"></a>

브라우저가 다음과 같이 해석합니다:

<a href="https://www.youtube.com/" target="_self"></a>

그렇다면 링크를 새 브라우저 탭에서 열고 싶다면 어떻게 해야 할까요?

간단합니다. 기본값인 _self를 _blank 값으로 재정의하면 됩니다:

<a href="https://www.youtube.com" target="_blank" rel="noopener"
  >Go to YouTube.com (opens in a new tab)</a
>

이제 YouTube 링크는 새 브라우저 탭에서 열립니다.

앵커/링크 요소에 대해 더 자세히 알아보세요.

값 없이 사용하는 속성

속성은 일반적으로 속성 이름과 속성 값으로 구성됩니다. 앞서 본 앵커 요소 예제처럼 말이죠.

하지만 때로는 그 값(동작)이 속성 이름 자체에 내장되어 있는 경우도 있습니다.

예를 들어 HTML <script> 요소를 수정하는 defer 속성을 보겠습니다:

<script defer src="app.js"></script>

defer 속성에는 할당 연산자(=)나 값이 없다는 점에 주목하세요. 동작이 이미 이름에 내장되어 있기 때문입니다.

defer는 소위 boolean(불리언) 속성입니다. 불리언은 true 또는 false(혹은 활성화/비활성화) 두 가지 값만 가질 수 있는 데이터 유형입니다.

defer 속성을 좀 더 자세히 살펴보겠습니다.

defer 속성이 없는 다음 <script> 요소는 브라우저가 로드하는 즉시 app.js에 담긴 JavaScript 코드를 실행합니다:

<script src="app.js"></script>

기본적으로 HTML 문서는 위에서 아래로, 한 줄씩 순서대로 해석(parsing)됩니다. 따라서 문서 상단에 JavaScript를 배치하면 나머지 문서의 해석이 끝나기 전에 해당 코드가 먼저 실행됩니다.

이것이 script 요소의 기본 동작입니다.

하지만 <script> 요소에 defer를 추가하면 이 기본 동작이 비활성화됩니다:

<script defer src="app.js"></script>

이제 JavaScript 코드는 전체 페이지 로딩이 완료된 후에야 실행됩니다.

말 그대로 defer는 '미루다/연기하다/기다리다'라는 뜻입니다.

다시 한번 강조하면:

  • defer가 없으면 JavaScript는 로드되는 즉시 실행됩니다.
  • defer가 있으면 JavaScript는 전체 HTML 페이지가 로드될 때까지 실행을 미룹니다.

속성이 처음에는 헷갈릴 수 있지만 걱정하지 마세요. 실제로 직접 사용해 보면 훨씬 쉽게 이해됩니다.

커스텀(사용자 정의) 속성

직접 커스텀 속성을 만들어 JavaScript로 제어할 수도 있습니다. 커스텀 속성 이름 앞에는 반드시 data- 접두사를 붙여야 합니다:

<tag data-custom-attribute-name="value">Content</tag>

예를 들어 "Apple"이라는 음식 요소가 있다고 가정해 봅시다. 사용자가 이 요소를 클릭하면 팝업 대화상자에 이 음식의 종류를 표시하고 싶습니다.

이를 위해 food-type이라는 커스텀 속성(data- 접두사를 잊지 마세요!)을 만들고, 텍스트 Apple이 들어 있는 <div> 요소에 추가합니다:

<div onclick="showDetailsBox(this)" id="apple" data-food-type="fruit">
  Apple
</div>

그리고 이 기능을 작동하게 만드는 JavaScript 코드입니다:

function showDetailsBox(food) {
  const foodType = food.getAttribute("data-food-type")
  alert(food.innerHTML + " is a " + foodType)
}

HTML 코드의 작동 원리:

  • 먼저 <div> 요소에 onclick 속성을 추가했습니다. 이벤트 속성으로, 클릭 이벤트를 감지하는 이벤트 리스너를 연결합니다.
  • 그다음 onclick 속성 값으로 showDetailsBox(this)를 지정했습니다.
  • showDetailsBox()는 Apple 텍스트 요소를 클릭하는 즉시 호출되는 JavaScript 함수 이름입니다.
  • (this)의 this는 자신이 속한 객체를 참조하는 인수입니다(초보자에게는 다소 어려운 개념이니 지금은 이해하지 못해도 괜찮습니다).
  • id는 HTML 요소에 고유 식별자를 부여하는 내장 HTML 속성입니다. 여기서는 고유 id가 apple입니다.

JavaScript 코드의 작동 원리는 이 HTML 튜토리얼의 범위를 벗어나므로 간단히 설명하겠습니다.

onclick 이벤트 속성에 의해 showDetailsBox() 함수가 호출되면, 함수의 코드 블록 { ... } 내용이 실행됩니다:

function showDetailsBox(food) {
  ...
}

코드 블록의 첫 번째 줄에서 JavaScript는 커스텀 속성 data-food-type을 가진 HTML 요소를 선택하고, 그 속성 값을 foodType이라는 변수에 할당합니다:

function showDetailsBox(food) {
  const foodType = food.getAttribute("data-food-type")
  ...
}

두 번째 줄에서는 내장 메서드인 alert()을 실행해 팝업 대화상자를 띄우고, foodType 변수의 값, 즉 fruit를 표시하도록 합니다:

function showDetailsBox(food) {
  const foodType = food.getAttribute("data-food-type")
  alert(food.innerHTML + " is a " + foodType)
}

위 코드 예제가 완전히 이해되지 않더라도 걱정하지 마세요. 특히 초보자에게는 받아들일 내용이 많습니다. 연습하다 보면 자연스럽게 이해될 것입니다!

HTML 속성에 대한 더 자세한 정보는 MDN 웹 문서의 HTML 속성 참고 문서를 참고하기를 권합니다.

중요:
화면에 표시되고 접근 가능해야 하는 중요한 콘텐츠를 data 속성 안에 저장하지 마세요. 보조 기술(assistive technology)이 data 속성에 접근하지 못하는 경우가 있고, 검색 크롤러도 data 속성 값을 색인하지 않을 수 있습니다. 따라서 SEO에 중요한 콘텐츠를 여기에 넣지 않는 것이 좋습니다.