밖에 비가 참 많이 내리네요 날씨가 정말 습합니다. 빨리 건조한 겨울이 왔으면 좋겠네요:)
하여튼 오늘도 마찬가지로 자바스크립트 챌린지를 진행해 보도록 하겠습니다.
1. 오늘의 과제는?
오늘은 이런식으로 시계를 만들 것입니다.
finished 버전은 시계침이 회전할 때 마다 달칵거리는 애니메이션이 있고 제가 만든 것은 딱딱하게 회전합니다.
우선 start파일은 이렇게 되어있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS + CSS Clock</title>
</head>
<body>
<div class="clock">
<div class="clock-face">
<div class="hand hour-hand"></div>
<div class="hand min-hand"></div>
<div class="hand second-hand"></div>
</div>
</div>
<style>
html {
background: #018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
background-size: cover;
font-family: 'helvetica neue';
text-align: center;
font-size: 10px;
}
body {
margin: 0;
font-size: 2rem;
display: flex;
flex: 1;
min-height: 100vh;
align-items: center;
}
.clock {
width: 30rem;
height: 30rem;
border: 20px solid white;
border-radius: 50%;
margin: 50px auto;
position: relative;
padding: 2rem;
box-shadow:
0 0 0 4px rgba(0,0,0,0.1),
inset 0 0 0 3px #EFEFEF,
inset 0 0 10px black,
0 0 10px rgba(0,0,0,0.2);
}
.clock-face {
position: relative;
width: 100%;
height: 100%;
transform: translateY(-3px); /* account for the height of the clock hands */
}
.hand {
width: 50%;
height: 6px;
background: black;
position: absolute;
top: 50%;
}
</style>
<script>
</script>
</body>
</html>이걸 통해서 finished 버전처럼 작동되도록 만들면 됩니다.
2. 내가 만든 파일
- HTML & JS 부분
<!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">
<link rel="stylesheet" href="style.css">
<title>JS + CSS Clock</title>
</head>
<body>
<div class="clock">
<div class="clock-face">
<div class="hand hour-hand"></div>
<div class="hand min-hand"></div>
<div class="hand second-hand"></div>
</div>
</div>
<script>
const hour = document.querySelector('.hand.hour-hand');
const min = document.querySelector('.hand.min-hand');
const second = document.querySelector('.hand.second-hand');
function controlTime() {
let realTime = new Date();
let hourTime = realTime.getHours();
let minTime = realTime.getMinutes();
let secondTime = realTime.getSeconds();
hour.style.transform = `rotate(${hourTime * 30 + 90}deg)`;
min.style.transform = `rotate(${minTime * 6 + 90}deg)`;
second.style.transform = `rotate(${secondTime * 6 + 90}deg)`;
}
setInterval("controlTime()", 1000);
</script>
</body>
</html>먼저 HTML에서 시계 침의 역할을 하는 객체들을 querySelector를 통해서 부를 수 있었습니다.
그리고 Data를 활용해서 현재의 시간을 얻어내고 그걸로 css style의 transform에서 회전을 줍니다. 그리고 `` 리터럴 문자열을 통해서 안에 계산식도 넣을 수 있었습니다. 그리고 setInterval을 통해서 반복적으로 함수를 실행할 수 있었습니다.
- CSS 부분
html {
background: #018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
background-size: cover;
text-align: center;
font-size: 10px;
}
body {
margin: 0;
font-size: 2rem;
display: flex;
flex: 1;
min-height: 100vh;
justify-content: center;
align-items: center;
}
.clock {
width: 30rem;
height: 30rem;
border: 20px solid white;
border-radius: 50%;
position: relative;
padding: 2rem;
box-shadow:
0 0 0 4px rgba(0,0,0,0.1),
inset 0 0 0 3px #EFEFEF,
inset 0 0 10px black,
0 0 10px rgba(0,0,0,0.2);
}
.clock-face {
position: relative;
width: 100%;
height: 100%;
transform: translateY(-3px);
}
.hand {
width: 50%;
height: 6px;
background: black;
position: absolute;
top: 50%;
transform-origin: center right;
}
.hand.hour-hand {
background-color: red;
}
.hand.min-hand {
background-color: blueviolet;
}이걸 하면서 약간의 문제가 생겼었는데 rotate를 줄 때 시계 침의 오른쪽 부분을 기준으로 회전해야하는데 기본 기준점이 중앙으로 잡혀져 있어서 그렇게 되지 않았습니다.
그래서 따로 기준점을 정해야하는데 그것이 바로 transform-origin 입니다. 이것을 통해서 기준점을 바꾸고 실제 시계 침 처럼 회전시킬 수 있었습니다. - 자세한 설명은 밑에서 하겠습니다.
그리고 각 시침, 분침, 초침을 구분하기 위해서 배경색도 다르게 부여하였습니다.
3. 배운 점 & 느낀 점
| 자바스크립트로 css transform속성 다루기 obj.style.transform = ""; 이런식으로 transform속성을 다룰 수 있다. 예를 들어 obj.style.transform = "rotate(30deg)"; 로 30도 회전을 시킬 수 있다. |
| transform속성 기준점 설정하기 - https://mjmjmj98.tistory.com/41 transform에는 다양한 속성 값들 - 대표적으로 translate, rotate, scale 등 - 이 있는데 사용하다 보면 기준점을 정해야 할 때가 있다. 그것을 정할 수 있는 속성이 바로 transform-origin 이다. transform-origin: x-axis transform-origin: x-axis y-axis transform-origin: x-axis y-axis z-axis; 이런식으로 사용할 수 있다. 예를 들어 transform-origin: 100% 를 하였다면 해당 객체의 x축 기준 가장 오른쪽을 기준점으로 잡는 것이다. |
| margin: 50px auto 위 아래 여백은 50px로 주고 좌우여백은 균등하게 배분한다는 뜻이다. |
| cubic-bezier - https://kutar37.tistory.com/entry/CSS-cubic-bezier란 cubic-bezier() 함수는 transition이나 transition-timing-function 속성에서 전환하는데 시작과 끝까지의 효과를 제어하는 데 쓰인다. cubic-bezier(<float>x1, <float>y1, <float>x2, <float>y2) 이런식으로 1보다 작은 값들을 인자값으로 넘겨주게 되는데 이걸 통해 베지어 곡선이라는 것이 형성된다고 한다. 이 베지어 곡선에 따라서 전환되는데 중간중간 속도가 바뀌게 되고 일정하게 바뀔 수도 있다. 예를 들어, transition-duration을 2s로 줬다고 하면 이 2초동안 전환이 될 때 처음에는 느리게 전환되다가 나중에는 빠르게 전환될 수도 있다는 것이다. 하지만 이 값을 일일이 계산하기 어려우니 기본적으로 정해져 있는 키워드가 있다.
|
| box-shadow - https://developer.mozilla.org/ko/docs/Web/CSS/box-shadow box-shadow는 요소의 테두리를 감싼 그림자 효과를 추가한다. 공식문서 예제 /* offset-x | offset-y | color */ box-shadow: 60px -16px teal; /* offset-x | offset-y | blur-radius | color */ box-shadow: 10px 5px 5px black; /* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); /* inset | offset-x | offset-y | color */ box-shadow: inset 5em 1em gold; /* Any number of shadows, separated by commas */ box-shadow: 3px 3px red, -1em 0 0.4em olive; /* Global keywords */ box-shadow: inherit; box-shadow: initial; box-shadow: unset; |
오늘은 여기까지 하겠습니다 읽어주셔서 감사합니다!
