🔥 HTML/CSS/Javascript를 활용한 타이핑 효과 페이지 만들기
1. 📖 뼈대 만들기
✍ code
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Typing Effect</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link href ="style.css" rel="stylesheet"
</head>head태그안에 CSS에 들어갈 아이콘(이모티콘?)의 링크를 따와서 써준다. 그리고 HTML과 CSS도 연결할 링크태그를 추가한다.
<body>
<div class="wrap">
<h1>
<span class="material-icons">savings</span>
</h1>
<p id="dynamic" class="lg-text">
</p>
<p class="sm-text">
선우.log | 16 posts
</p>
</div>
<script src="main.js"></script>
</body>
</html>div태그로 해당 그룹을 생성한다. h1태그로 아이콘, p태그로 넣을 글씨를 쓴다. 타이핑 효과를 내기 위해서 js파일과 이어준다.
2. 📖 꾸며주기
✍ code
* {
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;
text-align: center;
}초기값을 리셋하기위해 *에 margin, padding을 0으로 한다. box-sizing은 border-box로 설정한다.
<content-box vs border-box >
전체 크기 = content-box + border + padding + margin
전체 크기 = border-box = content + border + padding + margin
전체 화면의 배경색은 darkslateblue로 넣었다.
모든 class안의 요소들을 정가운데 배치했다.
position을 absolute로 하면
부모 엘리먼트 내부에 속박되지 않고, 독립된 배치 문맥(positioning context)을 가지게 됩니다.
.material-icons {
font-size:8rem;
}
.lg-text {
font-size: 2rem;
font-weight: bold;
margin-bottom: 5px;
}
.sm-text {
font-size: 1.5rem;
}
#dynamic {
position: relative;
display: inline-block;
}
#dynamic::after {
content:"";
display: block;
position: absolute;
top:0;
right: -10px;
width:4px;
height:100%;
background-color: white;
}
#dynamic.active::after {
display: none;
}3. 📖 효과 넣어주기
✍ code
let target = document.querySelector("#dynamic");
function randomString() {
let stringArr = ["Learn to Programming", "Learn to HTML", "Learn to CSS",
"Learn to Javascript", "Learn to Node.js", "Learn to Vue.js"];
let selectString = stringArr[Math.floor(Math.random()*stringArr.length)];
let selectStringArr = selectString.split(""); // 띄어쓰기 기준으로 단어 하나하나 나눠짐
return selectStringArr;
}
//타이핑 리셋
function resetTyping() {
target.textContent = "";
dynamic(randomString());
}
//한글자씩 텍스트 출력 함수
function dynamic(randomArr) {
if(randomArr.length > 0) {
target.textContent += randomArr.shift();
setTimeout(function(){
dynamic(randomArr);
}, 80);
} else {
setTimeout(resetTyping, 3000);
}
}
dynamic(randomString());
//커서 깜빡임 효과
function blink() {
target.classList.toggle("active");
}
setInterval(blink, 500);HTML에서 dynamic을 target으로 받아온다. 텍스트 한 글자씩 출력하기 위해서 dynamic함수를 정의한다. random한 문장 출력을 위한 randomString 함수를 설정한다. 커서 깜빡임과 타이핑 리셋하는 함수도 정의한다. 끝!
꿈꾸는중