<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatiable" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>덕담 하나 주면 안~잡아먹지!</title>
<meta property="og:title" content=" 가족들간 덕담 페이지"/>
<meta property="og:description" content="덕담 한마디 남겨주세요!"/>
<meta property="og:image" content="https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/ogimage.png"/>
</head>
<style>
@font-face {
font-family: 'Cafe24Ssurround';
src: url('https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/Cafe24Ssurround.woff') format('woff');
}
/*font-family 폰이름설정
src 에 url 에 폰트 파일 넣고 format에 파일 형식넣기*/
* {
font-family: 'Cafe24Ssurround';
}
/* * 모든 컴포넌트에 적용한다 */
body,h1,p{
margin: 0px;
padding: 0px;
}
.background {
width: 100vw;
height: 100vh;
max-width: 450px;
background-image: url('https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/bg_default.png');
background-position: center;
background-size: cover;
margin: auto;
}
.title{
color:#3f3732;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-top: 5vh;
}
.title>h1{
font-size: 22px;
background-color: ivory;
padding: 8px 10px;
border-radius: 1em;
margin-bottom: 16px ;
}
.title>p{
font-size :18px
}
.title>p>span{
font-size: 22px;
}
.btn{
background-color: #3f3732;
color: ivory;
width: 300px;
height: 50px;
border-radius: 0.5em;
font-size: 18px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor:pointer;
position:fixed;
bottom:16px;
left:calc(50% - 150px);
}
/*calc 50%에서 300px 의 절반인 150을 뺀다 왜 기준이 제일앞이라는데..?*/
.box> img{
width:70px;
position: absolute;
bottom: 50%;
left: 10%
}
</style>
<script src="https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/free_newyear_2022.js"></script>
<script>
let mycode = 'd664fa1a532cd3623a152451fb3b2f60';
</script>
<body>
<div class="background">
<div class= "title">
<h1>덕담 하나 주면 안 잡아먹지!</h1>
<p>가족들이 받은 덕담 : <span>2개</span> </p>
</div>
<div class="box">
<!-- <img onclick="alert('새해복!')" src= "https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/object3.png">-->
</div>
<div class ="btn">바구니에 덕담 남기기 </div>
</div>
</body>
</html>1. 꾸미기 css
2. 자바스크립트 정적 스크립트 리액트 자동완성 애니메이션
3. html 뼈대
4. 서버 주어준다 html
5. 새로 고치기 - 어디서 새로 가지고 온다
6. 새로고침 다시 받아온다
7. 브라우저 - 서버에 api 요청 client 받아온다 = 받아와서 보여준다
8. 새로고침 새로 구성한다✍ 느낀점
- 나는 프로그래밍 언어를 Paraphrasing 시켜야 잘 이해가 되는 타입인거 같다.
- coding 내 주석처리는 지저분 하니 velog 기록시 정리할 것
- 각 줄 마다 어떤 역할을 하는지 정확하게 분석
- 과정을 도형화, 단순화 시킬것. 본인의 언어로 내면화 시켜서 이해해 볼 것 .
🏠TECH & GOSSIP