반응형
코딩의 민족
위 이미지의 지시사항을 따라, '코딩의 민족' 웹사이트를 완성해주세요.
참고로 '바로 결제' 버튼은 href="#"로 설정되어 있는 <a> 태그로 써주세요!
<!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">
<img src="chicken.jpg" width ="300px" height="200px">
<div class="info">
<h3> 코딩에 빠진 닭 </h3>
<p> 주머니가 가벼운 당신의 마음까지 생각한 착한 가격!</p>
<a href="#"> 바로 결제 </a>
</div>
</div>
<div class="food">
<img src="sushi.jpg" width ="300px" height="200px">
<div class="info">
<h3> 코코 스시 </h3>
<p> 주머니가 가벼운 당신의 마음까지 생각한 착한 가격!</p>
<a href="#"> 바로 결제 </a>
</div>
</div>
<div class="food">
<img src="burger.jpg" width ="300px" height="200px">
<div class="info">
<h3> 코데리아 </h3>
<p> 주머니가 가벼운 당신의 마음까지 생각한 착한 가격!</p>
<a href="#"> 바로 결제 </a>
</div>
</div>
<div class="food">
<img src="bibimbap.jpg" width ="300px" height="200px">
<div class="info">
<h3> 코가 </h3>
<p> 주머니가 가벼운 당신의 마음까지 생각한 착한 가격!</p>
<a href="#"> 바로 결제 </a>
</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;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
margin-bottom: 50px;
}
.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.08 |
|---|---|
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.06 |
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.05 |
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.05 |