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>
.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; //->타이틀 가운데로 정렬
justify-content: center;
align-items: center;
padding-top: 5vh; //->위아래 여백주기
}
.title > h1{ //->title의 h1꾸미기
font-size: 22px; //->폰트사이즈
background-color: white;
padding: 8px 16px; //->padding: 위아래여백px 좌우여백px;
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 문법5 (떠다니는 버튼만들기) (0) | 2022.01.29 |
|---|---|
| [CSS 기본내용] html:5 문법5 (폰트바꾸기) (0) | 2022.01.29 |
| [CSS 기본내용] html:5 문법3 (배경채우기) (0) | 2022.01.29 |
| [CSS 기본내용] html:5 문법2 (0) | 2022.01.29 |
| [CSS 기본내용] html:5 문법1 (0) | 2022.01.29 |