JavaScript, CSS의 @keyframes 제어하기
- Web/JavaScript
- 2021. 11. 11.
JavaScript, CSS의 @keyframes 제어하기
막대그래프
CSS를 통해서 막대그래프 하나를 만들어보았다.
이는 Youtube를 참조하였다.
그리고 데이터를 바탕으로 막대그래프의 크기가 변동될 수 있도록 하였다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>막대 그래프</title>
<style>
body {
padding : 50px;
}
.graph {
display : none;
background : #ccc;
height: 40px;
border-radius: 40px;
}
.graph span {
display : block;
width : 75%;
height : 40px;
line-height: 40px;
text-align: right;
background : violet;
padding : 0 10px;
box-sizing: border-box;
color : #fff;
border-radius: 40px;
animation:stack 2s 1;
}
@keyframes stack {
0% { width : 0; color: rgba(255,255,255,0);}
40%{ color: rgba(255,255,255,1);}
100% { width : 75%;}
}
</style>
</head>
<body>
<button onclick='view()'>버튼</button>
<input type='text' id='cnt'>
<button onclick='random()'>수치 변경</button>
<div class="graph" id='graph'>
<span id='graph_span1'>75%</span>
</div>
<script>
var cnt = 0;
var graph = document.getElementById('graph');
function view() {
if(cnt == 0) {
graph.style.display ="block";
cnt++;
} else {
cnt--;
graph.style.display = 'none';
}
}
function random() {
graph.style.display = 'none';
cnt = 0;
//input 값
let input_cnt = document.getElementById('cnt');
let graph_span1 = document.getElementById('graph_span1');
//css 변경
graph_span1.style.width = input_cnt.value+'%';
graph_span1.innerHTML = input_cnt.value+'%';
//css 룰 변경
let animation = document.styleSheets[0].cssRules[3];
console.log(animation);
animation.appendRule('100% { width : '+input_cnt.value+'%;}');
}
</script>
</body>
</html>
보이기, 감추기
var cnt = 0;
function view() {
var graph = document.getElementById('graph');
if(cnt == 0) {
graph.style.display ="block";
cnt++;
} else {
cnt--;
graph.style.display = 'none';
}
}먼저, 버튼을 눌러서 그래프의 보이기 / 감추기를 만들었다.
기본적인 style을 이용해서, display의 block과 none의 조합이다.
이는, 2번째 수치 변경이 제대로 되는가, 아닌가를 구분하기 위해 만든 간단한 Event이다.
수치 변경하기
이벤트 내용은 input box의 수를 입력 받아서 수치 변경 시, css 변동이 되도록 작성하였다.
<input type='text' id='cnt'>
<button onclick='random()'>수치 변경</button>
<div class="graph" id='graph'>
<span id='graph_span1'>75%</span>
</div>
//input 값
let input_cnt = document.getElementById('cnt');
let graph_span1 = document.getElementById('graph_span1');해당 내용에서, input의 내용과 span의 태그를 JavaScript로 불러왔다.
graph_span1.style.width = input_cnt.value+'%';
graph_span1.innerHTML = input_cnt.value+'%';내용은 span의 입력값과 style을 변경함으로써, 막대그래프 CSS가 잘 적응되도록 설정되었다.
다만, animation효과를 준 만큼, 이를 수정해야 할 필요가 있기 때문에 다른 부분을 추가하게 되었다.
@Keyframes 제어하기
//css 룰 변경
let animation = document.styleSheets[0].cssRules[3];의미는 다음과 같다.
해당 html 내에 존재하는 css에 한에서,
document.styleSheets[0]은 css의 style을 나타낸다.이를 배열로 받았을 때, 4번째 위치의 배열은 -1의 과정을 거쳐 [3]이 된다.
document.styleSheets [0]. cssRules [3];즉, styleSheet의 4번째 위치한 것이 @keyframes stack이므로, 이곳의 주소 값을 가리킨다.이를 appendRule 함수를 이용해('추가 / 수정') 작업을 거친다.
let animation = document.styleSheets[0].cssRules[3];
animation.appendRule('100% { width : '+input_cnt.value+'%;}');기존, @keyframes stack에 담긴 100% { width : 75%}가 존재했지만,
동일한 조건의 값이 담기므로, 이전 것은 삭제가 되고 새로운 값이 추가된다.
width의 길이는 input에 입력받은 값이다.
이를 조정하여, 자연스러운 동적 css를 적용하게 된다.
마무리
본 내용은 막대그래프의 표현을 위해 제작하였다.
그러나 css는 정적으로만 배우다 보니, 동적으로 적용하는 방법이 궁금했고 이를 해결하기 위해 임의로 만들게 되었다.
'Web > JavaScript' 카테고리의 다른 글
| OpenLayer, 지도 클릭시 마커를 지도에 표시하기. (0) | 2021.11.12 |
|---|---|
| OpenLayer, 클릭시 좌표 가져오는 방법 (0) | 2021.11.12 |
| OpenLayer, 마커 만들기 (0) | 2021.11.09 |
| OpenLayer, 지도 이동하기 (0) | 2021.11.09 |
| OpenLayer, Layer 수정하기 (0) | 2021.10.19 |