HTML5 측정기 사용 및 스타일 지정 [안내]

얼마나 많은 액티비티가 수행되었는지를 보여주는 HTML 진행률 막대에 익숙하다면, 미터 요소는 그 둘과 비슷하다는 것을 알게 될 것입니다 최대 값의 현재 값을 보여준다.. 그러나 진행률 막대와 달리 진행률을 표시하는 데는 미터 막대를 사용하면 안됩니다..

이것은 특정 범위의 정적 값, 예를 들어, 디스크 공간에 채워지는 양과 채워지지 않은 공간의 양을 표시하여 디스크 저장 영역에 사용 된 저장 영역 공간을 나타낼 수 있습니다.

또한 미터 요소를 사용하여 범위 내에서 최대 세 개의 영역을 시각화 할 수 있습니다. 저장 공간 예제를 다시 사용하면 얼마나 많은 공간이 사용되었는지 표시하는 대신 점유 공간이 희소하게 채워지는지 (30 % 이하로 말할 수 있는지) 또는 절반 가까이 (30-60 % 사이) 또는 그 이상 다른 색상을 사용하여 절반 만 차선 (60 % 이상). 이렇게하면 사용자가 저장 용량 한도에 도달했을 때 알 수 있습니다..

이 게시물에서는 미터 막대 스타일 지정 방법 언급 된 두 가지 목적, 즉 a 간단한 계기 (표시된 영역 없음) 및 3 가지 색상이 표시된 영역이있는 게이지의 두 가지 예가 있습니다. 후자의 경우, 우리는 "마크"게이지 만들기 가난하고 평범하며 좋은 점수를 보여주기 위해 "pH"게이지 산성, 신경 및 알칼리성 pH 값 표시.

속성

예제를 시작하기 전에 아래의 속성 목록을 살펴보고, 기본값과 같은 속성에 대해 자세히 살펴보고 예제에서 다룹니다..

• 값 - 의 가치 미터 요소
• 최소 - 미터 범위의 최소값
• 최대 - 미터 범위의 최대 값
• 낮은 - 경계 값이 낮음을 나타냅니다.
• 높은 - 높은 경계 값을 나타냅니다.
• 최적의 - 범위 내의 최적 점

1. 간단한 계기 스타일링

다음은 하나의 속성 만 사용하는 아주 간단한 예입니다. 값. 우리가 진행하기 전에 먼저 세 가지를 알아야합니다.

(1) 기본값이 있습니다. 최소 과 최대 범위를 정의하는 값 미터, 그것은 각각 0과 1이다.. (2) 사용자가 지정한 경우 값 에 속하지 않는다. 미터 범위의 경우, 최소 또는 최대, 가장 가까운 것. (삼) 끝 태그는 필수 항목입니다..

구문은 다음과 같습니다.

 0.5 

또는 다음을 추가 할 수도 있습니다. 최소 과 최대 속성은 다음과 같이 사용자 정의 범위를 제공합니다.

2. "마크"게이지 스타일 지정

먼저 범위를 세 영역 (왼쪽 / 낮음, 중간, 오른쪽 / 높음)으로 나눌 필요가 있습니다. 이것은 있었다 낮은 과 높은 속성이 작용합니다. 이것이 세 영역이 나누는 방법입니다..

3 개의 영역은 최소 & 낮은 , 낮은 & 높은 과 높은 & 최대.

이제는 특정 조건이 있음이 분명합니다. 낮은 과 높은 세 영역이 형성되기 위해서는 값이 따라야합니다.

• 낮은 보다 작을 수 없다. 최소 ~보다 큼 높은 & 최대
• 높은 보다 클 수 없다. 최대 미만 낮은 & 최소.
• 그리고 기준이 둘 다 깨진 경우 낮은 과 높은 만족하지 않는 기준에서 다른 변수의 값을 취합니다. 즉 if 낮은 값이보다 낮음 최소 그것은해서는 안된다., 낮은 ~을 얻을 것이다 최소 값.

이 예에서는 왼쪽에서 오른쪽으로 세 영역을 다음과 같이 간주합니다.

• 가난한: (0-33)
• 평균: (34-60)
• 좋은: (61-100)

따라서 다음은 속성 값입니다. min = "0"low = "34"high = "60"max = "100".

다음은 지역을 시각화 한 이미지입니다..

우리가 지금 만들었던 미터에 3 개의 영역이 있지만, 단지 2 개의 색상만으로 2 개의 "종류"의 영역 만 나타낼 것입니다. 왜? 때문에 최적의 중간 지역에있다..

최적 포인트

어느 지역 (3 개 중)에서 최적의 포인트가 떨어지면 기본적으로 녹색을 띤 "최적 영역"으로 간주됩니다. 바로 옆의 영역을 "최적 이하 영역"이라고하며 오렌지색으로 표시됩니다. 가장 멀리 떨어진 곳은 적색으로 착색 된 "최적의 지역이 아닙니다"입니다..

지금까지 우리 예제에서 우리는 값을 할당하지 않았습니다. 최적의. 따라서 기본값은 중간 영역을 "최적 영역"으로, 그 옆에있는 (둘 다 왼쪽과 오른쪽) "최적 이하 영역"으로 기본값을 50으로 만듭니다..

간단히 말해서 위의 경우에 미터 중간 영역으로 떨어지는 요소는 녹색으로 표시됩니다. 나머지 오렌지.

그건 우리가 원하는 것이 아닙니다. 우리는 색깔이 이런 식으로 원한다 : 가난한 (빨간), 평균 (주황색), 좋은 (녹색)

오른쪽 영역은 최적의 영역으로 간주되기 때문에 최적의 오른쪽 영역에 속하는 값 (61-100 사이의 값 (61 및 100 포함)).

이 예제에서는 90을 사용합니다. 이렇게하면 오른쪽 영역이 "최적"이되고 중간 영역 (즉각적인 다음 영역)이 "준 최적"이되고 멀리 왼쪽이 "최적이 아닌"영역이됩니다.

이것이 우리가 우리의 계량기에서 얻을 수있는 것입니다..

2. 스타일링 "pH"게이지

첫째, pH 값에 숨통이 있습니다. 산성 용액의 pH는 7 미만이며, 알칼리성 용액의 pH는 7보다 높습니다. 그리고 만일 여러분이 7 위에 있으면, 그것은 중립적 인 해결책입니다.

따라서 다음 값과 속성을 사용합니다.

낮음 = "7" , 높음 = "7", 최대 = "14", 그리고 최소 기본값 0을 취한다..

나머지 속성을 추가하여 코드를 완료하기 전에 색상을 결정하십시오. 산성의 (빨간), 중립국 (흰색) 및 알칼리성 (푸른). 산성 영역 (7 이하의 왼쪽 영역)을 "최적"

원하는 시각적 효과를 얻기 위해 목표로 삼을 CSS 의사 요소는 다음과 같습니다. 파이어 폭스. (Webkit meter 의사 요소 등은 "참고"아래에 나열된 링크를 참조하십시오.)

 .ph_meter background : lightgrey; 너비 : 300px;  .ph_meter : -moz-meter-optimal :: - moz-meter-bar 배경 : 인도어;  .ph_meter : -moz-meter-sub-optimal :: - moz-meter-bar 배경 : antiquewhite;  .ph_meter : -moz-meter-sub-sub-optimal :: - moz-meter-bar 배경 : 스틸 블루;  

다음은 완전한 HTML 코드와 pH 게이지의 최종 결과입니다..

참고 문헌

• HTML5 측정기 W3C 사양
• 웹킷 가상 요소 및 클래스 목록
• 공급 업체 특정 유사 요소 목록

Hongkiat에 대한 추가 정보 : HTML5로 진행 막대 만들기 및 스타일 지정하기