[lec6.html]
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link rel = "stylesheet" href="main.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<button type="button" class="btn btn-secondary">Secondary</button>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand">Navbar</span>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<!-- 1. 미리 서브 메뉴를 html css로 디자인-->
<ul class="list-group"> <!-- 띄어쓰기 통해서 두 개의 클래스 정의 가능 /애니매이션, 재사용 유리-->
<li class="list-group-item">An item
<li class="list-group-item">A second item
<li class="list-group-item">A third item
<li class="list-group-item">A fourth item
<li class="list-group-item">And a fifth one
<!-- 2. 버튼 클릭 시 서브 메뉴가 나타나게 작성 / class 탈부착으로 구현가능-->
<script>
document.getElementsByClassName('navbar-toggler')[0].addEventListener('click',function(){
document.getElementsByClassName('list-group')[0].classList.toggle('show');
/* 원하는 요소에 class 추가하는 것 */
/* querySelector 사용 -> document.querySelectorAll('.~') css 문법 그대로 /*style.display = 'none';*/
/* document.getElementsByClassName('show')[0].style.display = 'block'; */
})
</script>
</body>
</html>
[main.css]
.alert-box{
background: blue;
color: skyblue;
padding: 20px;
border-radius: 5px;
display: none; /* 1. 미리 디자인해놓고 숨김 */
}
.list-group{
display : none;
}
.show{
display : block;
}
이렇게 코드를 작성했는데 list-group의 리스트들이 브라우저에서 none이 적용되지 않고모두 나타나고 있습니다.
이래저래 고쳐보고 생각해보았는데 진전이 없어 어느 부분이 틀렸는지 질문을 드립니다.
감사합니다. :)
저도 똑같이 복붙하여 실행하였는데 list item들이 브라우저에서 보이는 상태로 나타납니다 ㅠㅠ