반응형
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
#my_skill {width: 100%;height: 50px;}
</style>
</head>
<body>
<progress value="20" max="100" id="my_skill"></progress>
<button class="btn_result" onclick="jbFunc()">Click</button>
<script>
function jbFunc() {
document.querySelector( '#my_skill' ).value = '80';
}
</script>
</body>
</html>
얼마나 진행했는지 또는 본인의 스킬, 성장 등 어느정도인지 나타낼 수 있는 효과라고 생각한다.
See the Pen LYpVYQN by chloe Kim (@chlolisher) on CodePen.
반응형
'작업 피드백 > 개발' 카테고리의 다른 글
| 순수 Javascript 이용해서 그래프 만들기 (0) | 2022.02.22 |
|---|---|
| 제이쿼리&CSS 말줄임 스크립트로 처리하는 방법 / Ellipsis Using Css & J-query (0) | 2021.05.18 |
| CSS사용해서 HTML 툴팁(tooltip) 구현하기 (0) | 2021.05.13 |
| 팝업(Popup)창 / 모달윈도우 / 레이어팝업/오늘은더이상보지않기 / 7일동안(일주일동안) 보지않기 (15) | 2021.01.06 |
| [모듈]퍼블리셔라면 필수로 알아야하는 display: table 속성, 무한 메뉴 리스트 만들기 (0) | 2020.09.23 |