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');
}
//->url에 파일링크넣고 format에 파일형식넣기 * { //->*은 전체에 적용하겠다 라는 의미
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;
}
</style>
</head>
<body>
<div class="background">
<div class="title">
<h1>덕담 하나 주면 안 잡아먹지!</h1>
<p>우진님이 받은 덕담:<span>2개</span></p>
</div>
</div>
</body>
</html>
728x90
'• program > 스파르타코딩클럽' 카테고리의 다른 글
| [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 |
| [CSS 기본내용] html:5 문법2 (0) | 2022.01.29 |