공부 노트

// 현재 시간 출력

- Date 객체를 이용해 현재 시간을 출력

const today = new Date();

today.getHours()
today.getMinutes()
today.getSeconds()

// 1초마다 갱신
setInterval(함수명, 1000);

- html

<div class="date-wrap">
	<div class="js"></div>
	<div class="date">
		<p class="date-tit">digital clock</p>
		<div class="now">
			<div class="time hour">00</div>
			<div class="divider">:</div>
			<div class="time min">00</div>
			<div class="divider">:</div>
			<div class="time sec">00</div>
		</div>
		<div class="date-desc">
			html, css & javascript
		</div>
	</div>
</div>

- css

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
.date-wrap {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
	background: #000;

}
.js {
	position: absolute;
	top: 0;
	left: 0;
	width: 240px;
	height: 240px;
	background: #F7DF1D;
}
.js:after {
	position: absolute;
	right: 20px;
	bottom: 0;
	content: 'JS';
	font-size: 120px;
	font-weight: bold;
}
.date {
	display: flex;
	width: 100%;
	height: 100%;
	flex-flow: column;
	justify-content: space-evenly;
	align-items: center;
	color: #fff;
	text-align: center;
}
.now {
	display: flex;
	justify-content: center;
	align-items: center;
	column-gap: 30px;
	font-family: Rajdhani;
	font-size: 100px;
}
.time {
	width: 150px;
	font-weight: bold;
	letter-spacing: 8px;
	text-align: center;
	text-shadow: 0px 0px 60px mediumturquoise;
}
.date-tit {
	text-transform: uppercase;
	font-family: Permanent Marker;
	font-size: 65px;
	color: #B5115A;
}
.date-desc {
	text-transform: uppercase;
	font-size: 30px;
	font-weight: bold;
	letter-spacing: 5px;
	color: #fff;
	opacity: .6;
	width: 100%;
	margin-top: 70px;
}

- js

<script>

	// const date = document.querySelector('.date h1');
	const hour = document.querySelector('.hour');
	const min = document.querySelector('.min');
	const sec = document.querySelector('.sec');
	
    function clock() {
		const now = new Date();
		hour.innerText = now.getHours();
		min.innerText = now.getMinutes();
		sec.innerText = now.getSeconds();
	}
	setInterval(clock, 1000);

</script>