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;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
position: fixed;
bottom: 16px;
left: calc(50% - 150px);
}
.box > img{ //->덕담아이콘꾸미겠다
width:70px; //->크기설정
position: absolute; //->아이콘 위치설정
bottom: 50%; //->아이콘 위치설정
left:20%; //->아이콘 위치설정
}
</style>
</head>
<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"> //->onclick="alert('새해복!')" :자바스크립트로 팝업창 띄움
//->아이콘 이미지 삽입
</div>
</div>
<div class="btn">바구니에 덕담 남기기</div>
</body>
</html>
728x90
'• program > 스파르타코딩클럽' 카테고리의 다른 글
| 전체코드 (0) | 2022.01.30 |
|---|---|
| [CSS 기본내용]html:5 문법7 (JS붙이기) (0) | 2022.01.29 |
| [CSS 기본내용] html:5 문법5 (떠다니는 버튼만들기) (0) | 2022.01.29 |
| [CSS 기본내용] html:5 문법5 (폰트바꾸기) (0) | 2022.01.29 |
| [CSS 기본내용] html:5 문법4 (제목만들기) (0) | 2022.01.29 |