* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
웹개발 종합반 1주차를 복습하려고 카드를 추가했는데 자꾸 이상하게 추가돼요ㅠ
다른 카드를 코드복사해도 이렇고
전에 만들었던 정상작동하는 카드 코드를 복사해와도 이미지 공간이 이상하게 뜹니다 ㅠ
<!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>연습장</title>
<style>
.titlebox {
background-color: black;
border-radius: 20px;
width: 300px;
height: 80px;
margin: 20px auto 20px auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.title {
color: gray;
}
.subtitle {
background-color: gray;
border-radius: 10px;
width: 400px;
height: 40px;
margin: 0px auto 0px auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.subtitlein {
color: white;
}
.mycards {
width: 1200px;
margin: 20px auto 20px auto;
}
</style>
</head>
<body>
<div class="titlebox">
<h1 class="title">연습장</h1>
</div>
<div class="subtitle">
<p class="subtitlein">연습장</p>
</div>
<div class="mycards">
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.
</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to
additional content. This card has even longer content than the first to show that equal height
action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
</body>
</html>
