HTML
<!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>Typing Text</title>
<!--material icon 사용 위한 링크-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="wrap">
<h1>
<span class="material-icons">language</span><!--아이콘 삽입-->
</h1>
<p id="dynamic" class="lg-text"></p>
<p class="sm-text">CODING | BY WENDY</p>
</div>
<script src="js/main.js"></script>
</body>
</html>CSS
* {
margin : 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: darkslateblue;
}
.wrap {
/*정중앙배치*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: white;
/*아이콘폰트는 css의 텍스트와 관련된 속성 그대로 적용 가능*/
text-align: center;
}
.material-icons {
font-size: 10rem;
}
.lg-text {
font-size: 2rem;
font-weight: bold;
margin-bottom: 5px;
}
.sm-text {
font-size: 1.5rem;
}
#dynamic {
position: relative;
/*커서 위치 텍스트 길이 줄어들거나 늘어날 때 텍스트 바로 옆에 따라오기*/
display: inline-block;
}
/*after 가상요소 만들기(커서 처럼 보이기)*/
#dynamic::after {
content: "";
display: block;
/*커서모양 항상 오른쪽에 위치*/
position: absolute;
top: 0;
right: -10px;
/*커서 바 모양*/
width: 4px;
height: 100%; /*커서 높이는 글자 크기만큼*/
background-color: white;
}
#dynamic.active::after {
display: none;
}Javascript
/*dynamic 문서객체를 선택*/
let target = document.querySelector("#dynamic");
function randomString() {
//배열변수
let stringArr = ["Learn to HTML", "Learn to CSS", "Learn to Javascript", "Learn to Python", "Learn to Ruby"];
//배열변수 중 랜덤으로 하나를 선택:floor는 소수점 버림
let selectString = stringArr[Math.floor(Math.random() * stringArr.length)];
//해당 문자열을 split("")방식으로 분리시켜라: 글자 하나하나 쪼개기
let selectStringArr = selectString.split("");
return selectStringArr;
}
//텍스트 문장 다 타이핑되면 리셋되는 효과
function resetTyping(){
target.textContent = "";
dynamic(randomString());
}
//랜덤매개변수가 0보다 클 경우 계속 반복(한글자씩 텍스트 타이핑 효과)
function dynamic(randomArr) {
if(randomArr.length > 0) {
target.textContent += randomArr.shift();
setTimeout(function(){
dynamic(randomArr);
},80);
}else {
setTimeout(resetTyping,3000)
}
}
//다이나믹을 호출할 때 selectStringArr을 매개변수로 받음
dynamic(randomString());
//커서가 깜빡임 효과:active 클래스가 추가되었다가 삭제되었다가 반복
function blink() {
target.classList.toggle("active");
}
//반복함수 이용
setInterval(blink,500);
안녕 나의 새로운 세상