코딩의 민족
위 이미지의 지시사항을 따라, '코딩의 민족' 웹사이트를 완성해주세요.
참고로 '바로 결제' 버튼은 href="#"로 설정되어 있는 <a> 태그로 써주세요!
셀프 채점
다음 항목들이 제대로 구현되었는지 확인해 보세요!
음식 사진의 아래 모서리를 제외하고는, 모든 모서리가 둥글게 설정되어 있다.
식당 제목과 음식 이미지는 가운데 정렬, 식당 설명글은 왼쪽 정렬 되어 있다.
각 메뉴의 이미지와 설명이 도면대로 잘 들어가 있다.
HTML
<!DOCTYPE html>
<html>
<head>
<title>코딩의 민족</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h1>코딩의 민족</h1>
<h2>넌 코딩할 때가 제일 이뻐</h2>
<div class="food">
<img src="images/chicken.jpg" width="300" height="200">
<div class="info">
<h3>코코스시</h3>
<p>주머니가 가벼운 당신의 마음까지 생각한 착한 가격!</p>
<a href="#">바로 결제</a>
</div>
</div>
<div class="food">
<img src="images/chicken.jpg" width="300" height="200">
<div class="info">
<h3>코데리아</h3>
<p>주머니가 가벼운 당신의 마음까지 생각한 착한 가격!</p>
<a href="#">바로 결제</a>
</div>
</div>
<div class="food">
<img src="images/chicken.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_otf.tof");
}
* {
box-sizing: border-box;
}
body {
background-color: #f0e8d9;
}
h1 {
text-align: center;
font-size: 64px;
color: #58595b;
margin-top: 75px;
margin-bottom: 30px;
font-family: Jua;
}
h2 {
text-align: center;
font-size: 32px;
color: #58595b;
margin-bottom: 75px;
font-family: Jua;
}
.food {
background-color: white;
width: 300px;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
overflow: hidden;
margin-bottom: 50px;
}
.food .info {
padding: 20px;
text-align: center;
}
.food h3 {
color: #58595b;
font-size: 32px;
font-family: Jua;
margin-top: 0;
margin-bottom: 20px;
}
.food p {
color: #58595b;
font-size: 16px;
font-family: Jua;
margin-top: 0;
margin-bottom: 16px;
text-align: left;
}
.food a {
color: #0000ee;
font-size: 16px;
font-family: Jua;
text-decoration: none;
}
'교육 > [Codeit]웹 퍼블리싱' 카테고리의 다른 글
| 실습과제. 마우스 오버 버튼 (0) | 2021.07.11 |
|---|---|
| 선택자 정리 (0) | 2021.05.12 |
| 실습과제. 썸머 뮤직 페스티벌 (SMF) (0) | 2021.05.06 |
| 배경 이미지 (0) | 2021.05.05 |
| 실습과제. 로그인 페이지 (0) | 2021.05.05 |
