
* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
드랍박스가 있는 형태를 집어넣고 싶었는데 이렇게 보여지는데 왜 그런지 문의 드립니다 ㅠㅠ


작성한 코드 및 에러 메세지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.mytitle {
color: white;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMjA5MjBfMjE5%2FMDAxNjYzNjgwNzI1NjU0.bb3vOmUmoiZfd-WQh-RBXO3PHfbR1v9qhMlGKrgWafkg.qq43nQisEnL1ZyAQVbTuyiqehezlUr8bAPec0gUAOqQg.JPEG.inzzang9807%2F%25BC%25D5%25C8%25EF%25B9%25CE7.jpg&type=sc960_832);
background-color: gray;
background-position: center;
background-size: cover;
width: 500px;
height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
<body>
<div class="mytitle">
<h1>대제목</h1>
<p>텍스트를 입력합니다<span style="color:red"> 얍얍</span></p>
</div>
<div class="input-group mb-3">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">1번</a></li>
<li><a class="dropdown-item" href="#">2번</a></li>
<li><a class="dropdown-item" href="#">3번</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">4번</a></li>
</ul>
<input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>
</body>
</html>
