Logo

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에서 클래스 선택자로 darklight에 클래스에 대한 스타일을 선언해놓고,

.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도 한 번 둘러보시기 바랍니다.