반응형
MBTI 를 간단하게 재미 삼아 만들어보는 중인데
무슨 글을 작성해야 하는지가 제일 어렵다....
재미삼아 만드는 거니 나는 다른 것들을 참고해보려고 한다
그리고 상태바를 어떻게 만드는가 했더니
박스의 width %를 이용하더라
아래와 같이 간단하게 구현 완료!
나중에 다 적용해보려고 한다
<!DOCTYPE html>
<html lang="ko">
<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">
<title>Document</title>
<style>
body {
text-align: center;
}
.container {
margin-top: 200px;
display: flex;
justify-content: center;
}
.section {
border: 1px red solid;
}
.box {
height: 20px;
width: 10%;
background-color: rgb(153, 0, 255);
/* background-color: none; */
border: 1px purple solid;
}
</style>
</head>
<script>
window.onload = function() {
let perc = 10;
document.getElementById("inc_btn").onclick = function() {
document.querySelector(".box").style.width = `${perc+=10}%`;
document.querySelector(".box").style.transition = ".5s";
};
}
</script>
<body>
<div class="container">
<div></div>
</div>
<div class="section">
<div class="box"></div>
</div>
<input id="inc_btn" type="button" value="increase" style="margin-top: 30px;">
</body>
</html>
반응형
'HTML, CSS' 카테고리의 다른 글
| [CSS] em과 rem 차이 (0) | 2023.02.26 |
|---|---|
| [CSS] 자식 특정 요소 제외하고 속성 주기 (0) | 2023.02.24 |
| [HTML] 페이지 언어 설정 (0) | 2023.01.21 |
| [css] css 속성 초기화 all: unset (0) | 2022.02.08 |
| [CSS] opacity 배경에만 흐리게 효과 주기 (0) | 2022.01.29 |