728x90
반응형
[HTML & CSS] meter 태그를 사용하여 그래프 그리는 방법 !!
html의 <meter> 태그를 이용하여 그래프를 쉽게 그리는 방법 입니다 !!
예제코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
meter {
position: relative;
}
meter:hover::before {
content: attr(title);
display: block;
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
padding: 8px;
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
font-size: 14px;
border-radius: 5px;
white-space: nowrap;
}
</style>
</head>
<body>
<ul>
<li>[컴퓨터/3] 그래픽커뮤니케이션<meter min="0" max="100" low="30" high="79" optimum="100" value="73" title="73%"></meter></li>
<li>[컴퓨터/1] 파이썬프로그래밍기초<meter min="0" max="100" low="30" high="79" optimum="100" value="66" title="66%"></meter></li>
<li>[컴퓨터/2] HTML5웹프로그래밍<meter min="0" max="100" low="30" high="79" optimum="100" value="73" title="73%"></meter></li>
<li>[컴퓨터/3] 데이터베이스시스템<meter min="0" max="100" low="30" high="79" optimum="100" value="86" title="86%"></meter></li>
<li>[컴퓨터/3] 운영체제<meter min="0" max="100" low="30" high="79" optimum="100" value="66" title="66%"></meter></li>
<li>[컴퓨터/4] 컴퓨터보안<meter min="0" max="100" low="30" high="79" optimum="100" value="66" title="66%"></meter></li>
</ul>
</body>
</html>결과값
- [컴퓨터/3] 그래픽커뮤니케이션
- [컴퓨터/1] 파이썬프로그래밍기초
- [컴퓨터/2] HTML5웹프로그래밍
- [컴퓨터/3] 데이터베이스시스템
- [컴퓨터/3] 운영체제
- [컴퓨터/4] 컴퓨터보안
728x90
반응형
'Coding > HTML & CSS' 카테고리의 다른 글
| [HTML & CSS] 버튼 클릭하여 회원가입 폼 팝업창 띄우는 방법 !! (0) | 2023.05.18 |
|---|---|
| [HTML & CSS] 태그로 활용하여 줄 바꿈, 띄어쓰기, 공백 하는 방법 !! (0) | 2023.05.06 |
| [HTML & CSS] input태그 체크박스(checkbox) 상태 확인하는 방법 !! (0) | 2023.03.20 |
| [HTML & CSS] 마우스로 클릭 가능한 숫자패드(pinpad) 그리는 방법 !! (javascript 사용) (0) | 2023.03.19 |
| [HTML & CSS] pdf 파일 웹에서 보여 주는 초간단 방법 !! (iframe 태그 사용) (0) | 2023.03.18 |
댓글