HTML5 - 텍스트(게이지 바, Ruby 주석) <meter>, <ruby>

2022. 2. 24. 14:22

<meter></meter> 태그 요소

이 태그는 범위 내의 값을 웹페이지에 시각적으로 표시할 수 있다.

예)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    article{
      display: inline-block;
      margin:50px;
    }
  </style>
</head>
<body>
  
  <article>
    <h2>게이지 바1</h2> 연료 게이지1:
    <meter min="0" low="30" high="50" max="100" optimum="100" value="80" ></meter>
    
    <h2>게이지 바2</h2> 연료 게이지2:
    <meter min="0" low="30" high="50" max="100" optimum="100" value="49" ></meter>
  </article>
  
  <article>
    <h2>게이지 바3</h2> 연료 게이지3:
    <meter min="0" low="30" high="50" max="100" optimum="100" value="29" ></meter>
    
    <h2>게이지 바4</h2> 연료 게이지4:
    <meter min="0" low="30" high="50" max="100" optimum="30" value="30" ></meter>
  </article>  
</body>
</html>

결과 화면

meter 태그의 속성을 살펴보면

min	측정 범위 가능한 최소의 값 지정하지 않으면 기본 값으로 0
low	측정 범위 중 낮은 값의 최대값 min 값보다 커야함.
high	측정 범위 중 높은 범위의 최소의 값 min, low 값보다 커야함.
max	측정 범위 가능한 최대의 값. 지정하지 않으면 기본 값으로 1
optimum	min 과 max 값의 범위여야 하고, value 값이 min 과 low 사이에 위치한 경우, 측정 범위 중 낮은 범위가 이상적인 범위. 이 값으로 인해 게이지 바 색을 결정함.
value	현재의 값 min과 max 값 사이여야 하고, 잘못된 값이면 0으로 간주. 지정했으나 범위를 벗어난 값이면 나머지 값을 버림.

optimum 속성을 덧 붙여서 설명하자면,

value 값이 min과 low 사이인 경우,

측정 범위 중 낮은 범위가 이상적인 범위의 가 되며,

이게 게이지바의 색으로 나타내어진다.

이 부분은 직접 소스를 복사해서 optimum 수치를 여럿 변경하며 테스트해봐야 감이 온다.

<ruby></ruby> 태그 요소

이 태그는 '루비 주석'을 달 때 사용한다.

어떨 때 사용하냐면 동부 쪽 언어를 표기할 때 사용한다.

일본어의 예로 들을 수 있다.

일본어 한자 위에 이 한자의 발음을 돋기 위해 약 50개의 문자가 있는 음성 히라가나 언어로 해당하는 한자의 위에 작은 글씨체로 주석을 다는데 이것을 루비 주석이라 한다.

예)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <ruby>
    <rb>北海道</rb>
    <rt>ほっかいどう</rt>
    <rtc>Hokkaido</rtc>
  </ruby>

  <ruby>
    <rb>北京市</rb>
    <rt>BěijīngShì</rt>
    <rtc>Beijing Municipality</rtc>
  </ruby>  
</body>
</html>

결과 화면

<ruby> 태그 안에 <rb>, <rt>, <rtc> 태그를 사용해서 작성하는데,

<rb> 원래 단어가 들어가고,

<rt> 발음의 글자가 들어가고,

<rtc> 일반적인 영어로 표현된 단어가 들어가게 작성하면 된다.

'web 언어 > HTML5 & CSS & Javascript' 카테고리의 다른 글

HTML5 - (리스트 list) <ul>, <ol>, <li> (0)	2022.02.25
HTML5 - 텍스트(링크 link) 페이지링크, 조각링크, 프로토콜링크 (0)	2022.02.24
HTML5 - 텍스트(조언제공) <abbr>, <cite>, <dfn>, <kbd> (0)	2022.02.23
HTML5 - 텍스트(코드code 태그) <code>, <var>, <samp> (0)	2022.02.23
HTML5 - 텍스트(서식유지, 위 - 아래 첨자 태그) <pre>, <sub>, <sup> (0)	2022.02.23

열공의 기록