반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background:papayawhip;
}
#container {
display: flex;
justify-content: center;
}
.card img {
width: 300px;
height: 200px;
}
.card {
display:flex;
margin: 10px;
}
.gul {
background: white;
width: 300px;
height: 200px;
text-align: center;
box-sizing: border-box;
}
h3 {
margin-top: 50px;
}
h1 {
text-align: center;
}
@media screen and (max-width: 1024px) {
#container {
display: flex;
flex-direction: column;
align-items: center;
}
}
@media screen and (max-width: 512px) {
.card {
display:flex;
flex-direction: column;
}
}
</style>
</head>
<body>
<div id="container">
<!-- <h1>🦾🦾 다이어트 명언 모음.zip 🦿🦿</h1> -->
<div class="card">
<img src="../images/diet.jpg">
<div class="gul">
<h3>먹어봤자 <br>다 아는 맛이다</h3>
<h4>-옥주현</h4>
</div>
</div>
<div class="card">
<img src="../images/diet2.jpg">
<div class="gul">
<h3>인생은 살이 쪘을 때와 <br>안 쪘을 때로 나뉜다</h3>
<h4>-이소라</h4>
</div>
</div>
<div class="card">
<img src="../images/diet3.jpg">
<div class="gul">
<h3>나를 배부르게 하는 것들이 <br>나를 파괴한다</h3>
<h4>-안젤리나 졸리</h4>
</div>
</div>
<div class="card">
<img src="../images/diet4.jpg">
<div class="gul">
<h3>먹고 싶은 걸 다 먹되 <br>아주 조금만 먹어요</h3>
<h4>-설현</h4>
</div>
</div>
</div>
</body>
</html>반응형
'Java Script' 카테고리의 다른 글
| [JS] DELETE (0) | 2023.04.13 |
|---|---|
| [JS] INSERT (0) | 2023.04.13 |
| [JS] DOM - getElementsByTagName (0) | 2023.04.12 |
| [JS] eventListener (0) | 2023.04.12 |
| [JS] 버튼클릭>함수호출>색 변경 (0) | 2023.04.12 |