전체화면
HTML 파일
<!DOCTYPE html>
<html>
<head>
<title>충섭코딩의 민족</title>
<meta charset = "utf-8">
<link href="styles.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<p id = "head1"> 충섭 코딩의 민족 </p>
<p id = "head2"> 넌 코딩할 때가 제일 예뻐</p>
<div class="food">
<img src="https://mblogthumb-phinf.pstatic.net/MjAyMDA0MTNfMTEw/MDAxNTg2Nzc3NDYyNDM5.I57eOPQd7OGh1uIEeSWPTyDmlscEjDNyOfcToP0O0dgg.c5YdQkbDxwSEHjgL_fJhHiBV0ZcbzGov9YqW4B15jJUg.PNG.kizaki56/09.png?type=w800 " width="300" height ="200">
<div class="info">
<h3>코딩에 빠진 닭</h3>
<p>주머니가 가벼운 당신의 마음까지 생각 한 착한가격</p>
<a href="#">바로 결제</a>
</div>
</div>
<div class="food">
<img src="https://nihombashi-tokyo.com/kr/wp-content/uploads/2014/11/DSC_4640aa.jpg " width="300" height ="200">
<div class="info">
<h3>코코 스시</h3>
<p>주머니가 가벼운 당신의 마음까지 생각 한 착한가격</p>
<a href="#">바로 결제</a>
</div>
</div>
<div class="food">
<img src="https://dimg.donga.com/wps/NEWS/IMAGE/2020/02/19/99785037.1.jpg" width="300" height ="200">
<div class="info">
<h3>코데리아</h3>
<p>주머니가 가벼운 당신의 마음까지 생각 한 착한가격</p>
<a href="#">바로 결제</a>
</div>
</div>
<div class="food">
<img src="https://recipe1.ezmember.co.kr/cache/recipe/2017/04/13/abcf293fb7d0d73d61e274127ced7b931.jpg" width="300" height ="200">
<div class="info">
<h3>코가네</h3>
<p>주머니가 가벼운 당신의 마음까지 생각 한 착한가격</p>
<a href="#">바로 결제</a>
</div>
</div>
</body>
</html>
CSS파일
@font-face{
src: url("fonts/BMJUA_ttf.ttf");
font-family: "Jua";
}
*{
box-sizing: border-box;
}
body{
background-color: #F0E8D9;
}
#head1 {
font-size: 64px;
margin-top: 75px;
margin-bottom:30px;
text-align: center;
color: #58595B;
font-family: "Jua";
}
#head2 {
font-size:32px;
marign-bottom:75px;
text-align: center;
color: #58595B;
font-family: "Jua";
}
.food{
background-color: white;
width: 300px;
border-radius: 10px;
margin-left: auto;
margin-right: auto;
margin-bottom: 50px;
font-family: "Jua";
}
.food .info{
padding: 20px;
font-family: "Jua";
}
.food img{
border-radius: 10px 10px 0px 0px;
}
.food h3{
color: #58595B;
margin-top: 0px;
margin-top: 20px;
text-align: center;
font-size: 32px;
}
.food p{
color: #58595B;
margin-top: 0px;
margin-top: 16px;
font-size: 16px;
}
.food a{
color: #0000EE;
text-decoration: none;
display: block;
text-align: center;
font-size: 16px;
}
