728x90
<!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">
<title>덕담 하나 주면 안 잡아먹지!</title>
<style>
@font-face {
font-family: 'Cafe24Ssurround';
src: url('https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/Cafe24Ssurround.woff') format('woff');
}
* {
font-family: 'Cafe24Ssurround';
}
.background{
width: 100vw;
height: 100vh;
max-width: 450px;
background-position: center;
background-size: cover;
margin: auto;
}
body, h1,p{
margin: 0;
}
.title{
color: #3f3732;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-top: 5vh;
}
.title > h1{
font-size: 22px;
background-color: white;
padding: 8px 16px;
border-radius: 16px;
}
.title > p{
font-size: 18px;
}
.title > p > span{
font-size: 22px;
}
.btn {
background-color: #3f3732; //->버튼 배경색
color: white; //->글씨색
width: 300px;
height: 50px;
border-radius: 10px;
font-size: 18px;
display: flex; //->가운데 정력 4줄
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer; //->마우스 커서가 버튼을 향하면 손가락 모양으로 변함
position: fixed; //->위치 고정
bottom: 16px; //->아래에서 16px 띄우기
left: calc(50% - 150px); //->화면의 가운데를 기준으로(50%) 전체길이가 300px이므로 절반인 150px 왼쪽으로 이동
}
</style>
</head>
<body>
<div class="background">
<div class="title">
<h1>덕담 하나 주면 안 잡아먹지!</h1>
<p>우진님이 받은 덕담:<span>2개</span></p>
</div>
</div>
<div class="btn">바구니에 덕담 남기기</div> //->버튼 이름 생성
</body>
</html>
728x90
'• program > 스파르타코딩클럽' 카테고리의 다른 글
| [CSS 기본내용]html:5 문법7 (JS붙이기) (0) | 2022.01.29 |
|---|---|
| [CSS 기본내용] html:5 문법6 (덕담 아이콘넣기) (0) | 2022.01.29 |
| [CSS 기본내용] html:5 문법5 (폰트바꾸기) (0) | 2022.01.29 |
| [CSS 기본내용] html:5 문법4 (제목만들기) (0) | 2022.01.29 |
| [CSS 기본내용] html:5 문법3 (배경채우기) (0) | 2022.01.29 |