* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
부트스트랩의 내비게이션 바를 가지고 와서 적용해 보았는데 'Dropdows'라고 적혀져 있는 메뉴를 클릭시 중메뉴가 열려야 하는데 열리지 않습니다
버튼 같은 것은 대체로 그대로 적용이 되는 것 같은데 기능이 작동하지 않는 것도 있는 것 같아 질문 드립니다
- 적용한 부트스트랩 캡쳐 :
링크 : https://getbootstrap.com/docs/5.3/components/navbar/#responsive-behaviors
현재 복습중인 화면
Dropdown 클릭시 부트스트랩 예시처럼 매뉴가 펼쳐지지 않음
작성한 코드 및 에러 메세지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>연습코드</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
body {
background-color: #FBEFEF;
}
.bt {
padding: 20px;
}
.choobox {
width: 500px;
background-image: url(https://t1.daumcdn.net/cfile/tistory/254BD449524294FA26);
background-position: center;
background-size: cover;
border-radius: 10px;
border: 1px solid #8181F7;
padding: 10px;
text-align: center;
color: red;
box-shadow: 0px 0px 2px 0px black;
}
.aligncenter {
margin: 150px auto 10px auto;
}
.choobox2 {
width: 500px;
}
.card-size {
width: 1500px;
margin: 10px auto 10px auto;
}
.card-size-left {
margin: 0px 15px 0px 0px;
}
.btn-size {
width: 150px;
}
</style>
<script>
let a = 15;
if (a > 20) {
console.log('정답입니다')
} else {
console.log('오답입니다')
}
let b = [
{ 'name': '영수', 'age': '1살' },
{ 'name': '광호', 'age': '5살' },
{ 'name': '지윤', 'age': '2살' },
{ 'name': '이수', 'age': '14살' }
]
function textname() {
b.forEach(nn => {
let op = nn['name']
$('#textplus').append(`<p>제 이름은 ${nn['name']}이고, 나이는 ${nn['age']}입니다. 맞습니까 ${op}야?</p>`);
});
}
function textdel() {
$('#delbtn').empty();
$('#textplus').empty();
$('#text-red').empty();
}
function color_red() {
$('#text-red').text('텍스트레드');
}
let bunsu = [5, 35, 23, 53, 11, 26, 33, 10, 55, 70]
bunsu.forEach(a => {
if (a > 30) {
console.log('정답입니다')
} else if (a < 1) {
console.log('오답입니다')
} else {
console.log('틀렸습니다')
}
});
</script>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Hello World</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">홈</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.youtube.com/">유튜브</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.youtube.com/watch?v=4_WLS9Lj6n4">유튜브2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.youtube.com/watch?v=Tt_tKhhhJqY">유튜브3</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="https://www.youtube.com/">Action</a></li>
<li><a class="dropdown-item" href="https://www.youtube.com/">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="https://www.youtube.com/">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="입력하세요." aria-label="Search">
<button class="btn btn-outline-success btn-size" type="submit">검색버튼</button>
</form>
</div>
</div>
</nav>
<div class="choobox aligncenter">
<h1 id="text-red">hello world</h1>
<h1 id="delbtn">삭제될 텍스트입니다</h1>
<div id="textplus"></div>
<button class="bt" onclick="textname()">버튼</button>
<button class="bt" onclick="textdel()">삭제버튼</button>
<button type="button" class="btn btn-primary" onclick="color_red()">헬로월드 변경 버튼</button>
<button type="button" class="btn btn-light">Light</button>
</div>
<div class="choobox2 aligncenter">
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">텍스트 박스</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</div>
<div class="card-group card-size">
<div class="card card-size-left">
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">카드 제목</h5>
<p class="card-text">카드 내용</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">하단 리스트</small>
</div>
</div>
<div class="card card-size-left">
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">카드 제목</h5>
<p class="card-text">카드 내용</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">하단 리스트</small>
</div>
</div>
<div class="card card-size-left">
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">카드 제목</h5>
<p class="card-text">카드 내용</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">하단 리스트</small>
</div>
</div>
</div>
</body>
</html>
