반응형
오늘은 새롭게 배운것 보다는 연습하는 시간을 갖은거라 지금까지 했던 것들 총 동원하여 과제를 풀어보도록 하자
이런 웹 페이지를 만들 것이다 .
<!DOCTYPE html>
<html>
<head>
<title>코딩의 민족</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h1 class="A">코딩의 민족</h1>
<h2 class="B">넌 코딩할때가 제일 이뻐 </h2>
<div class="menu">
<img src="images/chicken.jpg">
<div class="t1" >코딩에 빠진 닭</div>
<div class="t2" >주머니가 가벼운 당신의 마음까지 생각한 착한 가격</div>
<a class="t3" href="#">바로결제</a>
</div>
<div class="menu">
<img src="images/sushi.jpg">
<div class="t1" >코코 스시</div>
<div class="t2" >주머니가 가벼운 당신의 마음까지 생각한 착한 가격</div>
<a class="t3" href="#">바로결제</a>
</div>
<div class="menu">
<img src="images/burger.jpg">
<div class="t1" >코데리아</div>
<div class="t2" >주머니가 가벼운 당신의 마음까지 생각한 착한 가격</div>
<a class="t3" href="#">바로결제</a>
</div>
<div class="menu">
<img src="images/bibimbap.jpg">
<div class="t1" >코가네</div>
<div class="t2" >주머니가 가벼운 당신의 마음까지 생각한 착한 가격</div>
<a class="t3" href="#">바로결제</a>
</div>
</body>
</html>@font-face {
src: url("../fonts/BMJUA_otf.otf");
font-family: BMJUA;
/* 이름 정해주는것 나중에 이 이름으로 사용 가능하다 */
}
* {
font-family:BMJUA;
box-sizing: border-box;
}
body{
background-color:#f0e8d9;
text-align: center;
color: #58595b;
}
.A {
font-size: 64px;
margin-top: 75px;
margin-bottom: 30px;
}
.B{
font-size: 32px;
margin-bottom: 75px;
}
.menu{
margin-left: auto;
margin-right: auto;
margin-bottom: 50px;
width:300px;
border-radius: 10px;
background-color: aliceblue;
}
.menu img{
width: 100%;
height: 200px;
border-radius: 10px 10px 0px 0px ;
}
.t1{
margin-top: 20px;
font-size: 32px;
margin-bottom: 20px;
}
.t2{
margin-left: 20px;
margin-right: 20px;
text-align: left;
font-size: 16px;
margin-bottom: 16px;
}
.t3{
display: block;
margin-left: auto;
margin-right: auto;
text-decoration: none;
color: blue;
padding-bottom:20px;
}
반응형
'아옳옳의 코딩공부 > 아옳이의 html5 + css3 공부' 카테고리의 다른 글
| 21-04-29 웹 css 선택자 정리 (0) | 2021.05.11 |
|---|---|
| 21-04-29 웹 html5 태그 정리 (0) | 2021.05.10 |
| 21-04-29 웹 html5 + css3 (3) (0) | 2021.04.30 |
| 21-04-29 웹 html5 + css3 (3) (0) | 2021.04.29 |
| 21-04-28 웹 html5 + css3 (2) (0) | 2021.04.28 |
