반응형
코딩의 민족 그리드
<!DOCTYPE html>
<html>
<head>
<title>코딩의 민족</title>
<meta charset="utf-8">
<link rel="stylesheet" href="Styles.css">
</head>
<body>
<h1> 코딩의 민족 </h1>
<h2> 넌 코딩할때가 제일 이뻐 </h2>
<div class="food-container">
<div class="food">
<img src="../Ex0121/chicken.jpg" width ="300px" height="200px">
<div class="info">
<h3> 코딩에 빠진 닭 </h3>
<p> 주머니가 가벼운 당신의 마음까지 생각한 착한 가격!</p>
<a href="#"> 바로 결제 </a>
</div>
</div>
<div class="food">
<img src="../Ex0121/sushi.jpg" width ="300px" height="200px">
<div class="info">
<h3> 코코 스시 </h3>
<p> 주머니가 가벼운 당신의 마음까지 생각한 착한 가격!</p>
<a href="#"> 바로 결제 </a>
</div>
</div>
<div class="food">
<img src="../Ex0121/burger.jpg" width ="300px" height="200px">
<div class="info">
<h3> 코데리아 </h3>
<p> 주머니가 가벼운 당신의 마음까지 생각한 착한 가격!</p>
<a href="#"> 바로 결제 </a>
</div>
</div>
<div class="food">
<img src="../Ex0121/bibimbap.jpg" width ="300px" height="200px">
<div class="info">
<h3> 코가네 </h3>
<p> 주머니가 가벼운 당신의 마음까지 생각한 착한 가격!</p>
<a href="#"> 바로 결제 </a>
</div>
</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
body {
background-color: #f0e8d9;
}
h1 {
text-align: center;
font-size: 64px;
color: #58595B;
margin-top: 75px;
margin-bottom: 30px;
}
h2 {
text-align: center;
font-size: 32px;
color: #58595B;
margin-bottom: 75px;
}
.food img {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.food {
background-color: white;
width: 300px;
border-radius: 10px;
margin-bottom: 50px;
float: left;
margin-left: 15px;
margin-right: 15px;
}
.food-container {
width: 660px;
margin-left: auto;
margin-right: auto;
}
.food .info {
padding: 20px;
text-align: center;
}
.food h3 {
color: #58595B;
font-size: 32px;
margin-top: 0px;
margin-bottom: 20px;
}
.food p {
color: #58595B;
font-size: 16px;
text-align: left;
margin-top: 0px;
margin-bottom: 16px;
}
.food a {
color: #0000ee;
font-size: 16px;
text-decoration: none;
}
본 내용은 Codeit의 '웹 퍼블리싱' 강의를
참고하여 작성한 내용입니다.
반응형
'Front-end > HTML&CSS' 카테고리의 다른 글
[웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.09 |
---|---|
[웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |
[웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |
[웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |
[웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |