HTML meter 태그 요소 사용 방법 (CSS 커스터마이징)

포트폴리오에서 자신의 프로그램 능력을 보여주는 그래프라던지 어떤 통계에 대한 막대그래프 표현을 하고자 할 때 HTML 태그 중 이 녀석을 사용하면 상당히 요긴합니다. 바로 오늘의 주인공인 <meter> 태그입니다. 이 태그는 별도의 CSS나 자바스크립트의 도움 없이 태그 사용만으로 간단하게 막대 그래프를 표현할 수 있는 매우 유용한 요소 중 하나입니다.

과거 싸이월드 시절, 미니홈피 오른쪽 상단에는 이런게 있었습니다. 203040 여러분들은 기억하실겁니다. 연예인 싸이월드 미니홈피를 들어가보면 이 막대그래프의 수치가 장난 없습니다. 미친듯 치솟습니다. 스크랩과 즐겨찾기 개수가 어마무시했죠. 아무튼 저런 막대기를 매우 쉽고 간편하게 표현할 수 있는 것입니다.

HTML 사용 방법

See the Pen <meter> Tag CSS Customizing by rgy0409 (@rgy0409) on CodePen.

위의 예제를 살펴보시면 <meter> 태그가 어떻게 사용되고 있는지 쉽게 파악할 수 있습니다. CSS에 주석으로 각 옵션이 어떻게 적용하는지도 간단히 언급했으니 이해가 더 쉬울 것입니다. 먼저 태그의 각 옵션에 대해 설명하겠습니다.

기본 형태

<meter>태그는 다음과 같은 형태를 취하고 있습니다.

<meter min="0" max="100" low="30" high="79" optimum="100" value="90"></meter>

이렇게 되어있죠. 각 옵션에 대한 설명은 다음과 같습니다.

min : 전체 영역의 최소 수치

max : 전체 영역의 최대 수치

low : 최소값.

high : 최대값.

optimum : 최적값. value가 이 값과 거의 비슷하거나 같으면 최적 상태의 색상 그래프를 출력함 (색상은 #1E7E17)

value : 막대그래프를 나타내는 실제 값

이 정도로 이해하시면 될 것 같습니다. 추가 설명은 계속 이어나가겠습니다.

<meter min="0" max="100" low="30" high="79" optimum="100" value="20"></meter>
<meter min="0" max="100" low="30" high="79" optimum="100" value="50"></meter>
<meter min="0" max="100" low="30" high="79" optimum="100" value="90"></meter>
<meter min="0" max="100" low="30" high="79" optimum="20" value="20"></meter>
<meter min="0" max="100" low="30" high="79" optimum="20" value="50"></meter>
<meter min="0" max="100" low="30" high="79" optimum="20" value="90"></meter>
<meter min="0" max="100" low="30" high="79" optimum="50" value="20"></meter>
<meter min="0" max="100" low="30" high="79" optimum="50" value="50"></meter>
<meter min="0" max="100" low="30" high="79" optimum="50" value="90"></meter>

여기 9개의 meter 태그가 있습니다. 보편적으로 min은 0을, max는 100을 사용합니다. 0~100% 라는 의미입니다. 입력한 value값이 low값보다 작으면 가장 최소에 대한 막대 색상이, high값보다 크면 최대에 대한 막대 색상이 표현됩니다. 물론 이건 optimum의 값에 따라 달라집니다. optimum은 최적이라는 의미입니다. 즉 optimum값과 value값이 거의 근사치인 경우에 최대치에 대한 색상이 표현되는 것입니다. 위의 태그대로 값을 조절한 결과의 그래프는 다음과 같습니다.

See the Pen <meter> Tag Basic by rgy0409 (@rgy0409) on CodePen.

이렇게 출력됩니다. 보시면 optimum 값과 value값이 거의 비슷한 수준으로 일치하게 되면 최적 상태의 색상으로 표시가 된다는것을 알 수 있습니다. 이 점만 잘 유념한다면 원하는대로 막대 그래프 수치 조절 및 색상 표현을 할 수 있을 것입니다. 값이 높을수록 우수한다는것을 알리는 성적표의 경우 meter 태그를 사용해 표현한다면 optimum 값은 100으로 만들어야 할 것입니다. 이때 주의해야 할 것은 max값도 100이여야 할 것입니다. 시험 점수 100점을 기준으로 한다면요. 그리고 value는 시험 성적 점수대로 입력하면 될 것입니다.

CSS 제어 방법

이제 CSS에서 다음의 옵션을 통해 meter 태그를 커스터마이징 할 수 있습니다. 첫번째 예시의 CSS에는 다음의 옵션들이 있습니다.

meter::-webkit-meter-bar ▶ meter의 바를 커스터마이징 합니다. 길이, 높이, 테두리 두께 및 색상 설정, 모서리 둥글기 설정, 그래프 안쪽 백그라운드 색상 등을 설정합니다.

meter::-webkit-meter-even-less-good-value ▶ meter의 최적값에서 많이 부족한 색상을 설정합니다.

meter::-webkit-meter-suboptimum-value ▶ meter의 최적값에 근접한 색상을 설정합니다.

meter::-webkit-meter-optimum-value ▶ meter의 최적값 색상을 설정합니다.

예제를 살펴보시면 meter 태그를 직접 선택해 CSS 옵션을 부여하고 있음을 알 수 있습니다. 그렇다면 meter::-webkit-meter-bar의 세로값과 그냥 meter 태그의 세로값은 무슨 차이일까요? 이것은 아래의 예제를 통해 확인할 수 있습니다.

See the Pen Untitled by rgy0409 (@rgy0409) on CodePen.

보시면 아시겠지만 첫번째의 meter태그는 해당 태그 자체적으로 height 값을 입력했습니다. 기본적으로 meter 태그는 막대 그래프 외에 약간의 padding 값을 기본적으로 가지고 있습니다. 따라서 태그 자체에 height값을 부여하면 padding 영역을 포함한 모든 영역의 세로 크기가 커집니다. 그런데 두번째의 meter는 위에서 설명한 ::-webkit-meter-bar 방법을 사용했습니다. 이 pseudo class (가짜 클래스)를 사용하면 순수 막대 그래프의 세로 크기만을 변경할 수 있습니다. 이 차이가 있으니 그래프 사이의 공간을 적당히 띄워가며 그래프의 세로 크기를 변경하려면 그냥 meter 태그 자체적인 height 값을 손보면 될 것입니다. 하지만 이렇게되면 세로 크기가 커질수록 공백도 커집니다. 그러니 가짜 클래스를 사용해 동시에 제어하는것이 훨씬 이뻐질 것입니다. 끝.