HTML에서 자주 쓰이는 전역 속성

HTML에는 모든 엘리먼트를 대상으로 사용할 수 있는 속성이 존재하는데요. 이를 전역 속성(global attribute)이라고 합니다. 이번 포스팅에서는 HTML에서 자주 사용되는 전역 속성에 대해서 알아보겠습니다.

style

아무래도 많은 분들에게 가장 익숙한 HTML 전역 속성은 style일 것입니다. style 속성은 해당 엘리먼트에 인라인으로 CSS 스타일을 선언하고 싶을 때 사용합니다.

<p style="background: yellow;">
  <span style="color: navy;">홍길동</span>님, 안녕하세요.
</p>

class

두번째로 살펴볼 HTML 전역 속성은 class인데요. HTML 문서 상에서 여러 엘리먼트를 하나의 이름으로 묶고 싶을 때 사용합니다.

예를 들어, CSS에서 클래스 선택자로 dark와 light에 클래스에 대한 스타일을 선언해놓고,

.dark {
  background: black;
  color: white;
}

.light {
  background: white;
  color: black;
}

다음과 같이 여러 <ol> 엘리멘트에 dark 또는 light에 클래스를 지정하여 다른 스타일을 적용할 수 있습니다.

<ul>
  <ol class="light">오전 9시<ol>
  <ol class="light">오전 11시<ol>
  <ol class="light">오후 2시<ol>
  <ol class="dark">오후 6시<ol>
  <ol class="dark">오후 8시<ol>
</ul>

id

id 전역 속성은 class 속성과 달리 HTML 문서 상에서 하나의 엘리먼트에 유일한 이름을 부여하고 싶을 때 사용합니다. CSS로 스타일을 할 때 class 속성 만큼 흔히 쓰이지는 않지만 특정 엘리먼트 대상으로 도드라진 스타일을 적용할 시 종종 볼 수 있는 전역 속성입니다.

<h1 id="title">The most exciting paragraph on the page. One of a kind!</h1>

#title {
  font-size: 2rem;
}

tabindex

tabindex 전역 속성은 키보드의 탭키를 사용하여 웹페이지를 탐색할 때 엘리먼트에 포커스가 가능한지 여부와 포커스가 잡히는 순서를 제어하기 위해서 사용됩니다.

예를 들어, 원래 탭키로 포커스가 가능한 요소를 대상으로 tabindex="-1"을 설정해주면 탭으로 포커스가 불가능해집니다. 반대로 원래 탭키로 포커스가 불가능한 요소를 대상으로 tabindex="0"을 설정해주면 탭으로 포커스가 가능해집니다.

<label>원래 탭키로 포커스가 가능한 요소:<input /></label>
<label>탭키로 포커스가 불가능해진 요소:<input tabindex="-1" /></label>
<div>원래 탭키로 포커스가 불가능한 요소</div>
<div tabindex="0">탭키로 포거스가 가능해진 요소</div>

이 밖에도 tabindex 속성에 양수값을 지정하여 탭키로 포커스가 가능한 요소 중에서 어떤 요소에 먼저 포커스가 이동할지도 설정할 수 있는데요. 웹 접근성(accessibility) 측면에서 매우 주의해서 사용해야하는 기능으로 좀 더 자세한 내용은 관련 포스팅을 참고 바랍니다.

title

엘리먼트에 title 전역 속성을 지정하면 마우스를 해당 엘리먼트 위에 올려놓았을 때 툴팁(tooltip)이 표시됩니다.

웹 접근성(accessibility) 향상을 위해서도 많이 사용되는데요.

예를 들어, 다음과 같은 아이콘 버튼에 title 속성을 지정해주면 스크린 리더가 해당 버튼의 목적을 정확하게 인식할 수 있도록 도움을 줄 수 있습니다.

<button title="닫기"><i class="fa fa-close"></i></button>

data-xxx

마지막으로 살펴볼 data-xxx 전역 속성은 HTML에 정의되지 않은 커스텀(custom) 속성을 사용하고 싶을 때 사용합니다. data-xxx 속성으로 지정한 속성값은 일반적으로 자바스크립트로 접근하여 다양하게 활용됩니다.

<button data-testid="search-button">검색</button>

마치면서

전역 속성은 HTML의 모든 엘리먼트에서 활용이 가능하기 때문에 한 번 정리해두면 두고두고 유용할 것입니다. 본 포스팅에서 다룬 속성 외에도 HTML에는 의외로 많은 전역 속성이 있는데요. 모든 전역 속성에 대해서 알고 싶은신 분은 관련 MDN 매뉴얼인 Global attributes도 한 번 둘러보시기 바랍니다.