설날이 다가오니 갑자기 해보고 싶어서 즉흥적으로 만들어 본 덕담 페이지
 |
|
|
🐯
풀스택 공부하기 전에 예습으로 무엇을 해볼까 찾다가 한번 만들어봤다.
너~~~~~~~~무 오랜만에 해보는 html, css..
2학년 때 학교 여름방학 특강으로 프론트앤드수업을 들었는데 그때 이후로 제대로 해본 적이 없어서 거의 다 잊어버린 상태였다..ㅋ
그래도 오랜만에 기억 더듬더듬 하면서 재밌었다!!!
역시 html이 즉각적인 성취감 최고인듯..
https://github.com/janghr1225/ThePepTalkPage
GitHub - janghr1225/ThePepTalkPage: 새해 덕담 페이지
새해 덕담 페이지. Contribute to janghr1225/ThePepTalkPage development by creating an account on GitHub.
github.com
🐯
🐯
핵심만 조금 리뷰를 하자면..
1. 전체적 구조
<body>
<div class="background">
<!--위에 두줄 구조잡기-->
<div class="title">
<h1>덕담 하나 주면 안잡아먹지!</h1>
<p>깡깡이가 받은 덕담: <span>2개</span></p>
</div>
<div class="box">
</div>
<div class="btn">바구니에 덕담 남기기</div>
</div>
</body>
2. 카톡으로 링크를 전달하면 이런 식으로 뜨는데 이것도 다 만들어져서 전달되는 것이었다는 사실!
<!--카톡에서 링크 전달할 때 보여지는 부분도 이렇게 만들어짐-->
<meta property="og:title" content="ㅇㅇ님의 덕담 페이지"/>
<meta property="og:description" content="덕담 한마디 남겨주세요!"/>
<meta property="og:image" content="링크전달때보여질이미지링크.png"/>
2. 폰트 설정
/*폰트 설정*/
@font-face {
font-family: '폰트이름';
src: url('폰트링크.woff') format('woff');
}
/* 여기서 *는 폰트를 전체 글에 적용한다는 의미*/
* {
font-family: '폰트이름';
}
3. 글씨가 가운데 오도록하는 언제나 같이 다니는 4총사
.title{
color: 컬러넘버;
/*글씨가 가운데 오도록, 이 네줄은 셋뚜셋뚜*/
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-top:5vh;
}
4. 버튼 설정
.btn{
/*버튼위에 마우스가 올라가면 커서 바뀜*/
cursor: pointer;
/*버튼을 body가운데에 떠다니도록*/
position: fixed;
bottom: 16px;
left: calc(50% - 150px);
}
5. 서버 연결
<!--서버에 저장하고 가져오는 작업-->
<script src="서버링크.js"></script>
<script>
let mycode = '나만의서버코드';
</script>서버부분은 이미 만들어진 부분을 사용했음!
전체 코드에서 내가 핵심이라고 생각한 부분만 간략히 기록했다.
내년 새해에 더 발전시켜봐야지!! 크크 재밌었다!
페이지 링크를 올리고 싶지만 친구들이 남겨준 덕담에 사생활이 많기 때문에 링크는 올리지 못합니다ㅠㅠ
우리 모두 새해 복 많이 받자!
올해는 반!드!시! 취뽀하고 건강하고 행복하자!!
코로나는 좀 꺼져주고..ㅎ
'공부하자' 카테고리의 다른 글
| 대학생 코딩 캠프(대코캠)_코드잇 활동 (0) | 2021.12.20 |
|---|