HTML + CSS ์๋ฆฌ์ฆ๐ธ/HTML & CSS ์๋ฆฌ์ฆ(V 1.0)
๋ฐฐ๋ฌ ๋ฉ๋ด ์น์ฌ์ดํธ ๋ง๋ค๊ธฐ | HTML&CSS ์๋ฆฌ์ฆ 021
by @ENFJ
2021. 7. 27.
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-container">
<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/sushi.jpg" width="300" height="200">
<div class="info">
<h3>์ฝ์ฝ ์ค์</h3>
<p>์ฃผ๋จธ๋๊ฐ ๊ฐ๋ฒผ์ด ๋น์ ์ ๋ง์๊น์ง ์๊ฐํ ์ฐฉํ ๊ฐ๊ฒฉ!</p>
<a href="#">๋ฐ๋ก ๊ฒฐ์ </a>
</div>
</div>
<div class="food">
<img src = "images/burger.jpg" width="300" height="200">
<div class="info">
<h3>์ฝ๋ฐ๋ฆฌ์</h3>
<p>์ฃผ๋จธ๋๊ฐ ๊ฐ๋ฒผ์ด ๋น์ ์ ๋ง์๊น์ง ์๊ฐํ ์ฐฉํ ๊ฐ๊ฒฉ!</p>
<a href="#">๋ฐ๋ก ๊ฒฐ์ </a>
</div>
</div>
<div class="food">
<img src = "images/bibimbap.jpg" width="300" height="200">
<div class="info">
<h3>์ฝ๊ฐ๋ค</h3>
<p>์ฃผ๋จธ๋๊ฐ ๊ฐ๋ฒผ์ด ๋น์ ์ ๋ง์๊น์ง ์๊ฐํ ์ฐฉํ ๊ฐ๊ฒฉ!</p>
<a href="#">๋ฐ๋ก ๊ฒฐ์ </a>
</div>
</div>
</div>
</body>
</html>
css
@font-face {
src:url("../fonts/BMJUA_otf.otf");
font-family:jua;
}
* {
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-container {
width: 660px;
margin-left: auto;
margin-right: auto;
}
.food {
background-color: white;
width: 300px;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
margin-bottom: 50px;
float: left;
margin-left: 15px;
margin-right: 15px;
}
.food img {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.food .info {
text-align: center;
padding: 20px;
}
.food h3{
color: #58595b;
font-size: 32px;
margin-top: 0px;
margin-bottom: 20px;
font-family: jua;
}
.food p {
color: #58595b;
font-size: 16px;
margin-top: 0px;
margin-bottom: 16px;
text-align: left;
font-family: jua;
}
.food a {
color: #0000ee;
font-size: 16px;
text-decoration: none;
font-family: jua;
}
๊ฒฐ๊ณผ
