개발 대상은 [index] 페이지이다.
도메인 접속시 제일 먼저 나타나는 main 페이지이다.
구성은 다음과 같다.
index.php : 메인 페이지
index.js : 타이핑 효과 Javascript
index.css : 메인 페이지 CSS
1. Frontend & Backend
<1. index.php>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>GGEAR</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"/>
<link rel="stylesheet" href="../css/index.css">
</head>
<body>
<?php include "../include/header.php" ?>
<main>
<div class="container">
<h4>Welcome</h4>
<?php
if (session_status() === PHP_SESSION_NONE)
session_start();
if (!isset($_SESSION["user_id"]))
echo "<h2>Web <span></span></h2>";
else
echo "<h2>Logged In <span></span></h2>"
?>
<p>101 110 011 010 111 000 101 010 011 001 110 101</p>
<br>
<button class="velog">Velog Document</button><br>
<button class="shield"><i class="fa-solid fa-shield-virus"></i></button>
</div>
</main>
<?php
if (isset($_SESSION["user_name"]))
$user_name = $_SESSION["user_name"];
else
$user_name = "";
?>
<script>const user_name = "<?php echo $user_name; ?>"</script>
<script src="../js/index.js?v=<?=time()?>"></script>
</body>
</html>| index.php |
|---|
 |
- 로그인 여부에 따른 타이핑 효과:
1) 비로그인 상태의 경우 Web Test Server, Hacking Lab 이라는 글자가 번갈아가며 타이핑 효과처럼 보여진다.
2) 로그인 상태의 경우, Logged In "사용자명" 이라는 글자로 타이핑 효과가 출력되어, 로그인 상태와 현재 사용사의 이름을 알려준다.
2. Javascript
<index.js>
(function(){
const spanEl = document.querySelector("main h2 span");
const txtArr = ['Test Server', 'Hacking Lab'];
let index = 0;
let currentTxt = txtArr[index].split("");
function writeTxt(){
spanEl.textContent += currentTxt.shift();
if(currentTxt.length !== 0){
setTimeout(writeTxt, Math.floor(Math.random() * 100));
}else{
currentTxt = spanEl.textContent.split("");
setTimeout(deleteTxt, 3000);
}
}
function deleteTxt(){
currentTxt.pop();
spanEl.textContent = currentTxt.join("");
if(currentTxt.length !== 0){
setTimeout(deleteTxt, Math.floor(Math.random() * 100))
}else{
index = (index + 1) % txtArr.length;
currentTxt = txtArr[index].split("");
writeTxt();
}
}
writeTxt();
})();- 1. 타이핑 효과: Test Server ↔ Hacking Lab 이라는 글자를 번갈아가며 지우고 타이핑치는 효과를 적용
3. 동작 정리
| 메인페이지 기본 화면 (영상) |
|---|
 |
| 로그인된 경우 메인페이지 화면 (영상) |
|---|
 |
