IT 공부/JavaScript (11) 썸네일형 리스트형 [JS] 모달창 띄우기 (전 네비게이션 내용 참고하면 편함.) 1. 모달창 디자인을 한다. //뒷 배경(어둡게) .black-bg { width : 100%; height : 100%; position : fixed; background : rgba(0,0,0,0.5); z-index : 5; padding: 30px; } //모달창 디자인 .white-bg { background: white; border-radius: 5px; padding: 30px; } //네비게이션바 바로 아래, 메뉴 리스트 위에 코드를 놓아야 위치가 괜찮음 모달창 띄우기 로그인하세요 닫기 2. 버튼을 생성해서 버튼 클릭시 뒷 배경과 모달창이 뜨도록 한다. 2-1. 디자인한 Css를 일단 숨긴다. -> black-bg가 white-bg를 품고 있기 때.. [JS] 부트스트랩(bootstrap)으로 내비게이션바 만들기 자바스크립트로 '버튼을 누르면 하단의 메뉴 리스트를 보이게 만들면 된다.' //상단의 내비게이션 코드 - bootstrap Navbar //하단의 메뉴 리스트 - bootstrap An item A second item A third item A fourth item And a fifth one 방법1. 1. 하단의 메뉴 리스트를 숨긴다. 2. 버튼을 누르면 메뉴 리스트를 보이게 만든다. 1. 하단의 메뉴 리스트를 숨긴다. .listgroup{ visibility : hidden; } 2. 버튼을 누르면 메뉴 리스트를 보이게 만든다. -> Css에서 visibility를 visible로 바꾸도록 JavaScript 코드를 짠다. navbtn이라는 Id를 가진 버튼에 addEventListener로 이벤트.. [JS] 셀렉터 종류 - getElementById, getElementsByClassName, querySelector 1. id로 html 요소를 찾아주는 경우, getElementById() 알림창입니다. document.getElementById('alert')~ 뜻 : getElementById로 alert라는 id를 가진 html요소를 가져와 주세요. 2. class 이름으로 html 요소를 찾아주는 경우, getElementsByClassName()[] 알림창 이렇게 긴 내용을 안녕하세요 안녕하세요 이런식으로 querySelector를 통해서 찾을 수 있다. 이때 #은 id .은 class를 나타낸다. Q. 만약 className이 중복된 경우 안녕하세요 안녕하세요 querySelectorAll로 className이 동일한 요소들을 다 찾아 [](리스트)에 넣고, 인덱싱으로 원하는 요소를 찾아준다. 참고로 qu.. 이전 1 2 다음
