JavaScript 입문과 웹 UI개발(6)-서브메뉴 만들어보기와 classList 다루기
2022. 9. 30. 12:21ㆍ애플코딩 javascript 강의
반응형
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- css 짜기 귀찮아서 Bootstrap 라이브러리 사용할거임
구글에 bootstrap 검색 사이트에 들어가서 cdn link를 붙여넣어라
CSS는 head 태그안에 넣어주고 JS는 body태그 닫히는</body>
바로 전에 넣어줘라
-->
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
crossorigin="anonymous">
<link href="main.css" rel="stylesheet">
</head>
<body>
<!-- 부트스트랩이 적용된 버튼 중에서 아무거나 사용하거 싶으면 bootstarp 사이트에서
button을 검색해라. 그럼 다양한 버튼이 나오는데 원하는걸 거져다가 써라
위에 navigation bar를 만들거니 nav bar를 검색해서 붙여넣어라
서브메뉴에 관련된 것들은 bootstrap에서 list group이라고 검색하면 나온다
-->
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand">Navbar</span>
<!--(참고) type을 button으로 안해주면 form 태그 내에서 submit이됨 -->
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<!-- 여러개의 class를 적용하고 싶으면 띄어쓰기를 통해서 여러개의 class를 넣을 수 있다-->
<!-- 클래스를 탈부착 함으로써 효과가 적용되도록 하면 애니메이션 추가가 쉽고 나중에 재사용이 편리하다-->
<ul class="list-group" id="test1">
<li class="list-group-item active" aria-current="true">An active item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
<script>
//클래스 탈부착하기 .classList.add로 부착 해준다
// 탈착은 .classList.remove로 할 수 있다.
// 버튼을 눌렀을때 해당 클래스가 없으면 부착해주고 있으면 탈착해주는 toggle이 있다
// .classList.toggle로 작성해준다
document.getElementsByClassName("navbar-toggler")[0].addEventListener('click', function(){
document.getElementsByClassName("list-group")[0].classList.toggle("show");
});
//selector 중에서
//document.querySelector() 를 사용하면 id나 class를 이용해서 선택할 수 있다.
// class가 list-group인 것을 선택하려면
//document.querySelector('.list-group')로 선택
// id가 test1인 것을 선택하려면
//document.querySelector('#test1')로 선택
//문제는 해당하는 요소가 여러개 있으면 첫번째꺼만 찾아준다.
//예를들어 클래스가 lsit-group-item인 태그가 여러개 있는데 이중에서 첫번째만 찾을 수 있다.
// 이를 해결하려면
//document.querySelectorAll()을 사용하고 index를 적어주면된다. 두번째의 A second item을 선택하려면
//document.querySelectorAll(".list-group-item")[1]로 적으면 된다
//숙제!!!
// 위에 있는 모든 selector를 queryselector로 바꿔라
//정답==============
// document.querySelector(".navbar-toggler").addEventListener('click', function(){
// document.querySelector(".list-group").classList.toggle("show");
// });
//=====================
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
crossorigin="anonymous"></script>
</body>
</html>main.css
.alert-box{
background-color: skyblue;
padding: 20px;
color: white;
border-radius: 5px;
display: none;
/* 숨길때는 none 나타낼때는 block */
}
.list-group{
display: none;
}
.show{
display: block;
}- An active item
- A second item
- A third item
- A fourth item
- And a fifth one
강의 출처: JavaScript 입문과 웹 UI개발
코딩애플 온라인 강좌 - 개발자도 단기완성!
단연 NO1 강사님의 NO.1 강의 역시나 명강입니다. IT 업계의 대치동 NO1. 강사같은 엄청난 강의력. 코딩애플님의 강의는, 엄청나게 기초적인 것부터 가르치는 듯 보이지만, 실제로 다루는 깊이는 절
codingapple.com
반응형
'애플코딩 javascript 강의' 카테고리의 다른 글
| JavaScript 입문과 웹 UI개발(8)-모달창 만들기와 간단한 애니메이션 (0) | 2022.09.30 |
|---|---|
| JavaScript 입문과 웹 UI개발(7)-jQuery 사용법 간단정리 (0) | 2022.09.30 |
| JavaScript 입문과 웹 UI개발(5)-자바스크립트 이벤트 리스너 (1) | 2022.09.30 |
| JavaScript 입문과 웹 UI개발(4)-function의 파라미터 문법 (0) | 2022.09.30 |
| JavaScript 입문과 웹 UI개발(3)- JavaScript function 문법 사용법 (0) | 2022.09.30 |