👉 간편하게 텍스트 타이핑 효과주기!
- 복잡하고 부자연스러운 css 대신 라이브러리 사용하기.
👉 타이핑 효과 사이트
https://libraries.io/npm/typewriter-effect
typewriter-effect on NPM
[](https://circleci.com/gh/tameemsafi/typewriterjs)
libraries.io
👉 설치방법
CDN
<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>npm
npm install typewriter-effect@2.19.0
👉 favicon 설정
<link rel="shortcut icon" href="static/yy1.png">
<title>조용연 자기소개</title>
👈 A반 10조 다른멤버 보러가기
조용연
✏️ elicho-page 소스코드
더보기
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Jua&family=Roboto+Condensed:ital,wght@1,700&family=Roboto+Mono:ital,wght@1,100;1,200&display=swap"
rel="stylesheet">
<link rel="shortcut icon" href="static/yy1.png">
<title>조용연 자기소개</title>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
.myform {
width: auto;
height: 800px;
background-color: deepskyblue;
font-size: larger;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.myform > img {
margin-left: 100px;
width: 400px;
height: 400px;
border-radius: 300px;
border: 10px solid white;
color: white;
}
.myprofile > button {
width: 150px;
height: 40px;
border-radius: 10px;
border: 1px solid white;
color: white;
background-color: black;
}
.myprofile > button:hover {
border: 3px solid blue;
}
.guestbook {
width: 95%;
max-width: 400px;
margin: 20px auto 20px auto;
box-shadow: 0px 0px 20px 0px black;
padding: 10px;
background-color: white;
border-radius: 10px;
display: none;
}
.guestbook > button {
margin-top: 10px;
}
.mycards {
width: 95%;
max-width: 500px;
margin: auto;
}
.mycards > .card {
margin-top: 10px;
margin-bottom: 10px;
}
</style>
<script>
$(document).ready(function () {
show_comment()
});
function save_comment() {
let name = $('#name').val()
let comment = $('#comment').val()
if (name == '' || comment == '') alert('닉네임과 내용을 모두 입력해주세요.')
else {
$.ajax({
type: 'POST',
url: '/coosepost',
data: {user:'eli', name_give: name, comment_give: comment},
success: function (response) {
console.log(response)
window.location.reload()
}
})
}
}
function show_comment() {
$('#comment-list').empty()
$.ajax({
type: "GET",
url: "/cooseget",
data: {user:'eli'},
success: function (response) {
let rows = response['comment_list']
for (let i = 0; i < rows.length; i++) {
let name = rows[i]['name']
let comment = rows[i]['comment']
let temp_html = `<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>${comment}</p>
<footer class="blockquote-footer">${name}</footer>
</blockquote>
</div>
</div>`
$('#comment-list').append(temp_html)
}
}
});
}
function postshow() {
$('#guestbook').show()
}
function posthide() {
$('#guestbook').hide()
}
</script>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#main {
background-color: deepskyblue;
color: #fff;
font-size: 80px;
height: 10%;
text-align: center;
padding: 5%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/typewriter-effect@2.3.1/dist/core.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var text = document.getElementById("typeStyle");
var typewriter = new Typewriter(text, {
loop: true
});
typewriter.typeString('Welcome to ELI page!')
.pauseFor(2000)
.deleteAll()
.typeString('방문해주셔서 감사합니다.')
.pauseFor(2000)
.deleteChars(2)
.typeString('<strong>Thank you!</strong>')
.pauseFor(2500)
.start();
});
</script>
</head>
<body style="background-color: deepskyblue">
<h3 onclick=location.href='/'>👈 A반 10조 다른멤버 보러가기</h3>
<div id="main">
<div id="typeStyle"></div>
</div>
<div class="myform">
<img src="https://i.ibb.co/JHf63Z1/elicho.jpg" alt="elicho" border="0">
<div class="myprofile">
<h1><b>조용연</b></h1>
<hr>
<b>
<li>사는지역 : 인천</li>
<li>나의 장점 : 웃음이 많고 편안한 분위기 😄</li>
<li>mbti : INFP</li>
<li>협업시 스타일 : 맡은 역할은 끝까지 책임지고 완성하기!</li>
<li>취미 : 볼링, 등산, netflix</li>
<li><a href="https://elicho91.tistory.com/" target="_blank">블로그로 이동하기🤞</a></li>
<hr>
</b>
<button onclick="postshow()">방명록 열기 📘</button>
</div>
</div>
<div class="guestbook" id="guestbook">
<div class="form-floating mb-3">
<input type="text" class="form-control" id="name" placeholder="url">
<label for="floatingInput">닉네임</label>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="comment"
style="width: 100%"></textarea>
<label for="floatingTextarea2">내용</label>
</div>
<button onclick="save_comment()" type="button" class="btn btn-dark">등록</button>
<button onclick="posthide()" type="button" class="btn btn-dark">닫기</button>
</div>
<div class="mycards" id="comment-list">
</div>
</body>
</html>✏️ app.py 소스코드
더보기
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
from pymongo import MongoClient
import certifi
#성준 db
junclient = MongoClient('mongodb+srv://sparta:test@cluster0.u8xq40k.mongodb.net/Cluster0?retryWrites=true&w=majority')
jun_db = junclient.dbsparta
#조운 db
jw_client = MongoClient('mongodb+srv://test:sparta@Cluster0.xtye7kw.mongodb.net/?retryWrites=true&w=majority')
jw_db = jw_client.dbsparta
#용연 db
eli_client = MongoClient('mongodb+srv://test:sparta@cluster0.iytbmso.mongodb.net/Cluster0?retryWrites=true&w=majority')
eli_db = eli_client.dbsparta
#성윤 db
syjclient = MongoClient('mongodb+srv://test:sparta@cluster0.lot5yin.mongodb.net/Cluster0?retryWrites=true&w=majority')
syj_db = syjclient.dbsparta
#남훈 db
ca = certifi.where()
nhk_client = MongoClient('mongodb+srv://test:sparta@cluster0.j4reysf.mongodb.net/?retryWrites=true&w=majority', tlsCAFile=ca)
nhk_db = nhk_client.miniteam
@app.route('/') #팀페이지
def home():
return render_template('index.html')
@app.route('/jun-page') #성준페이지
def jun_page():
return render_template('jun-page.html')
@app.route('/jw-page') #조운페이지
def jw_page():
return render_template('jw-page.html')
@app.route('/elicho-page') #용연페이지
def elicho_page():
return render_template('elicho-page.html')
@app.route('/SYJ') #성윤페이지
def SYJ():
return render_template('SYJ.html')
@app.route('/nhk') #남훈페이지
def nhk_page():
return render_template('nhk.html')
#post
@app.route("/coosepost", methods=["POST"])
def coose_post():
user = request.form['user']
name_receive = request.form['name_give']
comment_receive = request.form['comment_give']
doc = {'name': name_receive,
'comment': comment_receive}
if user == 'main' :
nhk_db.coosemain.insert_one(doc)
elif user == 'jun' :
jun_db.coosejun.insert_one(doc)
elif user == 'jw' :
jw_db.tpro1.insert_one(doc)
elif user == 'eli' :
eli_db.cooseproject.insert_one(doc)
elif user == 'syj' :
syj_db.syjcomment.insert_one(doc)
elif user == 'nhk' :
nhk_db.nhk.insert_one(doc)
return jsonify({'msg':'방명록 저장 완료!'})
#get
@app.route("/cooseget", methods=["GET"])
def coose_get():
user = request.args.get('user')
search_name = request.args.get('search_name')
comment_list = list()
if user == 'main':
comment_list = list(nhk_db.coosemain.find({}, {'_id': False}))
elif user == 'jun':
comment_list = list(jun_db.coosejun.find({}, {'_id': False}))
elif user == 'jw':
comment_list = list(jw_db.tpro1.find({}, {'_id': False}))
elif user == 'eli':
comment_list = list(eli_db.cooseproject.find({}, {'_id': False}))
elif user == 'syj':
comment_list = list(syj_db.syjcomment.find({}, {'_id': False}))
elif user == 'nhk':
comment_list = list(nhk_db.nhk.find({}, {'_id': False}))
#검색기능
if search_name is not None and search_name is not '':
temp_list = list()
search_name = search_name.strip()
for rows in comment_list:
if search_name == rows['name']:
temp_list.append(rows)
comment_list = temp_list
return jsonify({'comment_list':comment_list})
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)
🙋♂️ 소감:
오늘 1차 자기소개페이지 만드는 미니프로젝트가 마무리되었다.
사전캠프 수업내용으로만 코드작성하여, 차별점을 줄 수 없을까 생각하다 동적인 움직임이 있으면 좋을것 같다는 생각에 텍스트 타이핑 효과를 추가하였다.
이전에 작업했던 내용을 바탕으로 추가하였고, 간편하게 라이브러리 추가만으로도 동적인 효과를 줄 수 있어 편리했다.
그리고 팀원분께서 따주는 귀여운 나의 zep 캐릭터를 파비콘으로 적용~! ㅎㅎ
미니프로젝트라고 해서 그냥 수업내용을 복습하는 개념으로만 가볍게 생각하고 진행했는데, 다른조 발표영상을 보면서 아 '아 내가 너무 기본에만 집중을 했구나...^^' 라고 느꼈다....
다음 프로젝트에때는 조금 더 욕심을 내서 할 수 있는만큼만! 기능구현을 하고싶다.
오늘 가장 많이 들은 키워드 [RESTful API RESTful API RESTful API RESTful API RESTful API]
'❤️🔥TIL (Today I Learned)' 카테고리의 다른 글
| [TIL] 2022-11-08(7day) (0) | 2022.11.08 |
|---|---|
| [TIL] 2022-11-07(6day) (0) | 2022.11.07 |
| [TIL] 2022-11-03(4day) (0) | 2022.11.03 |
| [TIL] 2022-11-02(3day) (0) | 2022.11.02 |
| [TIL] 2022-11-01(2day) (0) | 2022.11.01 |
댓글